Make header responsive on mobile devices

Home Forums Radiate Free Make header responsive on mobile devices

Tagged: ,

This topic contains 7 replies, has 6 voices, and was last updated by  Ashish 2 months ago.

Viewing 8 posts - 1 through 8 (of 8 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
    Keymaster

    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
    Keymaster

    @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.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.