@media to turn off row column container + add padding?

[mhkatz]

I’m having some trouble figuring our a way to accomplish the following and was hoping for some assistance.

I currently have a desktop section I’ve named ‘Title Section Question’ and this has the row column container ON.

At a breakpoint of 767px or lower I’d like to turn the row column container OFF and be able to control the left and right section row padding (20px left and right)

The reasoning for this the padding is to much for the visual when the site goes mobile when I leave the row column container on.

Any ideas on how to pull this off with some customers CSS?

[christian]

Hey @mhkatz,

Here’s a sample media query code to be added in the Row’s Element CSS that will alter the max-width and width of the container. You will need to use the width instead of side paddings.

@media (max-width:767px) {
  $el.x-container.max {
    max-width: none;
    width:90%;
  }
}

If you want to apply this to all rows in your page, put the CSS in Content CSS and remove $el. What is important to note here is the selector of the Row with Inner Container which is .x-container.max. The rest of the code would be the user’s responsibility to code and fix in case of issues.

Hope that helps.

[mhkatz]

Thank you Christian that put me on the right track!

[Prasant]

You are most welcome.