Search Results for 'COLUMNS'

[Anonymous]

Anonymous

#287146

Hi Ann,

You can also edit the value of columns. So if for example you want it all on one row, then you need to make sure that posts_per_page and columns have the same value.

So, for example I set 5 for both values. This is what happens: https://www.loom.com/share/f7f36410db744163ad44d3c6d1c5e6c0

Let us know how we could help you further.

Kind Regards,
Michael Taro

[Eze]

Eze

#287107

Hi Ann,

Thank you for reaching out.

There is no built-in feature to increase the number of WooCommerce Related Products Columns, but you can achieve this using this custom function:

function king_custom_related_products_columns( $args ){

    $columns = absint( Kadence\kadence()->option( 'product_related_columns' ) );
    $args['posts_per_page'] = 8;
    $args['columns'] = $columns;

    return $args;
}

function king_change_related_products(){

    if ( class_exists( 'Kadence\Theme' ) ){

        $kadence_theme_class = Kadence\Theme::instance();        
        remove_filter( 'woocommerce_output_related_products_args', array( $kadence_theme_class->components['woocommerce'], 'related_products_columns' ), 20 );
        add_filter( 'woocommerce_output_related_products_args', 'king_custom_related_products_columns' );       
    }
}

add_action( 'init', 'king_change_related_products' );

Here is how to add a custom function with Code Snippets Plugin:
https://www.kadencewp.com/help-center/docs/kadence-theme/how-to-add-a-custom-filter-or-function-with-code-snippets/

Watch this demo screencast of what happens when the custom function code is added to your website:
https://share.zight.com/6quXLYKz

Change the 8 in $args['posts_per_page'] = 8; to 5 or 6.

I hope this helps. Please let us know how we can help further.

Cheers,
Eze

[paige]

paige

#287073

Hi, I’m having a problem where the vertical alignment in individual columns stops working when I turn on the “Inner Column Height 100%” option.

In my case, I’m trying to set the vertical alignment in my columns to “Space Between.” But when I toggle “Inner Column Height 100%” on in the row, that seems to override whatever vertical alignment option I select in the individual columns.

I used the Inspect tool, and it looks like the column height CSS is using a “justify-items: center” that is overriding the inner column’s “justify-content: space-between”:

I found an older topic that seems related here: *Login to see link and it almost seems like the fix for that topic might be related to what is causing my current issue? I tried a few ways of using similar CSS to what was suggested there (but with different justification of course), but nothing seems to make a difference.

I also tried leaving “Inner Column Height 100%” toggled off and setting a minimum height for each individual column instead; when I do that the Space Between does at least work, but then the column sizes are nowhere near as responsive.

Would love any help resolving this! Thanks so much.

• This topic was modified 2 years, 2 months ago by paige.

[paige]

paige

#287073

Hi, I’m having a problem where the vertical alignment in individual columns stops working when I turn on the “Inner Column Height 100%” option.

In my case, I’m trying to set the vertical alignment in my columns to “Space Between.” But when I toggle “Inner Column Height 100%” on in the row, that seems to override whatever vertical alignment option I select in the individual columns.

I used the Inspect tool, and it looks like the column height CSS is using a “justify-items: center” that is overriding the inner column’s “justify-content: space-between”:

I found an older topic that seems related here: *Login to see link and it almost seems like the fix for that topic might be related to what is causing my current issue? I tried a few ways of using similar CSS to what was suggested there (but with different justification of course), but nothing seems to make a difference.

I also tried leaving “Inner Column Height 100%” toggled off and setting a minimum height for each individual column instead; when I do that the Space Between does at least work, but then the column sizes are nowhere near as responsive.

Would love any help resolving this! Thanks so much.

• This topic was modified 2 years, 2 months ago by paige.

[Karla]

Karla

#286828

Hey there!

What display issue are you experiencing specifically? If you want to set a specific number of columns for a screen width, do these:
1. Click the “Individual” link bese=ide the Columns option
2. Set the number of columns for the screen widths listed

See this screenshot – https://share.zight.com/NQuBRdoW.

I hope this helps. For another support topic, please create a new topic in the forum.

Let us know if we can help you further.

Regards,
Karla

[chitocamacho]

chitocamacho

#286757

Hey Gabs,

For the archive pages, do you mean two columns per row on mobile? There’s no built-in setting for this, but we can achieve it using a custom CSS.

Also, is this for blog archive pages? If so, you can use this custom CSS:

@media screen and (max-width: 767px){
    .blog #archive-container,
    .archive.category #archive-container{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

As for the Post Grid/Carousel block, do you mean you want to display only 3 blog posts for mobile view? You can have two Post Grid/Carousel blocks for desktop (with 8 posts) and mobile (with 3 posts), separate them using Row Layout and control the visibility via the Visibility Settings.

Let me know if you need further assistance.

Best,
Chito

[Karla]

Karla

#286629

Hi, Annamaria!

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

Could you specify which blocks you’re using on the screenshots? If I use multi-columns for the Row Layout block, the preview is alright – https://share.zight.com/yAunw1rb

On the other hand, you can preview the actual mobile view by following the steps here – https://www.kadencewp.com/help-center/docs/kadence-theme/how-to-preview-the-mobile-version-of-your-site-on-desktop/

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

Regards,
Karla

[Karla]

Karla

#286628

Hi, Amber!

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

Are you going to add this to one page only? If so, edit that page and use these blocks:
1. Row Layout block with 2 columns
2. Text(Adv) blocks for the title
3. Progress Bar block for the star rating
4. Buttons(Adv) block for the download
5. Image or Image(Adv) blocks for the image on the right side

Here’s a screen recording for your reference – https://share.zight.com/wbu5nX9l. Most of the blocks I mentioned is from our Kadence Blocks plugin.

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

Regards,
Karla

[Cristian Lungu]

Cristian Lungu

#286559

Can someone please help me/explain how to replicate this page. I’m making the transition from blosy to kandace bu I really like the product review layout and I want to recreated on on Kadence…I’m even struggling to add starts next to the heading on 2 columns.

Thank you.
I can even pay if needed.

[Cristian Lungu]

Cristian Lungu

#286559

Can someone please help me/explain how to replicate this page. I’m making the transition from blosy to kandace bu I really like the product review layout and I want to recreated on on Kadence…I’m even struggling to add starts next to the heading on 2 columns.

Thank you.
I can even pay if needed.

[Karla]

Karla

#286553

Hi, Amber!

Do you have the Kadence Theme Pro add-on? If so, you can make use of the Hooked Elements feature to add or replace a page’s Hero section.

You will then need to add the blocks you need to recreate that section. For multiple columns, use the Row Layout block. Also:

• Image or Image(Adv) block
• Heading or Text(Adv) blocl=k
• Buttons or Buttons(Adv) block

Here’s a screen recording – https://share.zight.com/yAun5QJJ

If you don’t have the pro add-on, you can add the set of blocks at the top-most part of a specific page to act as a hero.

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

Regards,
Karla

[alex_blondeau]

alex_blondeau

#286548

The columns in my WooCommerce product catalog are breaking into a single column on the second product page. You can view the site here. *Login to see link

I have used the health check plugin to view the site with only the WooCommerce plugin activated. The problem persists in the Kadence theme, but goes away when I switch to Twenty Twenty-Four. I’m at a loss. Any ideas?

[alex_blondeau]

alex_blondeau

#286548

The columns in my WooCommerce product catalog are breaking into a single column on the second product page. You can view the site here. *Login to see link

I have used the health check plugin to view the site with only the WooCommerce plugin activated. The problem persists in the Kadence theme, but goes away when I switch to Twenty Twenty-Four. I’m at a loss. Any ideas?

[iaqua]

iaqua

#286532

Hi everyone.

We’re using the free version of Kadence theme and blocks with Gutenberg and are running into a problem in our header.
We’re trying to insert our search (Ajax Search Lite) into the middle of the bottom row of our header. We’re using the HTML element with the shortcode for the searchbar. The searchbar shows up but it’s much smaller than it’s supposed to be (we have it on our homepage as well where we can see the proper size). We suspect it’s the middle column of the bottom row that’s limiting the width, therefore making our searchbar smaller than it’s supposed to be.

Does anyone know any way to change that specific column’s width, or the correct way to address it using custom CSS?
We thought maybe changing the number of columns from 5 to 3 could help but we don’t know how and we’re not really sure if it would actually resolve the issue.

We’re working on a stage site so can’t provide a link.

Any kind of help would be appreciated.

Thanks in advance.

[iaqua]

iaqua

#286532

Hi everyone.

We’re using the free version of Kadence theme and blocks with Gutenberg and are running into a problem in our header.
We’re trying to insert our search (Ajax Search Lite) into the middle of the bottom row of our header. We’re using the HTML element with the shortcode for the searchbar. The searchbar shows up but it’s much smaller than it’s supposed to be (we have it on our homepage as well where we can see the proper size). We suspect it’s the middle column of the bottom row that’s limiting the width, therefore making our searchbar smaller than it’s supposed to be.

Does anyone know any way to change that specific column’s width, or the correct way to address it using custom CSS?
We thought maybe changing the number of columns from 5 to 3 could help but we don’t know how and we’re not really sure if it would actually resolve the issue.

We’re working on a stage site so can’t provide a link.

Any kind of help would be appreciated.

Thanks in advance.

[Karla]

Karla

#286336

Hi, Stefano!

With the free version, there isn’t a built-in option to do that. The workaround is to use CSS code. For customization reference, you can look at using grid CSS – https://css-tricks.com/snippets/css/complete-guide-grid/.

Something like this:

.header-navigation ul li:hover ul.sub-menu {
    display: grid!important;
    grid-template-columns: 1fr 1fr;
}

On the other hand, one of the pro features is the Ultimate Menu and you can do this easily. Here’s our post – https://www.kadencewp.com/help-center/docs/kadence-theme/how-to-create-a-mega-multicolumn-menu/.

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

Regards,
Karla

[riga75]

riga75

#286325

Hi everyone, I use Kadence verisone free and I would have the need seen my site: *Login to see link to set two or three columns in the submenu from desktop, because as you see in some items the submenu is very long
How can I do that?
thanks a lot

stefano

[riga75]

riga75

#286325

Hi everyone, I use Kadence verisone free and I would have the need seen my site: *Login to see link to set two or three columns in the submenu from desktop, because as you see in some items the submenu is very long
How can I do that?
thanks a lot

stefano

[architabasandrai]

architabasandrai

#286258

Hi Prandam,

I reviewed your reference website, you can use the section sticky option to create a similar section.

• Add the row layout
• Divide into two columns
• Select the sticky option for the first column from the advanced tab of block settings

Check the screen recording for reference: https://share.zight.com/NQu5plEy

I hope this helps. If I misunderstood what you’re trying to do or if what I have shown is still not working for you, please let us know, and we’ll be more than happy to help.

Best Regards,
Archita

[chitocamacho]

chitocamacho

#286148

Hi D,

Can you provide more details? Perhaps, screenshots of what should the columns should look like and the link to the website.

You can share these privately by checking the “Set as private reply” option below.

Best,
Chito

[Prandam]

Prandam

#286142

Thanks Chito! really helpful
But I really need to have a custom left-side frame.
It’s possible to just use a 2-column row layout, using iframes in BOTH columns? (both embedded pages from the site’s content?)

Thanks in advance for any hint,
Have the best day

/D

[teejayhidalgo]

teejayhidalgo

#285957

Hi there,

I see that you are mostly constructing the content of your website using the Section blocks.

​Here’s a screen recording for reference: https://share.getcloudapp.com/NQu5ovjp

This block has the option to set the Inner Block Direction to vertical or horizontal on desktop/tablet/mobile.

​Here’s a screen recording for reference: https://share.getcloudapp.com/rRumjLQE

You can also try combining the Section blocks and Multiple Column Row Layout blocks. Columns on a Row Layout block will collapse by default on mobile devices.

By default, the theme and blocks will already be responsive and will look good on most screen sizes. However, this would still depend on how the section is created. If for example, you’ve manually set padding for the desktop version of an element especially if you have used an absolute unit, this setting would be applied to the tablet and mobile versions as well if you do not specify values for these 2 other breakpoints.

There are specific theme and block settings where you can specify a different setting to fine-tune them to look better on the target screen. Settings that have responsive options usually have the device icons above them.

Please see these screenshots for reference:

• https://share.getcloudapp.com/04uEp9dq
• https://share.getcloudapp.com/kpuJ0Be4

I hope this helps. If you have further questions, please let us know; we’ll be happy to help.

Best regards,
Teejay.

[ABSTRACTUS Webdesign]

ABSTRACTUS Webdesign

#285955

I am struggling with responsive features of Kadence Theme and Blocks (both in Pro) at a very basic point. Multi-column row blocks remain multi-column even on mobile size portrait format, so the result is awkward and not usable… but I cannot find the setting to set the breakpoint for the columns to collapse, not have I found any instruction on this in the documentation.

Can anyone advise me on how to make the columns layouts collapse below certain page widths?

Here are some examples from *Login to see link

[ABSTRACTUS Webdesign]

ABSTRACTUS Webdesign

#285955

I am struggling with responsive features of Kadence Theme and Blocks (both in Pro) at a very basic point. Multi-column row blocks remain multi-column even on mobile size portrait format, so the result is awkward and not usable… but I cannot find the setting to set the breakpoint for the columns to collapse, not have I found any instruction on this in the documentation.

Can anyone advise me on how to make the columns layouts collapse below certain page widths?

Here are some examples from *Login to see link

[Karla]

Karla

#285945

Hi there!

Glad you were able to find a workaround.

Although, based on your screenshot, you’re using a product block to show a product grid. What block is it exactly? The style from our theme should show them on single columns for small screens. Watch this screen recording – https://share.zight.com/GGuyQBBB.

Let us know if we can help you further.

Regards,
Karla

[olikana.france]

olikana.france

#285930

Ok I aske CHATGPT iI found out thanks anyway put this CSS custom code and that’s it

@media (max-width: 767px) {
.woocommerce ul.products:not(.products-list-view),
.wp-site-blocks .wc-block-grid:not(.has-2-columns):not(has-1-columns) .wc-block-grid__products {
grid-template-columns: 1fr; /* Définir une seule colonne */
}
}

Take care all.