Mobile Padding Problems

  • endoxist

    (@endoxist)


    9 years, 8 months ago

    Hello!

    I used some basic CSS to add additional padding around a single blog post:

    .single .blog-entry { padding: 0px 100px 0px 100px!important; }

    The problem is, this padding now carries over to the blog when viewed on Mobile too. I added the following code to alleviate this:

    @media only screen and (max-width: 1200px){ }

    But it is not making any difference. Is there a way that I can flip this code so that the additional padding I added only applies to desktop screen resolutions? Any help on this would be great!!

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

    (@tahoerock)

    9 years, 8 months ago

    Hi endoxist,
    What you have done says:
    Do padding on screen that is up to 1200px wide -max-width: 1200px
    Instead you should say to website parser
    Do padding on the screen which is the most 1200px wide – min-width: 1200px

    I would use less then 1200px like 1020px or 760px
    I do not see your site, you did not left url here.
    But by using @media you can go down scale and use different paddings on different screen sizes.
    Hope I got you in this issue little bit
    Cheers
    TR

    • This reply was modified 9 years, 8 months ago by Tahoerock.
    ThemeSumo

    (@themesumo)

    9 years, 8 months ago

    Please leave a link to your site please so we can offer some help.

    The use of !important should really be avoided when possible.

    Thread Starter endoxist

    (@endoxist)

    9 years, 8 months ago

    Hi guys, thanks for your responses.

    I actually tried this and it worked best:

    @media only screen and (min-device-width: 481px) and (max-device-width: 3000px) {
    .single .blog-entry { padding: 0px 100px 0px 100px!important; }
    }

    @media only screen and (max-width: 480px){
    .single .blog-entry { padding: 0px 0px 0px 0px!important; }
    }

    Url is: monmode.co

    Tahoerock

    (@tahoerock)

    9 years, 7 months ago

    Hi Endoxist,
    Im glad that it worked for you.
    Cheers
    TR

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

The topic ‘Mobile Padding Problems’ is closed to new replies.

Tags