Search Results for 'COLUMNS'

[Hannah]

Hannah

#251933

Hey Phil,
If you decrease the number of columns the images will show larger. Would this work for you?

Hannah

[stanley.jackowski]

stanley.jackowski

#251865

This reply has been marked as private.

[Hannah]

Hannah

#251768

Hi Michele,
To only show products from a specific category you can use a shortcode like this: [products limit="18" columns="3" category="unisex"]
Note that you would lose your product filter.
Hope that helps!

Best,
Hannah

[Ben Ritner]

Ben Ritner

#251458

Here is a workaround css, I’m looking into this bug,

@media (max-width: 750px) {
.wp-block-columns {
    flex-direction:unset;
}
}

Add that in your theme options > custom css.

Ben

[Ben Ritner]

Ben Ritner

#251418

I see, update the css to this:

@media screen and (max-width: 576px) {
.woocommerce ul.products {
	grid-template-columns: repeat(2, minmax(0, 1fr) );
	column-gap: 0.5rem;
	grid-row-gap: 0.5rem;
	}
}

That should do it,

Ben

[Ben Ritner]

Ben Ritner

#251406

In your testimonial settings you can define a max-width for the testimonial container. That can increase the gap size if your layout gets wide which in your case it does.

Change the max width setting and you can see them closer together, or put the testimonials in a container that has it’s own max width so the columns are closer together.

Ben

[Ben Andersen]

Ben Andersen

#251309

Hi,

I tried this for getting 2 rows on mobile:

@media screen and (max-width: 576px) {
.woocommerce ul.products {
grid-template-columns: 1fr 1fr;
column-gap: 0.5rem;
grid-row-gap: 0.5rem;
}
}

It works on emulated mobile on desktop but on a real iphone6 device the product image sizes differ!

Thanks!

BenA

[Ben Andersen]

Ben Andersen

#251309

Hi,

I tried this for getting 2 rows on mobile:

@media screen and (max-width: 576px) {
.woocommerce ul.products {
grid-template-columns: 1fr 1fr;
column-gap: 0.5rem;
grid-row-gap: 0.5rem;
}
}

It works on emulated mobile on desktop but on a real iphone6 device the product image sizes differ!

Thanks!

BenA

[galinamf]

galinamf

#251297

This reply has been marked as private.

[galinamf]

galinamf

#251294

Hello!

I have some strange thing happening with image overlay blocks when I use them in columns. The position of next element is not adjusted and elements get merged together. It happens on some pages, but not everywhere (not sure what is the reason).

I will send a message with images and links.

Thank you!

[galinamf]

galinamf

#251294

Hello!

I have some strange thing happening with image overlay blocks when I use them in columns. The position of next element is not adjusted and elements get merged together. It happens on some pages, but not everywhere (not sure what is the reason).

I will send a message with images and links.

Thank you!

[Pamela]

Pamela

#251173

This reply has been marked as private.

[Jeremy]

Jeremy

#250813

Ben,

That does not seem to be working. We are using this shortcode on the page [staff_posts orderby=date link=true items=30 columns=3 height=200 group=board]

Jeremy

[Vu]

Vu

#250774

I have only 1 column in my kadence pricing table, but the shortcode seems to save the space for additional columns (which I don’t have). How do I remove this dead space?

[Vu]

Vu

#250774

I have only 1 column in my kadence pricing table, but the shortcode seems to save the space for additional columns (which I don’t have). How do I remove this dead space?

[Mamy]

Mamy

#250684

Hi

Last Kadence plugin update might have messed up Product Carousel Block with WooCommerce + Storefront theme. This seems to be the same or similar issue that was present in older Kadence plugin versions (that was fixed).

Problem:
– When carousel block has products that are not shown (ie. 3 columns shown, 6 products total), the width calculation seems to fail resulting in too small columns breaking layout on tablet and desktop.
– If the block has only the amount of products shown (ie. 3 columns shown, 3 products total), it calculates width almost correctly but fails to center
– Centering of the product images fails on mobile, desktop and tablet
– Tested on Win10 Chrome and Edge.

