Search Results for 'COLUMNS'

[olikana.france]

olikana.france

#285929

Hi everybody.
Thanks for your help.

I need to use the block product choose mannually whom is very nice but I have a problem. I only need one column, and in destktop is fine but on mobile is showing 2 columns, one empty.
Please could you help me to find the solution.

Thanks a lot.

[olikana.france]

olikana.france

#285929

Hi everybody.
Thanks for your help.

I need to use the block product choose mannually whom is very nice but I have a problem. I only need one column, and in destktop is fine but on mobile is showing 2 columns, one empty.
Please could you help me to find the solution.

Thanks a lot.

[Karla]

Karla

#285860

Hi, Irina!

I’m sorry for the delay in getting back to you.

Could you try editing the custom CSS code to this:

@media screen and (max-width: 768px) {
    .wp-site-blocks .wc-block-grid .wc-block-grid__products {
        grid-template-columns: 1fr 1fr!important;
        column-gap: 0.5rem;
    }
}

If you have any cache plugin, please clear it after saving your changes.

Let us know if this works for you.

Regards,
Karla

[demirstringart]

demirstringart

#285802

Hi everyone! I again have a problem displaying blocks of Woocommerce products, such as “All Products” or “Best sellersproducts”
Indeed, as for the example page that I linked, I cannot display the products in two columns when it is consulted from a mobile.

I already asked the question 8 months ago, and an answer worked :

@media (max-width: 768px) {
.wc-block-grid .wc-block-grid__products:not(.thisisforspecificity) .wc-block-grid__product, .wc-block-carousel .wc-block-grid__product {
max-width: 50%;
}
.wc-block-grid.has-4-columns .wc-block-grid__products {
display:flex;
}
.wc-block-grid.has-4-columns .wc-block-grid__product {
flex: 1 0 50%;
min-width: 40%;
padding: 0;
margin: 0 0 24px;
}
}

But for a few days (I don’t know when it started), it hasn’t worked anymore. I once again have only one product displayed on the left part of the screen, and nothing on the right part. I did some tests, and this problem only appears when the screen is 480 pixels or less. Beyond that, two products are displayed correctly. Except that most smartphones are 480 pixels……

I specify that I have not changed anything on my site, I have not added any plugins, touched the customizer etc… I just updated WordPress. Can you help me ?

Thanks for your help !

Irina

[demirstringart]

demirstringart

#285802

Hi everyone! I again have a problem displaying blocks of Woocommerce products, such as “All Products” or “Best sellersproducts”
Indeed, as for the example page that I linked, I cannot display the products in two columns when it is consulted from a mobile.

I already asked the question 8 months ago, and an answer worked :

@media (max-width: 768px) {
.wc-block-grid .wc-block-grid__products:not(.thisisforspecificity) .wc-block-grid__product, .wc-block-carousel .wc-block-grid__product {
max-width: 50%;
}
.wc-block-grid.has-4-columns .wc-block-grid__products {
display:flex;
}
.wc-block-grid.has-4-columns .wc-block-grid__product {
flex: 1 0 50%;
min-width: 40%;
padding: 0;
margin: 0 0 24px;
}
}

But for a few days (I don’t know when it started), it hasn’t worked anymore. I once again have only one product displayed on the left part of the screen, and nothing on the right part. I did some tests, and this problem only appears when the screen is 480 pixels or less. Beyond that, two products are displayed correctly. Except that most smartphones are 480 pixels……

I specify that I have not changed anything on my site, I have not added any plugins, touched the customizer etc… I just updated WordPress. Can you help me ?

Thanks for your help !

Irina

[Karla]

Karla

#285699

Hi, all!

By default, the Info Box block wasn’t created to check on the blocks beside it and have equal heights.

However, a workaround that you can do so you don’t have to add CSS codes is using the Row Layout block with multiple columns. Other steps will be:

• Make the inner column heights of the Row Layout block 100%
• Add the background colors and borders to the inner Section blocks

