Reduce Padding for Mobile Only

Resolved gdaytaiwan
(@gdaytaiwan)

8 years, 11 months ago

Hi there

My website looks great for larger screens but I think there is still too much padding on the top (just after the header) and bottom (before the footer) for the mobile.

Could I please have the CSS to reduce the padding for these areas?

Also I currently use Post Grid for my homepage. On mobile it also has really wide spacing in between the grid images. I have sent a message to Post Grid support, but in case it’s related to the theme also, is there a way for me to reduce the padding on mobile only, in between these images? Not sure if this is a responsive problem as well. You could see how strange it looks on the homepage in portrait mobile view: http://www.gdaytaiwan.com

Any help is greatly appreciated!

Viewing 6 replies - 1 through 6 (of 6 total)

dcoleonline
(@dcoleonline)

8 years, 11 months ago
Hi there,

The gap is coming from the plugin, rather than the theme. The plugin authors may offer a way to reduce it within the plugin settings, but this CSS should work if not:
```
@media screen and (max-width: 1023px) {
    #page #post-grid-9643 .item .layer-media {
        height: inherit;
    }
}
```
Thread Starter gdaytaiwan
(@gdaytaiwan)

8 years, 11 months ago

David you’re amazing! Totally fixed the spacing eyesore in between the grids. Thank you!

As for the padding between the content and header and footer though, is there something for that? (For mobile only again)
Thread Starter gdaytaiwan
(@gdaytaiwan)

8 years, 11 months ago
Also sorry to bother you again, but is there another code I could use to get rid of padding just around the grid? I would like it to be full width to be in line with the slider and the rest of the theme’s default padding.

And is there a reason why the mobile view of the grid is off-centre? Would I be able to fix this only on mobile please?
- This reply was modified 8 years, 11 months ago by gdaytaiwan.
dcoleonline
(@dcoleonline)

8 years, 11 months ago
As for the padding between the content and header and footer though, is there something for that? (For mobile only again)

This should work:
```
@media screen and (max-width: 1023px) {
    .site-header, .site-main > article {
        padding-bottom: 0;
        margin-bottom: 0;
    }
    .site-footer {
        padding-top: 0;
        margin-top: 0;
    }
}
```
is there another code I could use to get rid of padding just around the grid?…is there a reason why the mobile view of the grid is off-centre?

It looks like you’ve done some work on both of these, as they both appear to have been changed/fixed since I last saw the site. Since this content is being displayed by the plugin though, it’s really best to seek help from the plugin’s forum on why it behaves the way it does. The developers there will be in the best position to help you make the most of the plugin they’ve created.
Thread Starter gdaytaiwan
(@gdaytaiwan)

8 years, 11 months ago

Hi David

Fantastic, you fixed all my problems!
I think the guys from Post Grid could take a leaf out of your book. You’re right that I fixed the issue with the grid, only because I went with another plug-in because I never heard back from them!

Thanks again very much. I love this theme, and it has the best support!

dcoleonline
(@dcoleonline)

8 years, 11 months ago

I’m glad I could help!

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Reduce Padding for Mobile Only’ is closed to new replies.

Tags