Search Results for 'COLUMNS'

[shawn-5494]

shawn-5494

#283211

This reply has been marked as private.

[teejayhidalgo]

teejayhidalgo

#283165

Hi Amy,

Thank you for this additional information. I was able to replicate this behavior. When the assigned column count is greater than or equal to the actual count of the posts available to be displayed in the carousel. The loop does not work.

I am not sure if this is a bug. The loop works by stitching the first item on the carousel at the end to display the loop.

You mentioned “I have only 3 posts in category “A” but I want 5 columns of posts displayed. The ‘show unique’ option is unchecked.“. In this scenario, the carousel will show 2 of the posts at the same time in the 5 column carousel, should the loop work in this scenario. Is this what you are trying to achieve?

I’ve sent a note regarding this to the developer to verify if this is a bug and if a workaround can be applied.

I hope this helps.

Best regards,
Teejay.

[Amy P]

Amy P

#283120

Yes, after 4 days I had to apply the temporary fix to all carousels per client’s wishes.

The error occurs when the number of total posts in any category is less than the number of columns. For example, I have only 3 posts in category “A” but I want 5 columns of posts displayed. The ‘show unique’ option is unchecked.

Unfortunately, I have no caching plug-in or host-based cpanel feature that I can control. It’s Earthlink and it’s not great.

But thanks for replying!

• This reply was modified 3 years ago by Amy P.

[Amy P]

Amy P

#282944

After updating to Pro Blocks 3.0.27 on a site running the Sinatra theme, I noticed my post carousels weren’t looping.

*Login to see link
The carousel has 5 post columns displayed for screens above 1500px, 1200px-1499px, and 992px-1199px:
Notice the following behavior:

When viewed in a large/wide browser window, the posts go through their first rotation, and then there is just blank space. No looping.
When viewed in a tablet-sized window, the posts loop but there’s a gray hairline (smoke trail) right at the top of the images them sometimes.
Resizing the window at any point freezes the carousel and/or makes the post thumbnails disappear.

I figured out a temporary fix and applied it to this page:
*Login to see link
This carousel has only 4 post columns displayed for screens above 1500px, 1200px-1499px, and 992px-1199px:
Notice that the odd behavior is not present (except for the weird smoke trail but if you resize the window, it disappears and gradually comes back).

I am not sure what’s going on, there don’t seem to be any js errors, but I just thought I’d report it for anyone experiencing the same thing.

[Amy P]

Amy P

#282944

After updating to Pro Blocks 3.0.27 on a site running the Sinatra theme, I noticed my post carousels weren’t looping.

*Login to see link
The carousel has 5 post columns displayed for screens above 1500px, 1200px-1499px, and 992px-1199px:
Notice the following behavior:

When viewed in a large/wide browser window, the posts go through their first rotation, and then there is just blank space. No looping.
When viewed in a tablet-sized window, the posts loop but there’s a gray hairline (smoke trail) right at the top of the images them sometimes.
Resizing the window at any point freezes the carousel and/or makes the post thumbnails disappear.

I figured out a temporary fix and applied it to this page:
*Login to see link
This carousel has only 4 post columns displayed for screens above 1500px, 1200px-1499px, and 992px-1199px:
Notice that the odd behavior is not present (except for the weird smoke trail but if you resize the window, it disappears and gradually comes back).

I am not sure what’s going on, there don’t seem to be any js errors, but I just thought I’d report it for anyone experiencing the same thing.

[chitocamacho]

chitocamacho

#282939

Hi there,

Thanks for writing.

Put the logo in the center column of your header row, and the Primary and Secondary Navigation widgets in the adjacent columns. Here’s a screenshot: https://share.getcloudapp.com/jkuAeZeq

That displays the logo in the center regardless of the length of the menu items.

Please let me know if I misunderstood your query, and I’d be glad to help further.

Kind regards,
Chito

[Eze]

Eze

#282926

Hi Blerim,

Thank you for sending a link to your website.

To fix this issue, you can modify your CSS to adjust the grid layout when the last column is hidden. One approach would be to use media queries to change the grid-template-columns property when the screen size is below a certain threshold (i.e. when the mobile view is active).

Here’s an example of what the CSS might look like:
1. First, in your WordPress dashboard, Go to Appearance > Customize
2. Click on the Additional CSS option in the left-hand menu.
3. Add the following code:

@media screen and (min-width: 767px) {
    #kt-layout-id_95ba3b-b2 > .kt-row-column-wrap {
        grid-template-columns: 1fr 1fr;
    }
}

The grid-template-columns property here is set to 1fr 1fr to create two columns with widths that will stretch to take all the remaining space on desktop view.

