How to add margins on mobile only - 7.0

Site URL: https://www.queerterpreter.com/

I never think to check my site on mobile, but I realized the text goes all the way to the edge of the screen and there's no margin at all. It's okay on desktop, but really uncomfortable to read on mobile. How can I fix this?

I'd specifically like to mess with the margins rather than add a border, since my template (Mojave) does  allow a border but it would also go around the header, navigation and (currently) full-bleed images, and I don't want that.

This custom CSS might help you:

.sqs-block-html {
  margin: 10px;
}

The above code will add 10 pixels of margin to your desktop view also, so if you ONLY want it to affect the mobile version, try this instead. (Change 10 pixels if you want more or less.)

@media only screen and (max-width:640px) {
  .sqs-block-html {
    margin: 10px;
  }
}

On 1/3/2021 at 1:20 AM, tazmeah said:

The above code will add 10 pixels of margin to your desktop view also, so if you ONLY want it to affect the mobile version, try this instead. (Change 10 pixels if you want more or less.)

@media only screen and (max-width:640px) {
  .sqs-block-html {
    margin: 10px;
  }
}

 

Thank you @tazmeah

On 1/3/2021 at 3:20 AM, tazmeah said:

The above code will add 10 pixels of margin to your desktop view also, so if you ONLY want it to affect the mobile version, try this instead. (Change 10 pixels if you want more or less.)

@media only screen and (max-width:640px) {
  .sqs-block-html {
    margin: 10px;
  }
}

 

Thank you. This worked for me too. But what if I wanna do the same thing for eg. my headings? As they go all the way out to the mobile phone borders too? @tazmeah

On 11/4/2021 at 6:03 PM, Marzoid said:

Thank you. This worked for me too. But what if I wanna do the same thing for eg. my headings? As they go all the way out to the mobile phone borders too? @tazmeah

With heading, use some code like this

@media screen and (max-width:767px) {
	.html-block {
		h1 {
			margin-left: 20px;
			margin-right: 20px;
 		 }
		h2 {
			margin-left: 30px;
			margin-right: 30px;
 		 }
		h3 {
			margin-left: 40px;
			margin-right: 40px;
 		 }
  }
}