Watch this screen recording – https://share.zight.com/bLuymgrY.

I hope this helps, and let us know if we can help further.

Regards,
Karla

[asterdaster]

asterdaster

#285640

After working on this some more, I realize that I need to rework my question.

In this example, there are 5 rows of content. On desktop and tablet, the rows alternate with text on the left and image on the right followed by image on the left and text on the right. On mobile there is only 1 column with alternating rows having a light blue background.

Initially I built this using individual row layouts (see attached image) for each row of two columns. I gave alternating backgrounds on mobile and changed the collapse order to reverse for every second row.

On reflection, this didn’t seem like the best way to build this as I don’t get the look I want on mobile and it is inefficient on desktop and tablet and mobile. I’m using a row layout for every row instead of just adding sections to my 1 row layout of two columns on desktop and mobile and I have two sections for each row on mobile when I only need 1.

I rebuilt the desktop and table using 2 columns and sections and that works fine. On mobile it doesn’t work (I can’t reverse collapse order of sections). So I changed visibility of the row layout to only be seen on desktop and tablet. I then made 5 row layouts of 1 column for mobile and hid this on desktop and tablet. This allows me to easily center my image between the headline and text.

My questions are as follows:
1. Is this the correct approach or should I be doing this differently?
2. If row layouts are not visible on say desktop and tablet, do they still get loaded on mobile (ie: will my site load slower)?
3. I tried making the mobile version out of 1 row with 1 column and with sections for each (headline, image, body copy), but I’m not sure how to make the background extend to the full width of the phone screen. Hence I used the row layout. Is there any advantage of using sections as opposed to row layouts in this scenario besides having only 1 row layout in my list view?

Thanks,
Gary

[asterdaster]

asterdaster

#285384

Hi,

I’m redesigning a layout and using sections instead of columns so that my section will center when wrapping.
If I was using 3 columns in my row layout, I can use the inner height 100% option under the structure settings. If I’m just using sections within a row layout of one column, how can I get the same effect for my three sections?

I did look through the forums and found this nice solution for info boxes. Is there a similar solution for sections?
*Login to see link

Gary

[asterdaster]

asterdaster

#285384

Hi,

I’m redesigning a layout and using sections instead of columns so that my section will center when wrapping.
If I was using 3 columns in my row layout, I can use the inner height 100% option under the structure settings. If I’m just using sections within a row layout of one column, how can I get the same effect for my three sections?

I did look through the forums and found this nice solution for info boxes. Is there a similar solution for sections?
*Login to see link

Gary

[Maureen]

Maureen

#285159

This reply has been marked as private.

[Karla]

Karla

#285063

Hi, Roland!

Is the Full Width align option not showing for other blocks like Columns too? If it’s not, do you recall adding a code snippet to remove theme support for the full-width alignment?

Also, what is your whole block layout for that specific page? Could you send us a screenshot so we can try replicating the issue again on our website?

Kind regards,
Karla

[Karla]

Karla

#285059

Hi, Maureen!

I’m sorry for the delay in getting back to you.

When you’re using the Virtue Premium theme, you can enable the option to show sub-menu items in full width and multiple columns. Please watch this screen recording – https://share.getcloudapp.com/Wnu6PZBj.

Could you confirm if this is already how your menu shows? If not, could you send us your website URL so we can see how it looks right now and better help you with the issue?

You may set your reply as private so only you and the support team can see the URL.

Let us know if we can help you further with this.

Regards,
Karla

[Karla]

Karla

#284905

Hi there!

I’m sorry for the delay in getting back to you.

There is an option to change the collapse order of the columns (inner Section) of the Row Layout block. You’ll need to click the mobile icon beside the Columns Layout option to see it.

The option name is “COLLAPSE ORDER” and select “Reverse” – https://share.getcloudapp.com/bLuZvO2J.

I hope this helps, and let us know if we can help you further.

Kind regards,
Karla

[Solace]

Solace

#284792

Can’t seem to find a way to allow product short description to be shown as an custom excerpt with specific number of words. Does a method exist that I am not seeing?

I want to show a list of products either in a grid or in columns, with:

Image
Title
Summary (e.g. 20 words or customised amount)
Read more / buy now button

Examples:

– “product carousel” – but no excerpt option exists
– “products” (beta) woocommerce block – but product summary / or post excerpt does not exist
– “products by category” – but no excerpt is available
– “post grid / carousel” – excerpt exists, but doesn’t work on products!
– “Posts” then select products, then modicy the content settings to enable excerpt and custom excerpt length – but these don’t work.

I added a feature request here:
*Login to see link

[Solace]

Solace

#284792

Can’t seem to find a way to allow product short description to be shown as an custom excerpt with specific number of words. Does a method exist that I am not seeing?

I want to show a list of products either in a grid or in columns, with:

Image
Title
Summary (e.g. 20 words or customised amount)
Read more / buy now button

Examples:

– “product carousel” – but no excerpt option exists
– “products” (beta) woocommerce block – but product summary / or post excerpt does not exist
– “products by category” – but no excerpt is available
– “post grid / carousel” – excerpt exists, but doesn’t work on products!
– “Posts” then select products, then modicy the content settings to enable excerpt and custom excerpt length – but these don’t work.

I added a feature request here:
*Login to see link

[Karla]

Karla

#284767

Hi, G!

The Info Box blocks don’t know that they’ll have other blocks beside them. Also, there is no built-in option to make their “Learn More” buttons/links all placed at the bottom.

The inner columns are the ones with equal heights, not the Info Box blocks inside the Row Layout – https://share.getcloudapp.com/kpullgWb.

One workaround that you can do here is to add a minimum height for the Info Box blocks Text Settings. You can adjust the values for the tablet and mobile views too – https://share.getcloudapp.com/geuPPLEq.

I hope this helps, and let us know if we can help you further.

Kind regards,
Karla

[Ian Beevis]

Ian Beevis

#284717

How do I show all products under a category with the lazy loading using Woo Product by Category Block on page?

Seems limited to set number of rows and columns?

See: *Login to see link ud/blinds-for-bifold-doors page

There are 100+ products in the category

I stress I am inserted a product category block into a page not showing a Product Category Archive Page.

Also how I reduce the space between the get a price and get a sample buttons on the page?

THanks

Ian

[Ian Beevis]

Ian Beevis

#284717

How do I show all products under a category with the lazy loading using Woo Product by Category Block on page?

Seems limited to set number of rows and columns?

See: *Login to see link ud/blinds-for-bifold-doors page

There are 100+ products in the category

I stress I am inserted a product category block into a page not showing a Product Category Archive Page.

Also how I reduce the space between the get a price and get a sample buttons on the page?

THanks

Ian

[Ian Beevis]

Ian Beevis

#284671

Hi Karla

> I can see the “From:” texts now showing on the page you gave. Do you need more help with this?

Yes please, as I mentioned above I have used 2 columns one for ‘from’ and the other for the price but seems overkill and there is too much padding currently and cant see where to alter.

The product is simple as it uses a Calculated Form Field plugin to calculate a price.

Ian

[Ian Beevis]

Ian Beevis

#284620

What is the best way to add some text before the price (for instance ‘From’).

Have used a row with 2 columns but seems overkill.

Have a look at *Login to see link ud/product-category/brown-blinds/

Ian

[Ian Beevis]

Ian Beevis

#284620

What is the best way to add some text before the price (for instance ‘From’).

Have used a row with 2 columns but seems overkill.

Have a look at *Login to see link ud/product-category/brown-blinds/

Ian

[JD Alewine]

JD Alewine

#284526

Hi There!

I’m in the process of updating my site, and I have a row with three columns. In each column is an image overlay. While I’m editing I can see all three blocks, but then when I view the live version, I can’t see the third.

I’m uploading screenshots for reference, and here is the live page: *Login to see link

At first everything was working, and I’m unsure of what went wrong.

Thank you!

[JD Alewine]

JD Alewine

#284526

Hi There!

I’m in the process of updating my site, and I have a row with three columns. In each column is an image overlay. While I’m editing I can see all three blocks, but then when I view the live version, I can’t see the third.

I’m uploading screenshots for reference, and here is the live page: *Login to see link

At first everything was working, and I’m unsure of what went wrong.

Thank you!

[Chrilles Wybrandt]

Chrilles Wybrandt

#284388

Please see attached images where I have added some simple CSS that will make one column float into 2.

And would it be possible to have this as a setting in Kadence?

[Chrilles Wybrandt]

Chrilles Wybrandt

#284388

Please see attached images where I have added some simple CSS that will make one column float into 2.

And would it be possible to have this as a setting in Kadence?

[Brendan Baker]

Brendan Baker

#284337

Hi there,

I am trying to create a one-page overview of my latest posts by category. I have so far succeeded by inserting the “latest posts” block into columns and choosing the category to display.

However, the issue I am facing is that the padding between each line/row is very large. How do I adjust this and make it smaller? There is currently too much of a space between each line item / post.

I have attached an image to show what it currently looks like. I want to remove the spacing between each line item/post. How do I do this?

[Brendan Baker]

Brendan Baker

#284337

Hi there,

I am trying to create a one-page overview of my latest posts by category. I have so far succeeded by inserting the “latest posts” block into columns and choosing the category to display.

However, the issue I am facing is that the padding between each line/row is very large. How do I adjust this and make it smaller? There is currently too much of a space between each line item / post.

I have attached an image to show what it currently looks like. I want to remove the spacing between each line item/post. How do I do this?

[chitocamacho]

chitocamacho

#284141

Hello Chris,

Thanks for the video and screenshot.

There’s a difference with the width because the Row Layout uses grid while the Tabs uses flex CSS property.

To resolve this, we can apply grid CSS for the Tabs title. Here’s the code you can add in Row Layout’s custom CSS.

selector ul.kt-tabs-title-list.kb-tabs-list-columns{
    display: grid;
    gap: var(--global-row-gutter-md,2rem) var(--global-row-gutter-md,2rem);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

Here’s a video for reference: https://share.getcloudapp.com/YEu48ZpW

The code applies gutter the same as Row Layout’s MD Column Gutter, as you can see in the video. You can tweak the code to match the gutter in the Row Layout and Tabs.

Does that work for you?

Kind regards,
Chito

[chris-7624]

chris-7624

#284129

Hello,

I’m developing a site where I have 3 tabs positioned under 3 info boxes placed in a 3 column row layout. However the size and spacing of the 3 column tabs cannot match a 3 column row layout because the tabs don’t seem to function as 3 even columns. You can see what I’m describing in this Loom video link where I try to adjust the gutter width between the tabs. The third tab does not adjust at all while the first and second tabs do. This creates a larger third tab and two smaller first and second tabs. Why do these tabs not all adjust to even column widths like a row layout?

*Login to see link

What I want is the same gutter spacing between the 3 column row layout and the 3 tab layout so they visually align.

[chris-7624]

chris-7624

#284129

Hello,

I’m developing a site where I have 3 tabs positioned under 3 info boxes placed in a 3 column row layout. However the size and spacing of the 3 column tabs cannot match a 3 column row layout because the tabs don’t seem to function as 3 even columns. You can see what I’m describing in this Loom video link where I try to adjust the gutter width between the tabs. The third tab does not adjust at all while the first and second tabs do. This creates a larger third tab and two smaller first and second tabs. Why do these tabs not all adjust to even column widths like a row layout?

*Login to see link

What I want is the same gutter spacing between the 3 column row layout and the 3 tab layout so they visually align.