[Resolved] Left Margin of Left Column in Archives Not Aligned in Tablet

[Suggie]

Hi guys.

My archive and search results layouts all look great now (thanks for your help, Leo!), but I’ve noticed that in tablet only (using an old iPad mini) the two-column layout is getting pushed to the left by about 10-15px so it’s cutting off some space. All other margins look fine. It’s as if there’s a negative left margin set somewhere that I can’t find. Desktop and mobile look fine and are not having this issue.

You can see an example at: https://adventuresofthegassysquirrel.com/category/eat

Thanks!

GP Premium 1.5.6

[Leo]

Hi there,

Hmm can’t seem to see the problem from browser resizing.

Can you provide a screenshots for what you are seeing? You can upload it to a site like this: https://postimages.org/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Suggie]

Hi Leo.

You can find here: https://postimg.org/image/8so7rld8p/

Thanks!

[Tom]

Hmm I can’t get this to happen either.

Does it happen on every category page, or just that one?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Suggie]

It happens on all archive pages and search results. Thanks!

[Tom]

What browser on your iPad? Can you try a couple different ones?

I’m trying to get it to happen on my end, but I’m not having any luck.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Suggie]

Hmm….happening in both Chrome and Safari. Pages and posts on my site and other websites all look fine, so I don’t think it’s the tablet itself. So strange.

It’s only the section where the actual posts are listed that is affected. If I scroll down below to the sidebar area, it’s spaced properly.

Is there some CSS I can add in for left margin for tablet size? I’ll try pushing it in 10 or 15px. I don’t mind if this pushes other tablet views with a bit of extra spacing on the left (as long as it doesn’t change the 2-column format).

Thanks!

[Tom]

You could try this:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
    .generate-columns-container  {
        margin-left: 10px;
    }
}

If that media query doesn’t work, you can find more here: http://stephen.io/mediaqueries/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Suggie]

Thanks, Tom! That works for me.

[Tom]

Awesome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts