the reason i would like to do this is the way things stack on a phone, having certain elements with padding or margins severely distorts them on a screen with smaller resolution…

is there a way to make padding and margin css specific only to browsers of certain size, but standard on phones?

Thanks for writing in! Yes there are a few ways. One way is via custom CSS and media queries. This will limit the CSS to specific screen size range, that is specified. Another way is to use the visibility buttons within Cornerstone. You can create separate layouts for mobile and desktop by using these. Then you could just put margins and padding changes on the layout you want.

If you need further assistance, please provide us your URL and itemize what you would like to achieve. If it is within our scope we will be able to tailor our advice.

Hope this helps – thanks!

Thanks for updating the thread! Would you mind telling us where your changes are found specifically? Did you make theme through cornerstone using the inline styles field or the settings on each element or did you use Custom CSS. If you did use custom CSS, you can put them all under a media query with a minimum screen size, so when the screen size goes below a the set width, the style will revert back to original.

Example:

@media (min-width:480px) {
   .custom-css1 {
     margin: ...;
     padding: ...;
   }
}

This would make it so all sizes above 480px will keep your custom CSS, while 480px below will revert back to X standard CSS.

If you edited the areas individually via settings or inline style field, then we will need to know which areas on the page you have them so we can advise you accordingly.

Hope this helps – thanks!

You can add this under Custom > CSS in the Customizer.

@media (max-width: 767px){
    body .no-pm {
        padding:0 !important;
        margin:0 !important;
    }
}

After that, you can add no-pm in the class field of the element you want to remove margin and padding in mobile.

eg.

Column Element – http://screencast.com/t/3a7ATPcOhN3
Content band element – http://screencast.com/t/IHzI4oQVt9Y3

Hope that helps.

http://www.strongeight.com/sports-performance/battle-tested-sports-performance/

down at the section where it says:

PROGRAM DETAILS
TO QUALIFY FOR COMPLETE PERFORMANCE DEVELOPMENT YOU MUST:

the no-pm class isn’t taking effect only in that column, could you look into why this isn’t working? it works perfectly everywhere else.

Please remove the padding from this column.

Hope that helps.

Please remove padding from column. Add another class to this column like my-class and add this CSS.

@media (min-width:979px){
.my-class{
padding: 50px 150px 25px 150px;
}
}

Hope it helps.