Can't make CSS code work on mobile.

  • meldominguez

    (@meldominguez)


    10 years, 1 month ago

    I am trying to change the line height from 2 to 1 for h1, h2 and h3 for mobile portrait mobile devices. This is the code I am adding to css, but the change is not showing on mobile. What am I missing?

    @media only screen and (max-width: 480px) {
    h1 h2 h3 { font-family: Montserrat; font-size: 24px; color: #186396; line-height: 1; }
    }

    My site: thesweetdigitallife.com
    Thanks.

Viewing 4 replies - 1 through 4 (of 4 total)
  • paulwpxp

    (@paulwp)

    10 years, 1 month ago

    Missing commas probably prevent browser from reading the code

    This

    h1 h2 h3 { font-size: 24px; }

    should be this

    h1, h2, h3 { font-size: 24px; }

    I noticed the site is using caching plugin, so please don’t forget to clear the cache, otherwise even if the code is correct the changes won’t take effect.

    Thread Starter meldominguez

    (@meldominguez)

    10 years, 1 month ago

    Thanks for your reply. I have made the changes and cleared cache and I still don’t see the changes on mobile. I cleared cache on wordpress and on my browser.

    paulwpxp

    (@paulwp)

    10 years, 1 month ago

    Can you please specify the h1 h2 h3 in problem? I mean link me to the page on your site and point me to the h1, h2, h3 that you expected the changes.

    Thread Starter meldominguez

    (@meldominguez)

    10 years, 1 month ago

    For example this post: http://thesweetdigitallife.com/3-social-media-engagement-techniques/

    If you go to the bottom of the page you will see gray box with a red button. The blue title that you see in there is an h2 title. If you check it on your phone you will see that the line-height is too much.

    Check this (this is a picture from pc), but please check it on your phone:
    http://screencast.com/t/KIZprotEPj

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

The topic ‘Can't make CSS code work on mobile.’ is closed to new replies.