How to create different padding on mobile vs. desktop

Support
#1

Hi awesome support team at Theme X!

Wordpress 4.9.8.
Theme X 6.3.8

How can I create separate padding on mobile vs. desktop layout? And potentially without css :smiley:

Here’s is the page I’m trying to fix: http://formsupreme.com/testimonials/

You can take a look at it how it looks on mobile vs. desktop. On desktop I want it to have a lot of space on each side so the text doesn’t spread out super wide. On mobile this is a problem as the text becomes too narrow if you see what I mean.

Thank you so much. Sticking to Theme X because of this awesome support you guys provide! Thank you☺️

#2

Hey @yousa,

Regretfully, since you’re using Classic Elements, this will need custom CSS. First, please set all your sections’ side paddings to 0. Then, add this code in your Content CSS.

.x-container.max.width {
  max-width:800px;
}

Please see the usage of the code in this screencast: https://youtu.be/j-M6yoZAt2k

For your future content, you might want to use the V2 Elements (no coding). See https://youtu.be/_cL4x7cqoX4

Hope that helps.

#3

Puurrrfect! Thanks a ton Christian! I got another problem now though :pensive: I started changing the classic elements into V2 ones but I noticed that I now need to go in and add html h1, h2 etc. tags to get the headlines work. The menu on the editor doesn’t change the headlines for some reason (it used to have the options for changing the h tag and what you want it to look but after the update these are gone from the inspector).

I tried adding body tags for the body text because it was a different font weight without the tags but with the body tags the text now has a grey background.

Can you help?

#4

You’re welcome. Glad it’s what you need.

Regarding the V2 Headline, I believe you’re referring to font size? Changing the tag won’t change the font size. See https://youtu.be/yDeh7d6alDw

Regarding the body text, the <body></body> should not be used anywhere inside the builder. See https://youtu.be/TCjgLMdOXrg

Please also watch these X and Pro typography related videos:

https://youtu.be/JsYuOo7gcho - Font Manager
https://youtu.be/hJv8KwVIM0I - Font Sizes

You can also checkout our Fonts article at https://theme.co/apex/forum/t/font-manager/101.

We are in the process of improving our Knowledge Base so we might have a concise and comprehensive articles that covers how stuff works in the theme.

Hope that helps.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.