Managing padding on desktop and mobile

[lucio7]

Hi,

I am struggling with the padding on Academy Pro.

Here is a snapshot of a typical post and how it looks on mobile

The padding is unnecessary, I would "full width" on mobile.
I am using "Genesis Design Palette" and the margins are already at 0.

And with the course pages it's the other way around. On desktop it looks way too wide.
It's perfect on mobile, and I would like to add padding only on desktop.

Any idea what code I should input?
When I try with the typical "@ media" I am not very successful.

URL: https://thepowermoves.com/courses/social-power/?tab=tab-overview

https://thepowermoves.com/

[askdesign]

I recommend leaving at least a little bit of padding on smaller devices. Right now, the overall wrap padding for the site is 20px on left and right sides. Leave that code as is, and just add a reduced padding to your media query.

ORIGINAL CODE

.wrap {
    background-color: #fff !important;
    padding: 0 20px;
}

MODIFIED CODE

@media only screen and (max-width: 860px) {
.wrap {
    padding: 0 10px;
}
}

---

Anne S. Katzeff
Designer | Artist | Teacher

[Author]

Posts