[Resolved] Troubles with Spacing

[Leo]

You’re welcome 🙂

[Sebastián]

Hi! Everything on my website looks great right now except the mobile look of my site.

This is my blog page on mobile: http://i.imgur.com/hpG9X55.png

This is the single post page on mobile: http://i.imgur.com/KUjt9qe.png

I want to center everything for mobiles The title, the featured image, the images in general, the date and author and also the text. Is it possible? Only for mobiles the site on my computer looks amazing and i want to keep it that way.

Thanks

[Leo]

You mean like even out the padding on both side and make the container center?

Try this CSS:

@media (max-width: 768px) {
    .separate-containers .inside-article {
        padding: 30px;
    }
}

[Sebastián]

I think it worked im seeing it different in my customize page but not in my mobile though.

Is it possible to center the title, date and author ONLY on mobile phones? Because the code you sended me leave the same space between both sides but not centered the elements.

And I say this every time I ask for something, just in case. Sorry if my english is bad, im really good at it but its not my native language.

thanks

[Leo]

Padding looks normal to me now. Try clearing mobile browser cache.

Try this additional CSS:

@media (max-width: 768px) {
    .entry-header {
        text-align: center;
    }
}

Your English is very good 🙂

[Sebastián]

It didn’t worked :/

I cleared my mobile cache and my blog page looks like this: http://i.imgur.com/FftpuRm.png

And I want something like this for example: http://i.imgur.com/FvlWKSZ.png

[Leo]

Looks like you didn’t add the CSS here? https://generatepress.com/forums/topic/troubles-with-spacing/page/3/#post-339389

[Sebastián]

I did: http://i.imgur.com/KagvRVM.png

[Leo]

Oops typo. Missed a column. Try again. https://generatepress.com/forums/topic/troubles-with-spacing/page/3/#post-339389

[Sebastián]

Awesome! we’re getting close to my wishes lol, its looking like this: http://i.imgur.com/ugIAxHw.png

Is it possible to reduce the padding between the image and the except text and also to center the read more tag? Something like this: http://i.imgur.com/njlOG0J.png Only on mobile

And i would like dissapear the sidebar from the mobile look. Only on mobile

Thanks!

[Leo]

Something like this:

@media (max-width: 768px) {
    .post-image-aligned-left .post-image {
        margin-bottom: 2px;
    }
    .read-more-container {
        text-align: center;
    }
    .sidebar {
        display: none;
    }
}

[Sebastián]

Simply amazing. Thank you so much!

[Leo]

No problem!

[Author]

Posts