remove padding on small screen

[miriam]

I am using Parallax Pro.

In home-section-3 I added padding-left:200px and padding-right: 500px. However on small screens it gives just one vertical line of letters. I want to keep padding on traditional screens but remove it from mobile devices so I tried adding .home-section-3 {padding-left: 0; padding-right: 0} to the Media Query section of the style.css file. But it does not work. Any ideas how to go about it? I will appreciate your assistance.

http://zencity.pl

[rfmeier]

Miriam,

Add this to you custom styling;

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

    .home-section-3 {
        padding-left: 0;
        padding-right: 0;
    }
    
}

It will remove your padding with the screen decreases in size.

---

Ryan Meier – Twitter

[miriam]

Thank you Ryan. I have tried this and it does not work for some reason. Is there any other way to do so? Or perhaps I am experiencing a bug within a theme...? 🙁

[rfmeier]

Miriam,

I apologize for the delay in response. I was out of town for the new year. Your custom css is loading after you theme's style.css file. So any changes within your style.css file will be overrode by your custom css changes.

Using Chrome developer tools, I appended the following css and was able to correct the padding on your home section 3 for screens smaller than 1140px;

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

    .home-section-3 {
        display: block;
        padding-left: 0;
		padding-right: 0;
	}
    
}

Make sure your browser cache is cleared when you make these changes as css tends to be cached hard.

---

Ryan Meier – Twitter

[miriam]

No worries! Thank you so much! It has worked brilliantly!

[Author]

Posts