Reduce or Eliminate Padding on Altitude Pro MOBILE ONLY

[jeepkid99]

Hello,

The Problem: When viewing site on a mobile device, the first widget area is too far down and it just shows white space. On a desktop and tablet it looks good.
Question: Can I have custom css that eliminates, reduces or assigns it's own "padding-top" for mobile view only?
Additional information: I've fiddled with this forever. Just can't seem to figure it out. I'm using the Altitude Pro theme and have done quiet a bit of customization to it. I have increased the padding on the flexible widget sections.

Thank you in advance for any help!

https://tostenmarketing.com

[Christoph]

Hi,

add
.welcome-text {
padding-top: 0;
}

to the 800px media query

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[jeepkid99]

Hi Christoph!
Thanks for trying to help. I added that, but unfortunately, it didn't change anything. Any other suggestions? I tried

.welcome-text {
padding-top: 0;
}

&

.welcome-text {
padding-top: 0px;
}

[Christoph]

It´s not working because you added desktop styles below the media queries.
It´s a really bad practice to do that because, as in this case, the desktop style will "override" the media queries.

If you want to separate your modifications from the rest of the CSS, write them above the media queries.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[jeepkid99]

That's brilliant. I just cut/pasted my desktop styles and put them above the media queries. Voila! I can't tell you how long I've been doing that! You're the first person to point it out. Really appreciate your help. Sent you a few coffees. 🙂

Thanks again.

[Christoph]

You are welcome.
Thank you for the coffees 🙂

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Author]

Posts