Page 1 of 1

Formatting Errors Between Break Points

Posted: Tue Dec 08, 2020 10:41 am
by trispembo
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

Re: Formatting Errors Between Break Points

Posted: Tue Dec 08, 2020 12:48 pm
by Pablo
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.

Re: Formatting Errors Between Break Points

Posted: Wed Dec 09, 2020 12:56 am
by trispembo
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.

Re: Formatting Errors Between Break Points

Posted: Wed Dec 09, 2020 7:48 am
by Pablo
Thanks for the detailed information!
I was able to reproduce the problem and it will be fixed in the next update.

Re: Formatting Errors Between Break Points

Posted: Wed Dec 09, 2020 10:42 pm
by trispembo
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.

Re: Formatting Errors Between Break Points

Posted: Thu Dec 10, 2020 7:00 am
by Pablo
Do you also have a demo project for this, so I can see all your settings?

Re: Formatting Errors Between Break Points

Posted: Mon Dec 14, 2020 11:43 pm
by trispembo
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.

Re: Formatting Errors Between Break Points

Posted: Tue Dec 15, 2020 7:11 am
by Pablo
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.

Re: Formatting Errors Between Break Points

Posted: Sun Dec 20, 2020 10:55 am
by trispembo
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.

Re: Formatting Errors Between Break Points

Posted: Sun Dec 20, 2020 6:29 pm
by Pablo
I have tried this with your project and it seems to work correct.
Did you republish all files?

Re: Formatting Errors Between Break Points

Posted: Tue Jan 19, 2021 3:15 am
by trispembo
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.