title header image size unstable on mobile version

  • Resolved gilbertyvon

    (@gilbertyvon)


    4 years, 10 months ago

    Hello,

    My WP theme is Shoreditch.
    I’m not a developer, I just built my website on my own and don’t know much about codes.

    I’ve added an IMAGE to my title header (instead of the logo that I couldn’t control).
    The image + title look fine on the desktop version and on the mobile version when mobile is horizontal (landscape mode).
    However, when the mobile is VERTICAL the image gets much bigger and ruins the design.
    Any idea of how I could make it stable for both desktop AND mobile through adding or changing codes in custom additional CSS)?
    (I couldn’t find a way to add screenshots to this post…)

    Thank you very much ??

    My website (header on all pages): https://integrative-holistic-therapy.com

    My current CSS (relevant are 5 last lines starting with #masthead):

    .site-header {
    background: #bbbbbb;
    border-bottom: 1px solid #f3f3f3;
    padding-bottom: 1.5em;
    width: 100%;
    }
    .main-navigation a {background-color: #bbbbbb;
    }
    .site-title { font-size: 1.5;
    }
    #masthead .site-branding .site-title {
    background: url(“https://integrative-holistic-therapy.com/en/diplomas/spiral/”) no-repeat scroll left top / contain rgba(0, 0, 0, 0);
    line-height: 60px;
    padding-left: 40px;
    }

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

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

  • Hi –

    Is this what you’re seeing on mobile view? https://d.pr/i/iMZP6P

    With Therapy dropping to a second line?

    A simple solution, if that is the problem, would be to reduce the h4 font size from 20 to 18. 

    h4, .site-title {
    font-size: 18px;
    Thread Starter gilbertyvon

    (@gilbertyvon)

    Hi lizkarkoski,
    Thank you for your help and sorry for the late reply ??
    I have tried what you suggest, but it only reduces the size of the “heading” paragraphs in the page itself (body).
    I know how to reduce the size of the title and of the image (spiral), but although the size of the page/body text automatically reduces on the mobile version, the size of the site title + image seems to remain the same.
    I would need to reduce the title size less than the size of the navigation menu to make it almost acceptable for the mobile version.
    Why the size of the title doesn’t automatically reduce on the mobile version is a mystery. Google tools say that the website is ok and mobile-friendly, though…

    Moderator James Huff

    (@macmanx)

    What device in particular are you viewing it on? We can use that to emulate the right screen size and see what we can do.

    Thread Starter gilbertyvon

    (@gilbertyvon)

    Hi James,
    I managed to kind of fix it in my CSS and it’s ok enough for me, now.
    So many thanks for your help, James and Liz, and I think we can close the thread for now ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘title header image size unstable on mobile version’ is closed to new replies.