Responsive Header Problems - incorrect screen break

[texaskiwi13]

Hi team,

I have a landing page that has to be live tomorrow. I’m just working on optimising for mobile and I’m having an issue.

I’ve set the break size for the header changes as follows:

XL (1200px and up) - bar 1
L (980-1199px) - bar 1
M (768-969)- bar 2
S (481-767)- bar 2
XS (480l & below) - bar 3

So, in responsive design mode, I’m looking at a screen that is 994px and it is showing me bar 2. At 995px, it flips over to bar 1, which doesn’t display properly on this screen size.

This would be a non issue if the bars were as expected based on the break sizes indicated in PRO, as I can indicate what header should display at what screen break size. Since they are appearing out of line with the indicated sizes in PRO, the headers overlap into two size categories.

What’s the problem and how do I sort it out ASAP?

Thanks,
Ashley

[ruenel]

Hello Ashley,

Thank you for the very detailed post information. To get your issue resolved, kindly edit your custom header and change the height of your bar settings from 4em to auto.

We would love to know if this has worked for you. Thank you.

[texaskiwi13]

Thanks for the quick response Rue! That definitely does NOT work. What should I try next?

I’m experiencing the same problem with my page design as well. I’ve created a new section for L screens (980-1199px) and have adjusted the spacing on my middle “what to expect” section. When I look in responsive design mode at 1196px wide, it looks how I would expect. When I look at it at 995px (still within the Large range), it does not look how I would expect.

I guess my problem is that I’ve designed the responsively in PRO based on what the PRO builder shows the various device sizes. When I then double check everything in Responsive Design Mode, it does not look the way it should based on what is designed and displayed in PRO. 980px-1024px seems to be the problem area that doesn’t show what it should based on the settings in PRO.

I’m supposed to have this live in the morning, so any help would be much appreciated!

thanks,
A

[tristup]

Hi Ashley,

It seems that the Bar 2 is still displayed none at the 995px screen size, but as the container width is not set in Bar 1, it breaks into to row and looks like the Bar 2. What you need to do is to set the max width of two containers in Bar 1 to 50%.

I have tested with a cloned header and a test page, and it works fine. Please find the test page URL in a secure note.

Hope it will work for you.
Thanks

[texaskiwi13]

Thanks for that! That fixed some of the issues, but not all. I’m still having problems between 995-1070pixels.

This is what I would expect to see based on what I’ve designed in PRO for that size screen.

This is what I’m seeing. Note the overflow of text in the header and the overflow of text on this specific section of the page.

Also note that display in XS. It appears fine in PRO, but when I look at iphone5 and/or Surface Duo in responsive design, the bars stack. When I look at Galaxy 5, the text overflows from column 2 into column 1.

Again, I’m supposed to get this live in the next 3 hours. Any help would be much appreciated!!

Ashley

ps. Note that I copied your header and renamed it, not making any changes
pss. I’m playing around with some other changes to the page and have hidden the what to expect section for now. I saved it as a template “TechPulse 2020 15 Sept 11am” which you can apply to your test page if needed

[christian]

Hey Ashley,

We understand the issue but your content won’t fit in the 995-1070 px range so you’ll need to reduce the content sizes or even eliminate some content like you would in the next smaller range.

You’ll see in the builder that your content is already crowded. One screen width reduction and the layout would be off. When in the builder, resize your browser so you can see what will happen to the content within the said range. It would not be accurate because of the control bar in the builder but you’ll have an idea.

If limiting the content is not a solution for you, you need to code your own media query. This is not recommended if you don’t have knowledge of HTML and CSS.

My answer would be the same in your problems on mobile. Please see the following screenshot for instance.

If you like it to display like in the slightly wider screen width, you need to reduce the content sizes. Make the logo and the text small. The text though should be very small that it will not be readable so I’d recommend that you hide the text element in the smallest screensize using the Hide During Breakpoints feature.

Aside from reducing the size of the content and hiding them, you need to learn how to use the Flex Layout option of the elements. You can learn from our article here https://theme.co/docs/use-flex-layout

I hope that you understand regarding the physical limitations of the screen versus the size of your content and also the limitation of our builder that in only covers a range of screen sizes. There’s no fine grained controls yet. For that, you need to code your own custom CSS.

Thanks.

[christian]

I’ll just add that if you wish to reduce the text size depending on screen size, you can follow the setup shown in the following video.

Responsive Text Setup for the Button Element in Cornerstone (Pro Content...