-
This one has me stumped.
I am using a Page Hero Block Element to put a stationary hero image onto my pages. It works fine, except that when the width gets smaller than about 450 px, the header image gets narrow faster than the screen viewport does.
My desktop browser won’t go this narrow, but I see it in DevTools and on my Pixel 6a.
Could you take a look and give me some hints?
Thanks,
Dan -
Hi Dan.
The container with the class of
.pseudo-button-containerhas a fixed width of 400px, that prevents the outer container box to resize on smaller screens. I would suggest using a normal button instead or just remove thewidthandheightvalues and add some padding instead, eg:padding: 10px 20px.Hope that helps.
-
Thank you, George. Replacing the fixed width with padding did the trick.
Dan
-
Amazing, no problem!
-
Correction – your suggestion solved a different problem, but not the one I wrote about, as it turns out. If you go to my homepage and open DevTools, then shrink the viewport width below 433px or so, you’ll see what I mean. The blue-sky background begins to shrink faster than the viewport, showing the blue site background. I’m pretty sure this problem has to do with the page hero block element. Any thoughts?
Dan
-
Hi Dan,
Select the Grid block on the homepage that has the two white columns (gb-element-88f1e7ac).
Then in Mobile view, set Grid Template Columns to 100%.
-
Hi Alvind,
This too is good advice, which I have followed. But it does not solve the original problem. I’ve attached a screenshot that might make the issue clearer than I have been able to do in words.
Thanks,
Dan -
Hi Dan,
Yes, the method I suggested earlier should fix it. However, I don’t see the changes applied on the Grid block. Can you confirm that the adjustments were made on the correct block?
-
That’s odd. In .gb-element-88f1e7ac when I go to the mobile settings and Layout > Grid Layout > Grid Template Columns, I see 100%. I did the same thing with the other Grid block, .gb-element-6d464c74. But the background image still narrows too much when I narrow the screen.
The point where this starts to happen has changed from 433 to about 310, making it less of a problem. But I’d like to get to the bottom of this in case it’s causing other issues.
Thanks for your patience,
Dan -
Hi Dan,
I’ve checked your site again, and it looks like the issue is resolved now. Can you confirm on your end? 🙂
-
No, it’s still happening. The background image starts to shrink now at about 298px viewport width. That’s smaller than most phones, but I would still like to understand why this is happening at all!
Dan
-
Hi Dan,
This is what I see on my iPhone, the background image looks normal:
https://app.screencast.com/83MePTeDKTDiCLet me know if I miss anything!
-
Yes, that’s what I see on my pixel 6a as well, because its screen is wider than 298px. To see the problem now, I have to go to Devtools, Device Mode, and narrow the screen further. The problem* is no longer visible to users, but I’d like to know why it is happening at all.
Thanks,
Dan*Background image shrinks revealing blue page background and compressing the page headline.
-
Hi Dan. It’s the Upcoming events table further down. The text cannot wrap in a responsive way thus creating this issue.
You could use something like this:
@media (max-width: 420px) { #UpcomingEvents .ecs-events .summary { display: inline-table; } }This will fix the table layout for smaller screens.
-
This code seems like a good idea, but it does not fix the issue I am writing about, which I am apparently not describing very well. When I narrow the screen to less than about 300px in DevTools, the content, including the background image, begins to narrow more quickly than the screen does. The result is that I see a bit of blue background at the right.
Since few screens are smaller than 300px, this issue is now academic. I would love to understand why it is happening and whether it might pop up to bite me in the future.
Dan
-
Hi Dan,
Looks like we’ve been addressing a different issue, not the one you actually wanted to fix—sorry about that.
You currently have this CSS in the Customizer:
/* Hero, Page, and Footer * ----------------------------*/ .fixed-hero { position: fixed; left: 0; width: 100vw; height: 100vh; z-index: 0; /* behind other content */ }To fix the issue, replace
width: 100vw;withwidth: 100%;. The problem occurs because the section is rendering at less than full width because the browser is computing 100vw based on a viewport size that doesn’t match the actual visible screen width.
- You must be logged in to reply to this topic.