Make header responsive on mobile devices

Home Forums Radiate Free Make header responsive on mobile devices

Tagged: ,

This topic contains 16 replies, has 8 voices, and was last updated by  Nitu Shrestha 3 months, 2 weeks ago.

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #4040

    hannahnancarrow
    Participant

    Hello,

    I’ve downloaded the new update but my header image still isn’t responsive on smaller screens/mobile devices. Is there a css fix I can use to make my header image responsive?

    Thank you!

    #4874

    Sanjip Shah
    Moderator

    You can have a look here https://themegrill.com/support-forum/topic/header-image-on-mobile/

    #6456

    maxineholder
    Participant

    Love this theme.

    Just a note that the code on the post provided (https://themegrill.com/support-forum/topic/header-image-on-mobile/) has wrong aspect ratios, so the image gets stretched slightly.

    Here is my corrected version.

    @media screen and (max-width: 768px) {
    #masthead {
    margin-bottom: 230px;
    }
    #parallax-bg {
    background-repeat: no-repeat;
    background-size: 768px 230px;
    }
    }
    @media screen and (max-width: 767px) {
    #masthead {
    margin-bottom: 145px !important;
    }
    #parallax-bg {
    background-repeat: no-repeat;
    background-size: 600px 180px;
    }
    @media only screen and (max-width: 400px) {
    #masthead {
    margin-bottom: 110px !important;
    }
    #parallax-bg {
    background-repeat: no-repeat;
    background-size: 400px 120px;
    }
    }

    #6697

    Sanjip Shah
    Moderator

    @maxineholder Thanks for sharing your code. It will certainly help other users.

    #491428

    leedy
    Participant

    Hi there,
    I had the same problems. But the code doesn`t work for me: thetsthe.world
    On the pc it looks great, but already if resizing on the pc a third of the picture will be hided behind the white rectangle with the sites name. On the mobile phone it doesnt work at all: It`s still much too big.
    How can it be fixed?

    #491431

    leedy
    Participant

    sorry it`s: thatsthe.world

    #1375407

    blogcentral1000
    Participant

    Hi there,

    I tried the codes above and the ones mentioned on the previous forum link, but it doesn’t seem to work for my site. The image is cut off on the desktop version and both words and images on the mobile version. I’ve used a header image size 1500×450 and the site is lifeisapatientteacher.com

    Any assistance you can provide is appreciated!

    Thanks!

    #1375486

    Ashish
    Moderator

    Hi @blogcentral1000

    You can add following code inside Appearance > Customize > Additional CSS :

    
    #parallax-bg {
        background-size: contain;
    }
    

    Regards,
    ThemeGrill Support Team.

    #1403617

    rene3
    Participant

    Hi Ashish,

    This is nice! Except I get a large white area below the header image, it seem like the reserved space for the header image.

    Something I can do about that?

    Regards, Rene

    #1403653

    Nitu Shrestha
    Moderator

    @rene3

    Can you clarify on the issue more properly and also provide us the screenshot link for better understanding of the issue?

    Thanks.

    #1403659

    rene3
    Participant

    Hi Nitu, the issue currently arises at https://demegafoon.nl/

    I noticed that one of the previous posters (blogcentral100 – June 13th) also has the issue at lifeisapatientteacher.com

    Thanks for you help!

    #1403931

    Nitu Shrestha
    Moderator

    @rene3

    Can you upload the header image of size 1500 * 450 pixels and check once?

    Thanks.

    #1403944

    rene3
    Participant

    Hi Nitu,

    Thanks for your answer. The header image *is* 1500×450 pixels (it already was according to the theme’s recommendation).

    Regards, Rene

    #1404086

    Nitu Shrestha
    Moderator

    @rene3

    Can you add the following CSS code to Additional CSS box and check?

    #content {
        margin-top: -45px;
    }

    Thanks.

    #1404122

    rene3
    Participant

    Hi Nitu,

    I have changed the CSS to this, but it only takes a the bottom from the header image. You can see it, I have not changed it back yet.

    Should we not use a code that makes the image tight-fit (the header adapting to the image that it contains?)

    Ragards, Rene

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.