[Support request] Not responsive

Home Forums Support Not responsive

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #552171
    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

    #552174
    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

    #552254
    Tom
    Lead Developer
    Lead Developer

    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.

    #552275
    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.

    #552484
    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

    #552490
    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

    #552505
    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

    #552812
    Tom
    Lead Developer
    Lead Developer

    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 šŸ™‚

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.