Mobile vs Desktop

[QuenchStudio]

Hi,

Is there a way to have different margins on mobile and desktop views? We have a box in the sidebar that we have set with certain margins for it to line up with the menu above it, but when looking at it on a tablet, it bumps up against the main copy. If possible, we want to avoid having different rows for mobile and desktop versions because then if the main copy changes, the client will have to go in and change it twice.

Thanks!

[QuenchStudio]

Forgot to mention that we created a css class for the box, so maybe it needs to be altered for it to be more responsive?

.boxed-with-stroke {
border: 3px solid #9bb8d3;
background-color: #f2f1f1;
max-width: 325px;
padding: 20px 5px 20px 5px;
margin: 0 15px 0 0;
float: right;
}

[Melanie – SUPPORT]

Hi,

yeah you can do that by using mobile specific css

http://pugetworks.com/blog/2011/04/css-media-queries-for-targeting-different-mobile-devices/

For example if you’re looking to add css for just the ipad portait mode put it into the following lines

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
PUT YOUR CSS HERE
}

Let me know if that helped!

[QuenchStudio]

This worked thank you!

[Rui Guerreiro – SUPPORT]

Great. Thanks Melanie.
-Rui