[Mirjam]

Hey, I want to build a single page site with different background colors. Therefore I use groups. An outer group with width “full” and an inner group with a self build css-class “test” (because all encapsulated elements stick to full width…):

.test {
max-width: 55rem;
margin-left: auto;
margin-right: auto;
}

Unfortunately – on small screens – the margin of this inner group is A LITTLE BIG bigger than in your general stanard. What can I do?

Thank you very much for your help (I know this is more a general support than a theme question…)
Mirjam

[Mirjam]

PS here is my try out: https://arne-kuehr.de/willkommen-2/

[tikaram]

@mirjam : I checked your site and it looks like you are referring to the padding rather than margin. If you would like to decrease the padding please try adding the following additional css.

p.has-background {
  padding: 0.5rem;
}

Let me know if this helps you out.

Regards,
Tikaram

[Mirjam]

Hey Tikaram, thank you so much for your quick reaction!
It took me some time to test it…

No, I don’t mean the padding (thanks for the hint). I mean: If  I have the page on my phone (e.g.), the pink margin to the orange box is wider than the dark grey margin to the yellow standard box…

How does it work? Thank you!
https://arne-kuehr.de/willkommen-2/

 

[Sakin]

Hi Mirjam,

You can add the following CSS in the “Appearance => Customize => Additional CSS” box:

.has-background.alignfull {
  padding-left: 30px;
  padding-right: 30px;
}

Regards,
Sakin

[Author]

Posts