Please let me know if this works.

Cheers,
Eze

[Eze]

Eze

#282870

Hi Blerim,

I understand that you have a three-column layout to display buttons, with the last column being hidden on desktop view and shown only on mobile devices as a link to WhatsApp. I’m sorry to hear that the buttons are not stretching any more, and you suspect it might have something to do with CSS Grid.

CSS Grid is indeed a powerful tool that allows you to create complex layouts with ease. It is possible to create a grid layout that accommodates your three columns and ensures that the remaining two columns stretch to take up the available space. However, it is important to ensure that the CSS selectors used to define the grid layout do not affect other Row Layout blocks that also have three columns.

To better assist you with this issue, please provide us with your website URL so that we know the existing Row Layout block and provide you with the appropriate CSS codes that will only apply to that specific block.

We recommend that when sending links to your websites, kindly check “set as private reply” before submitting your reply.

Please let us know how we can help further.

Cheers,
Eze

[Blerim]

Blerim

#282849

Hi there,

I have a three column layout to display some buttons.
The last column is only to be shown on mobile, since it is a link to WhatsApp.
I have “Hide on Desktop” checked for the last column.

Previously, the remaining two columns used to stretch and take the remaining space.
Since the current updates, the buttons are not stretching anymore and the layout looks weird.
I think this issue has something to do with CSS GRID.

• This topic was modified 3 years ago by Blerim.

[Blerim]

Blerim

#282849

Hi there,

I have a three column layout to display some buttons.
The last column is only to be shown on mobile, since it is a link to WhatsApp.
I have “Hide on Desktop” checked for the last column.

Previously, the remaining two columns used to stretch and take the remaining space.
Since the current updates, the buttons are not stretching anymore and the layout looks weird.
I think this issue has something to do with CSS GRID.

• This topic was modified 3 years ago by Blerim.

[Daniel Wincott]

Daniel Wincott

#282571

Hi Hannah,
I think you may not understand my question.

When I used to use GeneratePress they used to use unsemantic framework under the hood.
This meant I could create custom child theme pages and html layouts.

I’m wanting to know if the is any documentation on best practices to create HTML/CSS rows, columns in pages.
I’m not talking about blocks or block templates, as I want to create custom loops and ACF content wrapped in HTML.

So, does Kandence use a framework, or just flex box and grid?

If so are there any cheatsheets or code snippets to help with this.

Maybe I have outgrown Kadence and need to use a Bootstrap or Tailwind theme for custom development?

Thanks

[cleve]

cleve

#282376

I too have experienced a tremendous amount of problems recently… I believe it is tracked down to Kadence. Example: For logged in users, Rows show normal but for everyone else all of my single column rows won’t show content. If I make them two columns and Vertical, then Hide bottom section, they show up…. but on smaller screens like iPad and Phones it shows up fine??

Also my Woocommerce Single Product Layout looks like a narrow page without images and wonky text formatting for logged in users but normal for everyone else.

I woke up with this problem this past weekend and thought it was something I had done, but only problem is I had done nothing.

Please help if you can as I’m sure there are many who don’t even realize things are messed up.

[Asmus]

Asmus

#282373

This reply has been marked as private.

[Hannah]

Hannah

#282359

Hi John,
Thanks for reaching out! The category page should pull from your Shop Archive Settings in Theme Options. Are you wanting something different from this? If so, you can create a custom product category page and add your product categories using a shortcode like this: [products limit=”8″ columns=”4″ category=”hoodies”]

Kindly,
Hannah

[Asmus]

Asmus

#282335

Hi again,

I re-constructed the tables and something is wrong.

I am using the Kadence Table Block in an template element.
Into various tables I am dynamically entering post custom field’s.

One table I can re-create, but only with 2 column’s and 5 rows (it’s in a 2-column row layout).
If I make a 6th row, the whole table won’t display.

In another section in a 1-column layout, the kadence table won’t show at all no matter the number of rows or columns.

Any idea what is going on?

Cheers,
A

[John]

John

#282311

The Ascend Premium theme offers controls over the number of products displayed on each /shop/ page.

How can we limit the number of categories displayed in a category page? The number of columns shown in a category page?

[John]

John

#282311

The Ascend Premium theme offers controls over the number of products displayed on each /shop/ page.

How can we limit the number of categories displayed in a category page? The number of columns shown in a category page?

[danielmason794]

danielmason794

#282305

To change the layout of the search results page in the Kadence theme, you can use the Kadence Theme Options panel. Here are the steps:

