WordPress.org

Forums

Radiate
scaling header image for mobile (8 posts)

  1. kp12345
    Member
    Posted 1 year ago #

    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!

  2. lauralsweet
    Member
    Posted 1 year ago #

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

  3. mandyljess
    Member
    Posted 12 months ago #

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

  4. ThemeGrill
    Member
    Theme Author

    Posted 11 months ago #

    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 http://demo.themegrill.com/radiate, you will find same.

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

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

  5. adonya
    Member
    Posted 7 months ago #

    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;
    }
    }

  6. SRuedi
    Member
    Posted 6 months ago #

    @adonya
    where do you place that code?
    thanks

  7. Cuccagna
    Member
    Posted 6 months ago #

    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?

  8. Cuccagna
    Member
    Posted 6 months ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic