[Support request] grid columns on the homepage

[Whelen Troy]

Hi!

I made a homepage using the sections option of the theme. I was able to achieve putting images in 4 columns using the default grid system built in the generatepress. It works fine. But the only problem is that it is not responsive. It looks well on desktop, but on smaller devices, like phone, the image is quite too big. And it doesn’t look nice. Please take a look.

Here’s the link to the project:
http://rosekareen.com/

[Leo]

Hi there,

Can’t seem to get the site to load but you should be able to something like this:
<div class="grid-33 grid-tablet-50 grid-mobile-100">

Jamal’s post here explains some more: https://generatepress.com/forums/topic/another-grid-question/#post-350608

[Whelen Troy]

Hi Leo,

Perfect! Thank you so much! I also read Jamal’s resource. But seems like I’m not getting it right, especially the tablet device.

I don’t know what’s wrong but if I open the site on my laptop, the page looks perfect. But when I tried it on tablet and mobile screens, my slider becomes smaller than the images on my columns.

I don’t know how to exactly explain what I wanted. But if you could help me make my site look better on the tablet and mobile devices? Especially on the “ratio” of my column’s images vs. the slider and the site’s whole content.

The page works: http://rosekareen.com/

[Leo]

I would insert the slider using Page Header add-on instead of inside a section.

Then you can set it to full width etc.

https://docs.generatepress.com/article/page-header-content/

[Whelen Troy]

Very nice Leo!

Now, one last thing… what sizes should I be using in the slider? the ideal which will look better in desktop, tablets and mobile?

[Leo]

The slider should be responsive and looks like it already is on mobile?

[Author]

Posts