Can i edit margins for phone view separately from desktop view?

[laura3]

for some reason there are sections ive created that are split between different content and in order to align the content so it is centered I have to add padding to the columns. It works great for desktop view but the section becomes distorted in the phone view. any advice?

[Prasant]

Hello Laura,

Thanks for writing in!

Can i edit margins for phone view separately from desktop view?

Yes, please do the following:

1. Inspect the section and under Customize > Setup > Class add a class name.
2. After that using media queries you can target the section by adding following CSS under X > Theme Options > CSS:

@media only screen and (max-width: 600px) {
  .change-mobile-spacing .x-column {
    padding: 10px;
  }
}

Please change the class name change-mobile-spacing as per your requirement.

To learn more about media queries and padding, please take a look at following resource.

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

https://www.w3schools.com/css/css_padding.asp

Thanks.

[laura3]

im not sure that i am comfortable enough with coding to make this work, isnt there a way to ensure things are centered evenly on both mobile and web view?

[nabeel]

Hey @laura,

You can follow an alternative solution in the following thread https://theme.co/apex/forum/t/section-height-and-middle-content/63467/4 As you see both solution requires custom CSS so If you’re not comfortable with CSS customization you may wish to consult a developer to assist you with this.

Thanks for understanding.