Lost in CSS and inspector basic mobile body

[gabemott]

I’m just trying to create separate rules for desktop and mobile in my css.

Using V2 text elements, I set the padding as 6em for left and right.

On this page: http://pbc1.gabemott.com/
But I am going to be setting that for all the body text (6em padding left and right)
And on mobile I want to set it to something like 1 em or 10px or something.
BUT
I can’t figure out the basic CSS using the inspector to isolate the padding!

For example, in the inspector, the padding above shows up here:

.el21.x-text {
padding: 0em 6em 0em 6em;
}

BUT
If I go to the customizer and just test to see if I can isolate this and change it with CSS before I even try to go mobile, what do I use?
BASICALLY I am confused by the “el21” as I don’t want it just for this section.
I tried to add:
.x-text {
padding: 0em 6em 0em 6em;
}
to global CSS and then change the values to see if it was working, and got nothing to happen.

What do I do?

Bonus question:
Why is all this mobile CSS over ridden? And where are those settings? Just asking because I can’t find a best practices for mobile with Theme X and can’t tell if I am supposed to be customizing this somehow else.

[ruenel]

Hello There,

Thanks for posting in! The mobile css you are referring to is not related to your text element. You were adjusting the padding and that the default css you refer is the font size.

The padding will always be applied in all browser screens. Instead of adding a padding, please set maximum width and auto margin left and right.

Screenshot

Hope this helps.

[gabemott]

Not sure why I am doing this. I want desktop to have 6em indent. Setting to maring to “Auto” on L and R as you suggest-- and on Desktop it’s flush left and right! Not what I want.

It sounds like you are proposing an entirely different way of doing this-- by setting a max width?

Not the direction I am looking for.
Are you saying this is the best way to achieve what I want? If so Why?

AND, my question is what is the CSS going to be when I want to make it different on mobile?

[christopher]

Hi there.

If you want to have the section of the code work only for mobile you should use the Media Queries.

For example, you can select the Customize tab in your Text Element and add a Class for example mobilepadding. Then add the CS code below to X > Launch > Options > CSS:

@media (max-width: 648px) {
.mobilepadding {padding: 0 30px !important;}
}

The code above is not what you should copy/paste. I just wanted to give you an idea how it works. The media query says to restrict the code to devices with the browser width less than 648px and the code itself tells that make the padding 30px for an element that has the mobilepadding class.

Another alternative is to use the Hide on the breacpoint option to hide the current element on mobile and have a copy of the same element show only on mobile but with the different padding. For more information:

Hide During Breakpoint - Explained

Thank you.