Resizing Header for Mobile VIews

  • Resolved justincallaghan71

    (@justincallaghan71)


    1 year, 10 months ago

    Hi all,

    I have searched the forums but cannot find how to make my header image fit the mobile view of the Mesmerize theme. I would like to know the CSS code so that the image fits into the mobile view. I understand it will probably look small but it will be better than being chopped off etc.

    Any help much appreciated. Thank you.

    The page I need help with: [log in to see the link]

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

  • Hello,

    It seems the image fits on mobile view on your front page.

    Is the issue happening for you on a different page?

    If yes can you specify the exact link?

    Thread Starter justincallaghan71

    (@justincallaghan71)

    Hi,

    Thanks for the reply.

    The image on wide screen has text above the photos, on mobile view this text is chopped off. When I try to change the % top and bottom I still can’t get the image to reduce to fit properly.

    Please compare the view on a large screen v mobile. Thank you.

    Thread Starter justincallaghan71

    (@justincallaghan71)

    Please find full header image that doesn’t fit on the mobile view.

    Thread Starter justincallaghan71

    (@justincallaghan71)

    Closed

    Hello,
    ?
    For your issue, please use this extra CSS code in Customizer -> General Settings -> Additional CSS :

    @media screen and (max-width: 480px){
    .header-homepage.custom-mobile-image {

    background-size: 100% 100% !important;

    min-height:380px !important;
    padding-top:200px!important;
    }
    }

    Thread Starter justincallaghan71

    (@justincallaghan71)

    thats very helpful thanks a lot.

    Thread Starter justincallaghan71

    (@justincallaghan71)

    what would be the CSS code so the image fits on larger screens please? I’ve checked on a wide monitor and it doesn’t fit too well.

    Appreciate your help with this

    Thread Starter justincallaghan71

    (@justincallaghan71)

    this is how it looks on a large monitor. Any help much appreciated.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Resizing Header for Mobile VIews’ is closed to new replies.