scaling header image for mobile

  • Hi! I am having some trouble with my header image. It looks great on my computer, but on a mobile device it does not seem to scale and so you only see a little piece of the image. How can I fix this?

    The image also seems to repeat on a wider screen so there are parts of the image on either side. Can I do away with this too?

    Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)

  • this question has been asked multiple times and yet no answers. I am wondering the same as well.

    I’m having this same problem… searching through all the threads and still haven’t seen a solution =S

    Theme Author ThemeGrill

    (@themegrill)

    Hi all,

    About this, the header image has a parallax design meaning it is loaded as background image for the header part via CSS. Thus, it is not responsive and designed that way (usually in parallax design it is like that). If you check our demo here https://demo.themegrill.com/radiate, you will find same.

    However, this question has been asked in our dedicated forum here https://themegrill.com/support-forum/ and our support team have tried to help them. You can view these links and see if it helps.
    https://themegrill.com/support-forum/topic/make-header-responsive-on-mobile-devices/
    https://themegrill.com/support-forum/topic/header-image-on-mobile/

    Also, if you have any other question, you can post them in our dedicated forum.

    So folks don’t have to go to another site to receive the actual solution, I am including it here. I just used it for a client site, and it worked!!! YAY!

    ***************** (don’t copy the asterisks; not part of code)
    @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;
    }
    }

    @adonya
    where do you place that code?
    thanks

    Hi there!

    @ SRuedi: Go to appearance-> customize-> custom css and insert the code.

    @all: it still doesn`t work for my blog: thatsthe.world

    -> when resizing on the PC (smaller) the higher third wont be visible due to the white rectangle with the sites title. On my mobile phone it doesn`t work at all! No resizing, or maybe a very little bit (I can see at least most of the height, but much to wide – all in all no resizing!

    Who can help to fix it? Who is good in coding and solving such problems?

    update: When I click on the “reading more” part and the post opens, I see the picture adjusted (but still NOT on the MAIN SITE! Thats still a desaster). However, the very small picture on the post-site isnt adjusted correctly (too height). But worse is that it won`t be adjusted at all on my starting-site!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘scaling header image for mobile’ is closed to new replies.