Adding a 5px padding on right side of mobile only?

Hi,
Is it possible to add a 5px padding on the right side of the page when viewed on mobile devices only?
currently, there are a few pages which are displaying to the edge e.g.
*URL REMOVED*
*URL REMOVED*

  • Tom

    Hi Michelle,

    Thanks for the reply, it seems to have had no effect?

    was talking with Tyler about this further in live chat today, he suggested that the affected pages one of which was the login page was due to this:

    the reason it's happening on your login page is because of this code:

    #loginform, #lostpasswordform, #registerform {
    width: 320px !important;
    }

    You have that added somewhere and it's forcing the form to be 320px wide so on screens smaller than that it is going over the edge

    - i couldn't find that anywhere in my simple custom css editor, tried searching in a word document as well nothing??

    As far as i can see it affects these pages
    -*URL REMOVED*
    - *URL REMOVED*

    At the same time there are 3 pages where the text When viewed on mobile devices needs less padding so that there is more text readable per line (on Mobile devices only please) - How they display on desktop devices is good how it is now.

    *URL REMOVED*
    *URL REMOVED*

    thanks

    Tom

  • Tom

    Just updating the ticket

    First part is still an issue with the padding , while padding was added everywhere it did not affect the parts which i wanted it to affect. - also its affecting the desktop site as well as mobile one. is it possible to restrict the padding of the 5px only to mobile devices? also all these forums are the main issue, and buttons which are extended beyond the size of smaller screens. is it possible to either push them over multiple lines or shrink them to fit the size of smaller mobile screens? (mobile devices only)

    Part referring to 3 pages is now resolved. (About frances / spinaddkits story / classes)

    Screenshot 1 - http://postimg.org/image/jmrmsapzx/

    Thanks

    Tom

  • Bojan Radonic

    Hey there @Tom,

    We really need more information on what you're trying to do. I can understand your frustration with the CSS not working but with these specific issues but in order to get everything to work lets do this one step at the time.

    With that being said the code Michelle provided should work only on resolutions up to 780px. The code will also affect all pages, if you're looking not to use this on your home page on smaller resolutions please make sure to add this below the one provided:

    @media screen and (max-width: 780px) {
    .home #content.site-content {
    padding-right: 0;
    }
    }

    This will remove padding on smaller resolutions only on home page. As for the login issue please try adding the following to your custom CSS:

    #login {
      width: 350px !important;
    }

    Reduce the value to what ever suits you the most and the width should be reduced.

    Additionally when adding custom CSS to your custom CSS file please make sure to add the code to the bottom of the file instead of top and also for future CSS requests please include page link where we can see the issues.

    Best regards,
    Bojan

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.