Masthead Image Not Responsive

  • Unknown's avatar
    andrewgretes · Member ·

    Hi everyone,

    I have a premium account and used the CSS editor to make the header image smaller – 300px instead of 700px. The customization is not responsive on mobile devices; instead, it’s show up as two bands of the same image. Is there a way to make this image responsive?

    I am the site administrator, and I’m not able to upgrade to a business account to download the CSS editor plugin.

    I also have a strange problem with the fonts changing every time I select a menu option or refresh, but I’ll add a separate forum topic for that.

    Thanks so much!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    shubhamgmath · Member ·

    Hi

    you can add max and min width property to the css .
    this will help you out to make that image 100% fit when responsive. 

    //code need to change
      @media only screen and (max-width: 800px)
         .site-header-image {
             min-height: 0px;
       }
    //new code that should be there
@media only screen and (max-width: 800px)
.site-header-image {
    min-height: 0px;
    max-width: 100%;
    min-width: 100%;
}

    Try this one , hope this will work for you .

  • Unknown's avatar
    thesacredpath · Member ·

    Hi @acgretes, It looks like, with @shubhamgmath’s help, you have gotten this solved. If not, feel free to post back here and let me know. I’ll mark this as resolved for now.

  • The topic ‘Masthead Image Not Responsive’ is closed to new replies.