Formatting Errors Between Break Points
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.quickandeasywebbuilder.com/f ... =12&t=1901
MUST READ:
http://www.quickandeasywebbuilder.com/publish.html
http://www.quickandeasywebbuilder.com/preview.html
Frequently Asked Questions about Publishing
PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.quickandeasywebbuilder.com/f ... =12&t=1901
MUST READ:
http://www.quickandeasywebbuilder.com/publish.html
http://www.quickandeasywebbuilder.com/preview.html
Frequently Asked Questions about Publishing
Formatting Errors Between Break Points
I'm having an issue with formatting errors between different resolution break points.
My website has five pages, each with three break points - default (800pix), 768px & 320px. When previewing in the QnEWB (8.0.1) everything looks right. But when I publish errors appears in the formatting. This was happening in V7. I upgraded to V8 hoping it would fix the issue, but it didn't.
The main errors I'm getting are text colours (active links) and the photo gallery (lightbox style - prettyPhoto). The photo gallery has no border and in the WYSIWYG editor displays correctly. However, after publishing to a folder and opening (Chrome, Safari, Firefox), whenever I shrink the page to active the break points, a white border appears in the photo gallery (both 768px & 320px), and the text colour of the links change colour from black to grey in every page.
Screen grabs of published site here:
https://u.pcloud.link/publink/show?code ... xCGb6ccl97
My website has five pages, each with three break points - default (800pix), 768px & 320px. When previewing in the QnEWB (8.0.1) everything looks right. But when I publish errors appears in the formatting. This was happening in V7. I upgraded to V8 hoping it would fix the issue, but it didn't.
The main errors I'm getting are text colours (active links) and the photo gallery (lightbox style - prettyPhoto). The photo gallery has no border and in the WYSIWYG editor displays correctly. However, after publishing to a folder and opening (Chrome, Safari, Firefox), whenever I shrink the page to active the break points, a white border appears in the photo gallery (both 768px & 320px), and the text colour of the links change colour from black to grey in every page.
Screen grabs of published site here:
https://u.pcloud.link/publink/show?code ... xCGb6ccl97
Re: Formatting Errors Between Break Points
prettyPhoto is a third party script, it was included on request of other users a few years ago, is provided "AS IS".
Unfortunately prettyPhoto has not been updated for many years. So, it looks like it's no longer maintained.
But I have added support for a few new light boxes in the latest version: lc_lightbox, unitegallery and Strip lightbox.
Also, there a few others that you can add yourself:
https://www.quickandeasywebbuilder.com/lightboxes.html
If you have a problem with other formatting then please prepare a demo project so I can see all your settings.
Unfortunately prettyPhoto has not been updated for many years. So, it looks like it's no longer maintained.
But I have added support for a few new light boxes in the latest version: lc_lightbox, unitegallery and Strip lightbox.
Also, there a few others that you can add yourself:
https://www.quickandeasywebbuilder.com/lightboxes.html
If you have a problem with other formatting then please prepare a demo project so I can see all your settings.
Re: Formatting Errors Between Break Points
Thanks for getting back to me Pablo.
The error is not affected by the lightbox used (tried different ones). In fact, even with no lightbox selected the error is there. It seems to be related to the Photo Gallery.
Here's a new project (demo) from scratch which replicates the Photo Gallery border error (we can deal with the text formatting later). It only contains one page. This link also includes the photos used.
https://u.pcloud.link/publink/show?code ... ACoudsBS1y
Steps used to reproduce the error.
1. Create new website with default resolution.
2. Add two break points - 320px & 768px.
3. Select breakpoints option - "Activate breakpoints when browser window is larger than the device width"
4. Set background colour on each breakpoint page to Black.
5. Add Photo Gallery to each breakpoint (72 photo jpegs used in link above. FYI, all royalty free).
default = 9 columns
768px = 8 columns
320px = 4 columns
6. Preview. When shrinking the browser, the breakpoints activate, but a white border appears around Photo Gallery in 320px & 768px breakpoints. In default there's no border (transparent) which I what I want for all.
The error is not affected by the lightbox used (tried different ones). In fact, even with no lightbox selected the error is there. It seems to be related to the Photo Gallery.
Here's a new project (demo) from scratch which replicates the Photo Gallery border error (we can deal with the text formatting later). It only contains one page. This link also includes the photos used.
https://u.pcloud.link/publink/show?code ... ACoudsBS1y
Steps used to reproduce the error.
1. Create new website with default resolution.
2. Add two break points - 320px & 768px.
3. Select breakpoints option - "Activate breakpoints when browser window is larger than the device width"
4. Set background colour on each breakpoint page to Black.
5. Add Photo Gallery to each breakpoint (72 photo jpegs used in link above. FYI, all royalty free).
default = 9 columns
768px = 8 columns
320px = 4 columns
6. Preview. When shrinking the browser, the breakpoints activate, but a white border appears around Photo Gallery in 320px & 768px breakpoints. In default there's no border (transparent) which I what I want for all.
Re: Formatting Errors Between Break Points
Thanks for the detailed information!
I was able to reproduce the problem and it will be fixed in the next update.
I was able to reproduce the problem and it will be fixed in the next update.
Re: Formatting Errors Between Break Points
Great, thanks Pablo!
Whilst you're looking at that issue, would you mind looking at the Text Menu from the Navigation toolboox?
When jumping to breakpoints (768px & 320px) it was losing it's colour formatting. Default is perfect (all black), but the other breakpoints would revert to different colours when published/previewed.
Whilst you're looking at that issue, would you mind looking at the Text Menu from the Navigation toolboox?
When jumping to breakpoints (768px & 320px) it was losing it's colour formatting. Default is perfect (all black), but the other breakpoints would revert to different colours when published/previewed.
Re: Formatting Errors Between Break Points
Do you also have a demo project for this, so I can see all your settings?
Re: Formatting Errors Between Break Points
Here's a test project (based on the original) plus only the background photos/assets.
https://u.pcloud.link/publink/show?code ... Ch3zde0M1X
I've stripped the photos out of the 'snaps' page so the Photo Gallery doesn't load properly. But you can ignore that as it's just the Text Menu formatting we're looking at for this.
I want the text to remain black the whole time. I'm using a line under each the word to highlight the page selected (not colour change). However, you can see when published, in the 320px & 768px breakpoints the text is changing colour to grey.
https://u.pcloud.link/publink/show?code ... Ch3zde0M1X
I've stripped the photos out of the 'snaps' page so the Photo Gallery doesn't load properly. But you can ignore that as it's just the Text Menu formatting we're looking at for this.
I want the text to remain black the whole time. I'm using a line under each the word to highlight the page selected (not colour change). However, you can see when published, in the 320px & 768px breakpoints the text is changing colour to grey.
Re: Formatting Errors Between Break Points
I assume you are referring to the CSS Menu (instead of Text menu)?
The issue is related to the use of multiple menus, which makes it kind of confusing.
The CSS menu uses the colors that you have specified in the default breakpoint, so that is why the colors are seeing different colors when you publish the page.
To solve this:
- unhide the menu in the default view, change the text color to 'black'
- now you can hide it again.
Note that you can also reuse the same menu in different breakpoints.
The issue is related to the use of multiple menus, which makes it kind of confusing.
The CSS menu uses the colors that you have specified in the default breakpoint, so that is why the colors are seeing different colors when you publish the page.
To solve this:
- unhide the menu in the default view, change the text color to 'black'
- now you can hide it again.
Note that you can also reuse the same menu in different breakpoints.
Re: Formatting Errors Between Break Points
Thanks for the extra info.
Yes I'm referring to the CSS Menu (CSSMenu1, CSSMenu2 etc).
However, I've already set every field to Black (Background, Links, Defaults) for all the CSS Menus. I've used your Unhide/Hide suggestion but it makes no change. When I go publish and go to the breakpoints (320px & 768px) the selected text changes colour to grey.
Yes I'm referring to the CSS Menu (CSSMenu1, CSSMenu2 etc).
However, I've already set every field to Black (Background, Links, Defaults) for all the CSS Menus. I've used your Unhide/Hide suggestion but it makes no change. When I go publish and go to the breakpoints (320px & 768px) the selected text changes colour to grey.
Re: Formatting Errors Between Break Points
I have tried this with your project and it seems to work correct.
Did you republish all files?
Did you republish all files?
Re: Formatting Errors Between Break Points
I've gone through and deleted all the duplicates on each page, and then re-positioned for each breakpoint lay out.
That seems to have sorted the issue. Also the Photo Gallery is publishing correctly in the new version (8.10) now. Thanks.
That seems to have sorted the issue. Also the Photo Gallery is publishing correctly in the new version (8.10) now. Thanks.