[cvanceiacParticipant]

Hello X team,

I’ve added 100px of padding on the right and left of a row. Is there a way I can revert back to 0px padding on mobile devices for this row? The text is basically one word per line.

I’d like to do this throughout my site so that the larger blocks of text can be easier to read on desktop screens, as right now they stretch across the screen.

I’ll include site info in a follow up comment.

[cvanceiacParticipant]

This reply has been marked as private.

[FriechModerator]

Hi There,

Thanks for writing in, but the page password you provide above is incorrect, please confirm.

Cheers!

[cvanceiacParticipant]

This reply has been marked as private.

[suzannereidParticipant]

I’d like to do the same! dc3.armorlight.biz

[JoaoModerator]

@cvanceiac

Please try adding this code at your Appearence / Customizer / Custom / CSS

@media only screen and (max-device-width: 480px) {

	
.post-1650 .x-container.max.width {

padding: 0px 0px; 
} }

Hope that helps,

Joao

[JoaoModerator]

Hi Suzanne

Please try adding this code at your Appearence / Customizer / Custom / CSS

@media only screen and (max-device-width: 480px) {

	
.page-id-365 .x-container.max.width {

padding: 0px 0px; 
} }

Hope that helps,

Joao

[cvanceiacParticipant]

Unfortunately adding the CSS didn’t change anything on my end.

When I used the inspect tool via Google Chrome I noticed element.style held the left and right padding. Would we need to utilize that part in the CSS somewhere?

Thanks.

[JoaoModerator]

Hi There,

Upon checking your website I can see any padding on the page above mentioned.

See image attached.

The CSS above provided should be applied on Appeareance / Customizer / Custom / CSS

If you didn´t apply yet, dont bother about applying because it looks really good the way it does now( in my opinion).

Please let us know if you need further help

Thanks,

Joao

[cvanceiacParticipant]

Joao,

I appreciate the comment but I removed the padding on that page because it wasn’t readable on a mobile device.

I did apply the CSS and it didn’t work.

Right now there is no padding and on larger screens the text runs almost the full width of the screen making it not as easy on the eyes when jumping from line to line while reading.

If possible I’d like to add 100px of padding both left and right but then have that padding not be recognized when the screen shrinks to mobile view.

Also may I request you remove the link that you’ve placed of my site? I don’t want that link to be indexed or visible publicly even though I have a password set up on the site.

[FriechModerator]

Hi There,

Do you mean you want the content container to narrow down a little bit? But only on desktop and keep it (almost) full-width on mobile? If so, you can add this under Custom > CSS in the Customizer.

@media (min-width:  980px) {
	.x-main .x-container {
		max-width: 1070px;
	}
}

Reduce the 1070px value where you see it fits.

Hope it helps, Cheers!

[cvanceiacParticipant]

Yes, this works somewhat.

Is there a way I can have more control over it? Basically there are certain blocks of text where I want the width to be constrained.

Your solution above applies that width reduction to every aspect of the website.

For example could I have it to where <p> are given some sort of max-width limitation?

Thanks for the help.

[RupokMember]

Hi there,

Thanks for updating. You can use your own class for the section using Class field and specify styles. If you want to set max-width for paragraph then add custom class to the text element box that contains the paragraph and set max-width same as above example.

Hope this makes sense.

Cheers!

[Author]

Posts