Formatting Errors Between Break Points

Issues related to previewing and publishing your web site.
Post Reply
trispembo
Posts: 6
Joined: Tue Dec 08, 2020 2:57 am

Formatting Errors Between Break Points

Post 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
User avatar
Pablo
Site Admin
Posts: 3406
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

Re: Formatting Errors Between Break Points

Post 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.
trispembo
Posts: 6
Joined: Tue Dec 08, 2020 2:57 am

Re: Formatting Errors Between Break Points

Post 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.
User avatar
Pablo
Site Admin
Posts: 3406
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

Re: Formatting Errors Between Break Points

Post by Pablo »

Thanks for the detailed information!
I was able to reproduce the problem and it will be fixed in the next update.
trispembo
Posts: 6
Joined: Tue Dec 08, 2020 2:57 am

Re: Formatting Errors Between Break Points

Post 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.
User avatar
Pablo
Site Admin
Posts: 3406
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

Re: Formatting Errors Between Break Points

Post by Pablo »

Do you also have a demo project for this, so I can see all your settings?
trispembo
Posts: 6
Joined: Tue Dec 08, 2020 2:57 am

Re: Formatting Errors Between Break Points

Post 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.
User avatar
Pablo
Site Admin
Posts: 3406
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

Re: Formatting Errors Between Break Points

Post 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.
trispembo
Posts: 6
Joined: Tue Dec 08, 2020 2:57 am

Re: Formatting Errors Between Break Points

Post 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.
User avatar
Pablo
Site Admin
Posts: 3406
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

Re: Formatting Errors Between Break Points

Post by Pablo »

I have tried this with your project and it seems to work correct.
Did you republish all files?
trispembo
Posts: 6
Joined: Tue Dec 08, 2020 2:57 am

Re: Formatting Errors Between Break Points

Post 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.
Post Reply