header display in mobile and width of content

  • The mobile version of the site is warped on my site.

    The header image isn’t displayed in it’s entirety. I tried to put

    .custom-header {
    background-size: 100% 100% !important;
    }

    but then it squished it too much.

    And the width of the text was all wrong so I used px instead of % which displayed the page better but some of the text is going into the background (blue) instead of staying in the white.

    This is the page in question: https://heavenspeace.com/shra/facilities/arenas/

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

  • Hi there,

    Thanks for writing in,

    If you wish to fix your header image on mobile layout like this: https://prntscr.com/7lkpj9 so you can add following code under Appearance > Theme Options > Custom CSS:

    @media only screen and (max-width: 768px) {
 .custom-header {
   background-size: 100% 68% !important;
   margin-bottom: -96px !important;
 }
}

    Secondly, your website’s html code is written wonky, and most of the styling is done without style sheet. Although, for the first section of your content you can use this CSS to make it look like this: https://prntscr.com/7lkm7z use the following code under your custom CSS:

    .entry-content.article > div {
  width: auto !important;
}

    You need to hire a developer to assist you with the staggering code.

    Thanks.

    Thread Starter heavenspeace

    (@heavenspeace)

    Thanks for help on the logo.

    Is there no other way to adjust the width on the mobile? It scrolls fine, I just need to have the width changed so it doesn’t bleed into the blue background color.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘header display in mobile and width of content’ is closed to new replies.