Change Homepage Mobile Font Size

  • Resolved wheretonewcastle

    (@wheretonewcastle)


    9 years, 1 month ago

    I want to reduce the size of the font on the header slider on mobiles on my website, as with the current size the lines of text overlap each other. Is there a way to do this while maintaining the current font size on tablet and PC formats of the site?

    Looking for CSS to enter into a stylesheet preferably as I am not using a child theme. I am aware that this is ill-advised but have already constructed the site to do everything I want except for this feature!

    Many Thanks

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

  • Hi,

    I was having the same problem, and the following css solved it for me. I’m working with a child theme, but I think it’ll also work if you enter it into your Custom CSS field.

    /* All Mobile Sizes */
    @media only screen and (max-width: 767px) {
    .masonry-layout .hentry {
    width: 100%;
    margin: 0 0 0 30px;
    padding: 0 15px;
    }
    .text-slider-section {
    min-height: 190px;
    }
    .text-slider .maintitle {
    font-size: 40px;
    line-height: 1.1;
    padding-bottom: 20px;
    margin: 0 10px 15px 10px;
    }
    .text-slider .subtitle {
    font-size: 20px;
    line-height: 24px;
    padding: 10px 0;
    margin: 0 10px 15px 10px;
    }
    }

    The important keys you should be mindful of are (1) max-width setting, (2) text slider main title font size, and (3) text slider sub title font size.

    Hope this helps!

    Thread Starter wheretonewcastle

    (@wheretonewcastle)

    Thank you SO MUCH, this was the only bit I couldn’t fix myself and this is perfect, really appreciate it.

    Many Thanks

    803207739ucla

    (@803207739ucla)

    Great, I’m glad it worked!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Change Homepage Mobile Font Size’ is closed to new replies.