Decreasing font size and border margins for mobile content only

inspiredbymaps

Hi there,

How can I decrease font size and border margins for mobile content only? I want to apply to all posts and pages across the entire site.

Example: https://queerintheworld.com/gay-tokyo-japan-travel-guide/

 would prefer no margins or very little and less spacing and font size.. but am happy with desktop display.

Pablo

Hi,

Paste this Custom CSS into Theme Options > Custom CSS & JS

@media (max-width:767px){
  body.single-post #Content{
    font-size:14px !important;
		font-weight:600 !important;
		line-height:20px !important;
	  font-style:italic !important;
  }
}

We cannot remove a margins at all, because it will remove all breaks of text.

Cheers

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

inspiredbymaps

hi, ok ... is it possible to just reduce percentage width of margins?

 And could you show a custom CSS for mobile only that lets me also input Line height / Font weight & style and Letter spacing. Thank

Pablo

I updated the code above.

Now, it have all of above parameters.

To change the margin of paragraphs, you have to copy & paste this code, and add a p at the end:

example: body.single-post #Content p{

margin:value;

}

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next