[Support request] Full-width container

[Vera]

Hello,
I had a full-width container on my website for years. I use it to divide various parts of the homepage. It is just a colored block with some text in it. However, as of today, the height changed (without me changing anything), and now the container is just as high as text, and it doesn’t look too good.
I would like to send you the print screen of how it used to look, and how it looks now, but at this moment I don’t have that option.

Thanks in advance for your help.

Kind regards,
vera

[David]

Hi there,

it looks ok to me?
is it on any specific browser ? perhaps the caches need clearing.

[Vera]

I cleared it before contacting you. But I am going to check it again. I’ll let you know.
Thanks, David!

[Vera]

I cleared caches but I got the same problem. It’s happening on Chrome. On Safari seems ok, but I have another problem on Safari with photos not loading within wp show posts (recent articles). I wanted to open a separate tread for that one to see if anybody can help.
Is there a way to send you a print screen?
Thanks!
Vera

[Vera]

Just to update you. After clearing caches on Safari, now I have the same height issues with full-width container for Safari.
This is a css code I am using (and it worked for years until today):
.gb-container.gb-container-a6c488ca, .gb-container.gb-container-28fed5b7 {
margin: 32px calc(50% – 50vw);
max-width: 100vw;
width: 100vw;
}

[David]

This is what i see on desktop:

Note, i zoomed out a little to get both of them into a single shot.

[Vera]

Hi David,
thanks for getting back to me. That seems right, that’s how it’s supposed to look.
However, across all my devices and all my browsers, I see it just as high as the text.
Thanks again for your help!

[Ying]

Hi Vera,

I’m seeing the exact same thing as David.

As you can see in the below screenshot, the CSS you added is active:
https://www.screencast.com/t/nkNW8TRn9T

[Vera]

Thanks, Ying! As much as I am happy that at least to some people it is showing well, it doesn’t show on any of my devices and none of the browsers. I also asked my sister to check, and for her too, the height of the container is not right.
Here is a print screen: https://paste.pics/M9P4I
If you can figure out what’s causing this error and how to fix it, please let me know.
Thanks in advance!

[Leo]

David and Ying are both using Mac and for what it’s worth, everything looks correct to me on my Windows machine as well:
https://www.screencast.com/t/4RmGV0JsoH

[Vera]

Thanks, Leo! I am also using MAC and iPhone. I tried on iPhone 12 Pro, iPhone 8, and MAC. It doesn’t look good, and my sister tried it on iPhone 13 and it also doesn’t look right. Funnily enough, I have a German version of the same page, and I use the same blocks. And the German page looks right. I will leave it, for now, to see if tomorrow things will look better. If not, do you have any idea what CSS code I can add to the one below in order to have the height of the container higher than the height of the content?
Thanks!
.gb-container.gb-container-a6c488ca, .gb-container.gb-container-28fed5b7 {
margin: 32px calc(50% – 50vw);
max-width: 100vw;
width: 100vw;
}

[Vera]

Unfortunately, it doesn’t show right to me and other people. In fact, now it doesn’t even go full-width. It almost seems like it ignores CSS rules. If I go to inspect the page on Chrome, I don’t even see the CSS rules about full width and padding. On the DE version of the HP, I see them. Can this be caused by the cache plugin?
German version:
https://i.paste.pics/M9RGW.png
https://i.paste.pics/M9RHW.png

English version:
https://i.paste.pics/M9RM0.png
https://i.paste.pics/M9RM9.png

[Ying]

It sounds weird.

This is what I see on my iPhone 13, it looks normal:
https://www.screencast.com/t/itOuW8a4

And the paddings are applied to the inner container:
https://www.screencast.com/t/83OmV8b4

It’s impossible for us to help without seeing the issue, unfortunately.

[Vera]

Thank you, Ying! Can you please be so kind to take a screenshot of another blue container a little bit down the page. The one where it is written “Plan your Croatia vacation …..”
Because the screenshot you’ve sent me, while looking better than mine it is also not correct, because it is missing the margines between elements above and below (and it used to have them). Something is defintely messing with the CSS.
It might be a cache plugin, I am having that checked too.
Thanks again for your help!

[Fernando]

Hi Vera,

Here’s a screenshot on an iPhone 13: https://share.getcloudapp.com/JrupwdBN

It seems the padding is there from my end as well.

[Author]

Posts