Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Hello, I would like to reduce margins of articles text, but only on mobile devices, so that the article on mobile almost takes full width of the device. Specifically, a margin-left: -20px; margin-right: -20px; would do, but how do i add that code to mobile devices only?
Hi n3d1117
Shooting from the hip here but most likely something like this:
@media (max-width: 680px) { .single #main { padding-right: 5px; padding-left: 5px; }Add the above to Appearance > Custom CSS and edit as required.
Thank you! It worked straight away. How do I extend that to blog page too?
Super, glad that helped.
Including blog and archive should look something like this:
@media (max-width: 680px) { .blog #main, .archive #main, .single #main { padding-right: 5px; padding-left: 5px; }Thanks! That worked too. Last question: how to extend that to every single page in the site? (While keeping meta slider in home page full width)
For that you can just say:
@media (max-width: 680px) { #main { padding-right: 5px; padding-left: 5px; }Meta Slider comes before #main.
Much love for you Andrew <3
Super, glad that helped :)