Responsive design

Illdy
1

I was wondering on the mobile side of this theme there is a big space of padding under the logo that carries over to the mobile layout. How can I tag in css a different padding limit when it is on smaller browsers?

It’s on the bottom header and gives a top padding of 240px. I want to take that to like 20px on mobile I just don’t know how stylesheets are set up for this.

Thank you!

2

Hello,

The CSS that handles the padding is this:

#header .bottom-header {
    padding-top: 240px;
    padding-bottom: 280px;
}

You need to use some media queries on order for it to work only on mobiles:

@media (max-width: 480px) {
    #header .bottom-header {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

Let me know if you got it right

Regards

3

Exactly what I was looking for! Thank you so much!

Andy