Need help changing post title text for mobile visitors (CSS)

  • Resolved _alexsmith1

    (@_alexsmith1)


    10 years, 1 month ago

    I just recently purchased a new responsive theme. It has a separate section for mobile CSS (that hopefully functions correctly). Right now, the font size of the post titles is enormous (please visit a post from a mobile phone: example post).

    I’d like to know what I can do in regards to CSS to fix this. I’ve done some searching around the forums already, someone said to use this code: 

    /** the post titles **/
h2.posttitle {
font-size: 14px;
}

    but it didn’t do anything.

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

    (@crouchingbruin)

    10 years, 1 month ago

    The selector you want to use is .article .post-title, but you also need to enclose it in a media query. Media queries are what makes themes responsive. You set CSS rules depending upon the width of the screen. For example, these media queries changes the font size to 20px when the viewport is 768px wide (about a tablet width) and 14px when the width of the view port is 480px or narrower:

    /* Tablet: 768px */
@media only screen and (max-width: 768px) {
   .article .post-title {
      font-size: 20px;
   }
}
/* Phone: 480px */
@media only screen and (max-width: 480px) {
   .article .post-title {
      font-size: 14px;
   }
}

    I picked those width values because your theme currently has media queries at those points.

    Thread Starter _alexsmith1

    (@_alexsmith1)

    10 years, 1 month ago

    Wow, thanks a lot. That seems to have done the trick. I appreciate it.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Need help changing post title text for mobile visitors (CSS)’ is closed to new replies.