Text Panel Widths

My site: www.68meridians.com

My problem:

If you look at the front page of my site you will see that the first text panel has a different padding setting than the second. The padding settings vary throughout my site. The majority of the panels have 200px of padding, while others have only 50px. I like the way this looks on my laptop. Unfortunately, it doesn’t work when looking at the site on my mobile. Is there a way to have these different padding settings for viewing on a laptop, but have 0px of padding for a mobile screen?

I currently have the following attributes in my Simple Custom CSS (which you provided a while back).

.so-panel.widget {
padding: 0px 50px;
font-size:120%;
}
@media only screen and (max-width: 991px) {
.so-panel.widget {
padding: 0;
font-size:100%;
}

I am familiar with working with Simple Custom CSS, as well as working with the Class attribute. Please help.

Thanks,
Doug

Hi,

If you click on Edit Row (the place you’ve set your padding from) you’ll notice a Mobile Padding section. Apply it for the rows you need.

Thanks for your reply, Vlad. I just looked at the Mobile Padding section under Edit Row. It looks like that modifies the top and bottom padding. What I was referring to in my question was the side padding. Sorry if I didn’t make that clear previously.

Ah, I see. You just need to change the code you already have a bit:


@media only screen and (max-width: 991px) {
.so-panel.widget, .panel-widget-style {
     padding: 0 !important;
     font-size:100%;
   }
}

Be careful with the } please. In the code you posted you missed the last one, although it is present on your site.

Awesome!!! You’re a genius. That’s exactly what I want.

Thanks a bunch, Vlad.

Doug