This topic is: not resolved

This topic contains 3 replies, has 2 voices, and was last updated by  vako 1 month ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #38598

    Rachel Smith
    Participant
    Premium Member

    Hi!

    I’m having trouble getting my header image to look correct on mobile devices. It looks great on desktop mode, but it is much too large on mobile. I’ve read through many threads in the forum and tried adding the below code to the Additional CSS and it did not fix the issue. Any help would be greatly appreciated!

    <span style=”color: #4f4f4f; font-family: Inconsolata, Consolas, Monaco, ‘Lucida Console’, monospace; font-size: 14px; white-space: pre;”>@media screen and (max-width: 880px){ .header-logo a { font-size: 70px !important; line-height: 40px; } } @media screen and (max-width: 649px){ .header-logo a { font-size: 47px !important; line-height: 35px; } } @media screen and (max-width: 440px){ .header-logo a { font-size: 37px !important; } }</span>

    #38614

    vako
    Keymaster
    WP Royal Team

    Hi Rachel,

     

    Please share your website URL and we will check for the possible solutions.

     

    Kind Regards

    #38616

    Rachel Smith
    Participant
    Premium Member
    This reply has been marked as private.
    #38630

    vako
    Keymaster
    WP Royal Team

    Hi Rachel,

     

    Please navigate to Dashboard > Appearance > Customize > Aditional CSS and following snippet:

     

    @media screen and (max-width: 1080px) {
    
    .entry-header {
    
    height: 150px !important;
    
    }
    
    }
    
    @media screen and (max-width: 538px) {
    
    .entry-header {
    
    height: 100px !important;
    
    }
    
    }

     

    Kind Regards

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

You must be logged in to reply to this topic.