Reducing left/right padding on mobile

Hey,
Thanks for reaching out!
1. You can use this css to reduce the content padding on mobile:

@media (max-width: 768px) {
.content-container.site-container {
    padding: 0 10px;
}
}

2. Try adding this to your css:

@media (max-width: 768px) {
.site-top-footer-inner-wrap {
    grid-row-gap: 0;
}
}

Hope that helps!

Best,
Hannah

Hi Hannah,
Thank you for the response. Which css files specifically do I edit to add this content?
And do I add both code snippets to the same css file? Does the order matter?
Sorry, I am new at this.
Thank you,
George

Hi @giorgos236
I’m not on the support team, just a happy Kadence user like you, and I spotted your question.
The easiest way to add CSS is to use the WP Customizer >>
> How to Easily Add Custom CSS to Your WordPress Site
> How to Add Custom CSS
Hope that helps, and good luck !

Hi @giorgos236,
Apologies for not clarifying. Both css snippets can be added to your custom css box in Appearance > Customize > Additional CSS.

Best,
Hannah

Hi Hannah,
It worked like a charm, thank you.
George

Hi Hannah,
Following up on that question for padding and margins, is it possible to define a custom page width? Under the Default Page Layout option, I can choose between Narrow and Normal but what about if I want something inbetween? Can I also add some custom code to the Additional CSS option to make that happen?
Thank you again,
George

Hey,
Yes, if you want something inbetween you would need to use custom CSS. If you specify the widths you’re wanting I would be happy to help with that.

Kindly,
Hannah

Hannah,
Any width would work as I need to test different values to identify the optimal one. Maybe try 1000px?
Thank you,
George

Hey George,
You can use css like this:

.content-width-narrow .content-container.site-container, .content-width-narrow .hero-container.site-container {
    max-width: 1000px;
}

Hope it’s helpful!

Best,
Hannah

Hannah,
Thank you, it worked great!
George

Happy to help!

Best,
Hannah