6-columns break directly to 1 column

Hey,
Within out plugins settings, you can define columns for tablets and mobile.

Click on the tablet icon right above where you set how many columns in the row settings and there you can define the tablet layout. Do the same on the mobile tab.

Let me know if that helps!

Ben

Sorry noobe question, I just found the controls to specify mobile and changed the columns from 6 to 2. I also changed the gutter to zero, but it doesn’t seem to change. I have the 6-columns set to wide, so maybe that is overriding the gutter?

Can you post a link to the page so I can see?

Ben

My Dev Site is at https://www.devclosetbay.com/

I’m using storefront theme.

The 1st row of images are using gutenberg columns which I am trying to replace with yours.
The 2nd row is using 6-col wide width for desktop and for mobile I changed it to 2 col and changed the gutter to no gutter. I’d actually prefer a small gap. On mobile I like how the gutenberg columns are, less space between images and therefore the images are a little bit bigger. I would like to dump the gutenberg columns since I prefer yours, I just need to figure out the spacing.

Hey,
I think I see the confusion. You are setting the “vertical gutter” to none. But that isn’t the same as the gutter. The vertical gutter deals with how much space is between the items when they are collapsed for example between rows 1 and 2 on mobile.

There isn’t an option to change the horizontal gutter on mobile. But you make a point there probably should be. I’ll look to add that feature.

Ben

Ok, thanks! Column Gutter I see on Desktop option , where I see it labeled Column Collapse Vertical Gutter when I select mobile. It seems like the column gutter when on Desktop does seem to widen the spacing.

I’ve been trying to identify so I could add to my custom css

I found this:
.kt-mobile-layout-two-grid.kt-gutter-wider > .wp-block-kadence-column {
-ms-flex: 0 0 calc( 50% – 30px);
flex: 0 0 calc( 50% – 30px);
}

But still cannot seem to reduce the space and therefore allow the images to be a little bit bigger. My media screen I am dealing with is 480.

You currently have the gutter set to wider. If you change that in your column gutter option in the row that would allow your images to be larger.

I think I’m getting confused now as to what you want.

On Desktop everything is good, when I change to mobile I have those 6 images breaking 2 by 2
in a 2-column grid and I’m trying to reduce the spacing between those 2 by 2 images

So for desktop I have Column Gutter set to wider 60px and on the mobile setting I was trying to reduce the column setting to 10px or something.

When I am using Chrome Developer tools and view the site(https://www.devclosetbay.com/) for mobile , such as 480. You will see the 1st set of 6 images 2 by 2 which is being displayed using the gutenberg columns, and when you keep scholling down you will see the second set of 6 images where I am using Kadence and you will see there is a bigger space between them. I’m trying to duplicate the spacing like the 1st set has. Here is a screen capture: https://snag.gy/baSi2s.jpg

Yeah so as I said, not an option but something I can add.

If you need custom css to override things use:

@media (max-width: 767px) {
.kt-gutter-wider:not(.kt-mobile-layout-row)>.wp-block-kadence-column {
    margin-right: 10px;
}
.kt-mobile-layout-two-grid.kt-gutter-wider>.wp-block-kadence-column {
    -ms-flex: 0 0 calc( 50% - 5px);
    flex: 0 0 calc( 50% - 5px);
}
}

• This reply was modified 6 years ago by Ben Ritner - Kadence WP. Reason: add media query to css

Thank you very much for your support.