Text too close to edge on mobile

[twoscotsabroad]

Hi,

Can I set it so the text to the left is not so close to the edgie on mobile?

This is also the case for the menu items when in drop-down mode.

Many thanks,
Gemma

[Prasant]

Hello Gemma,

Thanks for writing in!

Please add following CSS under X > Theme Options > CSS:

@media only screen and (max-width: 600px) {
  p {
    width: 90%;
    margin: 0 auto;
}
}

If you want to learn more about media queries, please take a look at following resource:

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Thanks

[twoscotsabroad]

@Prasant

@media only screen and (max-width: 600px) {
p {
width: 90%;
margin: 0 auto;
}
}

Thank you. Can I have this take action on pages only? It is pushing posts text further in and leaving the H2s and 3s closer to the margin. Ads look too big against text too.

Can I have H2s/3s included for page?

Need it for the Nav Bar drop-down too, code has made no change.

Looks great on pages apart from that.

Many thanks again.

[friech]

Hi @twoscotsabroad,

@twoscotsabroad

Can I have this take action on pages only?

Yes, please update the given CSS code to this:

@media only screen and (max-width: 600px) {
.page p {
		width: 90%;
		margin: 0 auto;
	}
}

@twoscotsabroad

Can I have H2s/3s included for page?

Yes sure, you can utilize the Headline element, that element has a tag option.

@twoscotsabroad

Need it for the Nav Bar drop-down too, code has made no change.

Add this to Theme Options > CSS as well.

@media (max-width: 767px) {
	.x-navbar .x-container.width {
		max-width: 80%;
	}
}

Feel free to adjust the 80% value as you see fit.

Remember to clear all your caching features (plugin, server-side, CDN, and browser’s cache) after this changes

Hope it helps,
Cheers!