- This topic has 7 replies, 2 voices, and was last updated 4 years, 2 months ago by
.
Hello,
I am trying to increase the standard padding on mobile, for better readability, using Elementor/Jevelin.
Tried this in custom css, to no avail:
@media (min-width: 768px) {
.sh-section {
padding: 0 15px 0 15px
}The page is https://kindtclinics.com/home2
Any tips?
Maartje
Hi Maartje,
I hope you are well today and thank you for your question.
I am not sure exactly what you mean by “standard padding” so could you please describe it a bit more by sharing the screenshot?
Best regards,
Shufflehound teamHi, of course, see the attached screenshot of my mobile.
What I mean that I would like more padding on the left and right side of the screen, so before the text starts (/after it ends).
Does this clarify it a bit?
Many thanks,
Maartje
It seems you are using an older version of the theme on your website so please update it to the below latest version as described here https://support.shufflehound.com/updating-theme/
You can try adding the padding using the Yellow Pencil editor in the responsive mode as described in the below page.
https://support.shufflehound.com/how-to-change-almost-any-element/
Hi, thanks so much for your help so far! I tried it with Yellow Pencil, which I have worked with before, but in this case it does not get me where I want to be, unfortunately.
What happens is that, even if I apply the styling to ‘global’, only the padding of a certain element (i.e. section) on a certain page changes. Probably because each element has a unique name, as I am using Elementor as a page builder.
If I apply the padding changes to the highest levels, like body or content, it does apply to the whole website, but then the page-wide sections with colored backgrounds get white space on the sides, instead of just the text indenting a bit.
Is there any code that would, see image, increase white space on the left before button starts in area 1, and similarly increase grey space in area 2 (or leave that untouched, but not adding white space to the sides of a grey section)?
Many thanks!
Space is displayed by the padding added to the elementor column as shown in the attached screenshot so please change it.
Ok got it. And then my last question: is there any code that would change the column padding for the entire website, instead of doing it per individual column?
And then my last question: is there any code that would change the column padding for the entire website, instead of doing it per individual column?
You can achieve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
@media (max-width: 767px){ #content .elementor-column-wrap { padding: 10px; } }