We discussed this here, and it was solved then with an update to the plugin (23rd April): *Login to see link

It seems that it reappeared as I updated the plugins to 1.4.8 and 1.8.5. Is this a plugin problem or theme problem?

Seen here (working and not working instances): *Login to see link

[Mamy]

Mamy

#250684

Hi

Last Kadence plugin update might have messed up Product Carousel Block with WooCommerce + Storefront theme. This seems to be the same or similar issue that was present in older Kadence plugin versions (that was fixed).

Problem:
– When carousel block has products that are not shown (ie. 3 columns shown, 6 products total), the width calculation seems to fail resulting in too small columns breaking layout on tablet and desktop.
– If the block has only the amount of products shown (ie. 3 columns shown, 3 products total), it calculates width almost correctly but fails to center
– Centering of the product images fails on mobile, desktop and tablet
– Tested on Win10 Chrome and Edge.

We discussed this here, and it was solved then with an update to the plugin (23rd April): *Login to see link

It seems that it reappeared as I updated the plugins to 1.4.8 and 1.8.5. Is this a plugin problem or theme problem?

Seen here (working and not working instances): *Login to see link

[Ben Ritner]

Ben Ritner

#250648

Hey,
Since you are not using elementor on that page it doesn’t really apply.

I suggest you add a sidebar via the page settings (remove the column and sidebar block you currently have).

That will get your sidebar looking the same. There isn’t a great option in woocommerce right now to get the products to look like an archive while on a page. You can use a shortcode in woocommerce through:

[products limit="20" columns="4" paginate="true"]

Ben

[Hannah]

Hannah

#250604

Hi Joanne,
You’re correct. See this response from Ben from a similar query:

Hey,
It’s just a matter of what needs to come first, we’ve found that most users don’t use a testimonial submission form. Instead, they collect there own testimonials and put them on the page, using a block interface to add instead of another post type makes it really simple for people to add and edit testimonials in a visual interface and because you can make that one reusable block it’s easy to show them multiple places and manage them from one place.

So building first for what most people are looking for gets the priority. However, adding a post query block that can output in testimonial styles is something I have on my list. It’s just not very high.

You can, however, add a carousel or a grid of your testimonials posts using a shortcode so there is a current way to do it just not a block interface yet.

For a carousel see:

[carousel type=”testimonial” columns=”2″ items=”10″]

Ben

Hope that’s helpful!

Best,
Hannah

[Ben Ritner]

Ben Ritner

#250388

The columns number increases as your screen size gets larger, this keeps columns from getting “too” large.

You can force the columns to be 5 for larger screens with css like this:

@media (min-width: 992px) {
.kt-width-large #portfolio_template_wrapper .col-xl-2 {
    width: 20%;
}
}

Ben

[Ben Ritner]

Ben Ritner

#250288

With the Kadence theme it’s a little different than with others:

@media screen and (max-width: 576px) {
.woocommerce ul.products {
    grid-template-columns: 1fr 1fr;
    column-gap: 0.5rem;
    row-gap: 0.5rem;
}
}

Ben

[Hannah]

Hannah

#250218

Hi Ben,
See this post: https://www.kadencewp.com/knowledge-base/two-product-columns-in-mobile/
Hope it’s helpful!

Hannah

[Ben Andersen]

Ben Andersen

#250198

Hey,

How can I have 2 columns in mobile view instead of the default of only one product?

Thanks,

Ben

[Ben Andersen]

Ben Andersen

#250198

Hey,

How can I have 2 columns in mobile view instead of the default of only one product?

Thanks,

Ben

[Hannah]

Hannah

#250195

This css will center align the titles:

#kad-blog-grid h4.entry-title {
    text-align: center;
}

To display your posts by ascending date you would need to use a shortcode like this: [blog_grid orderby=date order=ASC items=6 columns=3]

Hannah