Log in to your WordPress dashboard.
Go to Appearance > Customize.
Click on “Kadence Theme Options”.
Click on “Blog”.
Click on “Search Results”.
Here you will see the options to customize the layout of the search results page. You can choose the layout type, the number of columns, the post meta data, and the excerpt length.
Make your desired changes and click “Publish” to save the changes.

You can also use the Kadence theme’s built-in page builder to customize the search results page layout. Here’s how:

Create a new page or edit an existing one that you want to use as the search results page.
Open the Kadence Theme Builder by clicking on “Kadence Theme Builder” at the top of the page.
Add a new “Post Archive” block to the page by clicking on the “Add New Block” button and selecting “Post Archive”.
Customize the layout and design of the post archive block to match your preferences.
Save the changes and set the page as the search results page by going to Settings > Reading in your WordPress dashboard and selecting the page from the dropdown menu under “Search Results Page”.

By following these steps, you can easily change the layout of the search results page in the Kadence theme.

[zenguided]

zenguided

#282180

Hi all,

This is from a site that says it uses Kadence – are these columns template items? (and are they in the free version).

Many thanks

Eddie

[zenguided]

zenguided

#282180

Hi all,

This is from a site that says it uses Kadence – are these columns template items? (and are they in the free version).

Many thanks

Eddie

[Karla]

Karla

#282174

Hi, Sean!

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

You can use the Row Layout block in order to make the section full height and full width:

• Here’s a guide on using full-width Row Layout blocks – https://www.kadenceblocks.com/docs/adding-a-fullwidth-row/.
• To make the minimum height of the row to full height, go to block settings > Structure Settings and set the Min Height option to 100vh – https://share.getcloudapp.com/NQu48oOL

The other content blocks can be inserted inside their inner Sections (columns). Watch this screen recording for an example – https://share.getcloudapp.com/5zu2QYp9.

I hope this helps. Let us know if we can assist you further.

Regards,
Karla

[Karla]

Karla

#282115

Hi there!

Yes, the Kadence theme supports RTL languages.

For the Post Grid/Carousel block – I think you’re referring to the Aling Image option. You’re correct, the available options are only Top or Left. For now, I added a feature request to add an option for the Right alignment. You may add your vote here – https://www.kadencewp.com/kadence-blocks/feature-requests/post-grid-carousel-image-alignment/.

A workaround is to add this custom CSS code to Customizer > Additional CSS:

.rtl .kt-blocks-post-grid-item-inner-wrap.kt-feat-image-align-left {
    grid-template-columns: auto 30%!important;
}

.rtl .kt-blocks-post-grid-item-inner-wrap.kt-feat-image-align-left .kadence-post-image {
    grid-column: 2;
}

.rtl .kt-blocks-post-grid-item-inner-wrap.kt-feat-image-align-left .kt-blocks-post-grid-item-inner {
    grid-column: 1;
}

This should make the “Left”-aligned images align on the right side instead.

Kindly share Kadence Custom Font Plugin.

This plugin is available if you have the Full Bundle product. If you did purchase that, go to your Downloads page. You should see and download it there.

Otherwise, you can follow our knowledgebase post here to add your own custom font – https://www.kadencewp.com/help-center/docs/kadence-theme/adding-custom-fonts-to-kadence/.

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

Regards,
Karla

[chitocamacho]

chitocamacho

#282084

Hi Ninon,

There’s a setting in Post Grid/Carousel to set number of columns on different screen width. Go to Layout Settings, click Individual, and change the values of SCREEN 544PX – 767PX and SCREEN BELOW 543PX to 2. Screenshot: https://share.getcloudapp.com/wbuvlx92

Otherwise, use the below custom CSS to apply it to all Post Grid/Carousel sitewide:

@media (max-width: 768px){
   .kt-post-grid-wrap{
        grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    } 
}

Let me know how I can help further.

Kind regards,
Chito

[Ninon Michels]

Ninon Michels

#282069

Hello Kadence team,

I would like for all the Post Grid/Carousel Blocks on my site to appear on 2 columns on mobile. For now, there are 2 columns on mobile when there are 4 columns on the desktop settings. Is there a way to override this with CSS and have 2 columns on mobile regardless the number of column on desktop?

Thanks a lot for your help!
Best,
Ninon

[Ninon Michels]

Ninon Michels

#282069

Hello Kadence team,

I would like for all the Post Grid/Carousel Blocks on my site to appear on 2 columns on mobile. For now, there are 2 columns on mobile when there are 4 columns on the desktop settings. Is there a way to override this with CSS and have 2 columns on mobile regardless the number of column on desktop?

Thanks a lot for your help!
Best,
Ninon