Site Title and Header Image won’t Scale to Mobile

  • Hi-
    I’m having trouble with mobile responsiveness and trying to determine:
    1) If it’s because of a change I made to the Stylesheet directly
    When I was first figuring out the little I now know I was trying to change the various font sizes, padding, etc… directly in the Stylesheet. None of these alterations seemed to change anything on the desktop site, and I’ve since deleted and reinstalled the theme (2017). I assume doing this resets the Stylesheet to all the defaults?

    2) How to make the site title, description, and header image scale down on mobile devices. It basically just keeps them all at the same size and completely obscures the screen with the giant white letters piled on top of each other – not ideal. I’ve made lots of “Additional CSS” entries to make the header image and text look right (on Desktop), but removing them seems to have no effect on the mobile responsiveness. I tried a few examples of code like the following, which seem to have no effect:

    @media screen and (max-width: 480px) {
  .wf-active .site-title {
    font-size: 36px;
  }
  .wf-active .site-description {
    font-size: 16px;
  }
}

    Any ideas gladly welcomed.
    Thanks!

    • This topic was modified 6 years, 8 months ago by bcworkz. Reason: code fixed

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

Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    There is an inline style rule that sets site-title class width to a fixed 700px, even for mobile screens. This might be from one of your Additional CSS entries. It’s hard to know where all inline styles come from. You mustn’t have any elements that exceed the available viewport width. When you set a fixed width, there should be a media query for viewports of that width or less that changes the rule to a percentage or vw width.

    I recommend that most width rules be specified as percentages or in terms of viewport width (% or vw) all the time. Fixed pixel widths should be avoided.

    I don’t see where the wf-active class is part of any rules that apply to the title. Try removing it from your selectors.

    @media screen and (max-width: 480px) {
  .site-title {
    font-size: 36px;
  }
  .site-description {
    font-size: 16px;
  }
}

    You may need to flush some caches to see CSS changes, either server side or client side. If you can, turn off any caching while you’re working on site layout.

Viewing 1 replies (of 1 total)
  • The topic ‘Site Title and Header Image won’t Scale to Mobile’ is closed to new replies.