[Support request] Not responsive

[Mark]

I have a site at http://fourway.michianait.net. I using page headers to create the header on the home page. The text looks fine on a desktop, but on a mobile phone the text does not seem to be responsive. Instead of staying centered like it does on a desktop, it is pushed off to the side.

Is there something I am missing in order to make the page responsive on an iPhone?

Thanks,

Mark

[Mark]

Also, the image does not seem to be responsive – on the mobile, you can only see part of the image – instead of just having the image resize so it fits in the mobile viewpoint.

Mark

[Tom]

That’s happening because you have 250px of padding on the left and right.

You can change it to a percentage, or you can add this CSS:

@media (max-width: 768px) {
    .page-header-content-container {
        padding-left: 50px;
        padding-right: 50px;
    }
}

Background images aren’t responsive by nature if they’re set to cover the entire area. This is due to the aspect ratio of the image vs. the screen.

We could force more of the image to show, but it would result in a gap at the bottom of the page header, as the height would reduce as the width was reduced.

Let me know if that makes sense or not.

[Mark]

Thanks Tom,

I will give it a try, but what I’m not sure about is the padding. 250 pixels is what percentage of what? I assume it should be a percentage of the width of the image, but I’m not sure.

Mark.

[Mark]

Tom,

I tried putting 13% padding in (250/1950) for both top and bottom, and left and right.

But what happens on the phone is that the text (Wireless Broadband Internet Service) overlaps the logo and hamburger menu, as you can see if you look at Fourway.michianait.net on a phone.

Also, is there some setting to reduce the size of the (Wireless Broadband Internet Service) font when viewing on mobile?

Thanks,

Mark

[Mark]

Tom, never mind about the first question – text overlapping logo and menu – I put the top/bottom padding back to 250px instead of 13%, and it seems to look OK,

Just the remaining question about the font size on mobile – I know you can do it with @media queries but I was wondering if there is a setting that would take care of it.

Mark

[Mark]

Tom, one more thing – just so I don’t totally confuse you –
I changed the text on the homepage to “WE Reach Where Others Can NOT” (no longer “Wireless Broadband Internet Service).

Mark

[Tom]

The URL to your site doesn’t seem to be working anymore – can you check?

We’ll need to use media queries for now. Hoping to add more mobile options to the Page Header soon 🙂

[Author]

Posts