Search Results for 'COLUMNS'

[teejayhidalgo]

teejayhidalgo

#296435

Hi iscottjames19,

I’m glad you reached out, I’d be happy to help.

From your message, it sounds like when you add or select a Row Layout block, you see a message indicating that the row has been added, and then you notice a Section inside it. At the same time, there seems to be some uncertainty around how the Row Layout settings and the Margin and Padding options work.

At the moment, I do not see a specific question yet, so I’d like to clarify one important point and then ask a few follow-ups to better help you.

If your concern is that the Row Layout block is automatically creating a Section block, this is actually the expected behavior. When you add a Row Layout block, at least one Section block is always created inside it. The number of Section blocks depends on the number of columns you choose when creating the Row Layout.

Here’s a screen recording that shows this behavior for reference:
https://share.zight.com/4gupdRRp

This structure is intentional and gives you more flexibility and control. The Row, Section, and the inner content blocks each have their own settings for layout, gutters, background, margin, and padding. This allows you to control spacing and styling at different levels instead of everything being handled by a single block.

You can see an overview of how these controls work together in this video:
https://share.zight.com/2NuZnW9O

To help further, could you let me know a bit more about what you expect the Row Layout block to do versus what you are currently seeing, or whether the confusion is mainly around layout structure or spacing? I’ll be happy to explain in more detail once I understand your goal.

Looking forward to your clarification so we can get this sorted out.

Best regards,
Teejay.

[khurramshehzadgt]

khurramshehzadgt

#296108

This is a really useful thread—thank you all for sharing both the CSS workaround and the context behind why this happens on mobile. I’ve run into the same issue with sticky first columns, and it’s reassuring to know it’s a known limitation rather than a setup mistake. I was reading a related discussion on 247gulftrivia.org that touches on usability challenges like this, and it really highlights how important proper table behavior is on smaller screens. Hopefully a future update will allow per-cell background control, as that would greatly improve table usability on mobile.

[Karla]

Karla

#296014

Hi Arjan,

Based on the code that you gave, the blocks you’re using are the WordPress core List block, Columns block, and our Kadence Gallery(Adv) block.

While I don’t have issues on my website, could you take a screenshot of your browser console log while editing the page? This is so we can see if there are any error message that could give us more insights of what’s wrong.

Here’s our guide: https://www.kadencewp.com/help-center/docs/kadence-theme/how-to-view-console-log-errors/

I also want to see all of the blocks you have on the page. Click the List View on the top-left side of the editor and expand all blocks like this: https://share.zight.com/Jru9pJW5

[Arjan]

Arjan

#296006

This reply has been marked as private.

[archierobinson534]

archierobinson534

#295848

Hi Kadence Team,

I’m currently using the Kadence theme on one of my sites, tokuplayapk.id, and overall I’m really happy with the performance and flexibility. However, I’ve noticed a small issue related to layout spacing and media blocks.

When I add images or embed content inside Gutenberg blocks (especially columns or inside lists), the spacing sometimes breaks on the frontend after saving or updating the page. The editor looks fine, but the live page shows extra gaps or misaligned elements. I’ve double-checked margins and padding settings in Kadence blocks, but the issue still appears occasionally.

Has anyone else experienced something similar with Kadence theme or Kadence blocks? Is there a recommended setting or CSS fix to keep media and content spacing consistent across updates?

Thanks in advance for the support—really appreciate the great work you’re doing with Kadence!

[archierobinson534]

archierobinson534

#295848

Hi Kadence Team,

I’m currently using the Kadence theme on one of my sites, tokuplayapk.id, and overall I’m really happy with the performance and flexibility. However, I’ve noticed a small issue related to layout spacing and media blocks.

When I add images or embed content inside Gutenberg blocks (especially columns or inside lists), the spacing sometimes breaks on the frontend after saving or updating the page. The editor looks fine, but the live page shows extra gaps or misaligned elements. I’ve double-checked margins and padding settings in Kadence blocks, but the issue still appears occasionally.

Has anyone else experienced something similar with Kadence theme or Kadence blocks? Is there a recommended setting or CSS fix to keep media and content spacing consistent across updates?

Thanks in advance for the support—really appreciate the great work you’re doing with Kadence!

[rossadamm59]

rossadamm59

#295827

Hi
This happens because the first column is fixed in place while the rest of the table continues to scroll underneath it.
On mobile, the browser still renders the other columns in the same layer, so they visually pass behind the fixed column.
It’s a common behavior with sticky or frozen columns when scrolling horizontally on smaller screens.
For a visual guide, you can refer to this screencast.

[Karla]

Karla

#295806

Apologies for the delay in getting back to you here.

You’re right, there isn’t an option, but you can add this to your Custom CSS Box in Theme Options > Advanced Settings:

@media (min-width: 992px) {
    #kad-blog-grid .tcol-md-3 {
        width: 20% ;
    }
}

This should show the posts in 5 columns for wider screens.

[Frank]

Frank

#295688

Using a page with the blog grid option….Is there a way to increase it to 5 columns?
I have tried just using blog grid shortcode and that set the columns wonderfully
[blog_grid orderby=date items=4 columns=3 cat=photos]

but…There is no pagination that way ( unless there is?? )
So Back to using the Page’s Blog Grid option can we increase the columns there to more than 4?

[Frank]

Frank

#295688

Using a page with the blog grid option….Is there a way to increase it to 5 columns?
I have tried just using blog grid shortcode and that set the columns wonderfully
[blog_grid orderby=date items=4 columns=3 cat=photos]

but…There is no pagination that way ( unless there is?? )
So Back to using the Page’s Blog Grid option can we increase the columns there to more than 4?

[thomastwinklearm]

thomastwinklearm

#295613

Thank you So much, My next problem is How to add another columns of Categories or create i want to create a two or three specific category in the middle section.

[Antar Howarth]

Antar Howarth

#295514

It would be a lot simpler if the Query had an “equal height columns” option.

[teejayhidalgo]

teejayhidalgo

#295466

Hi danielmartinhq,

I’m glad you reached out, I’d be happy to help.

It is expected that text will automatically wrap to a new line when there is not enough horizontal space in each column.

Here are a few adjustments you can try:

1.Reduce the font size.
2.Decrease the spacing between columns.
3.Increase the maximum width of the Row Layout block.

Here’s a screen recording for reference: https://share.zight.com/qGuLg1Gk

Would any of these adjustments work for your design?

Best regards,
Teejay.

[rosiedawson161]

rosiedawson161

#295301

Hi,

Thanks for clarifying and sorry for the confusion. You’re right—the Adv Query Loop block doesn’t support a carousel.

To create one, use the Kadence Post Grid/Carousel block:

Edit your page/post and add the block.

Enable the Carousel toggle in the block settings.

Customize columns, autoplay, navigation, post filters, and styling as needed.

[Anonymous]

Anonymous

#295258

Hi there,

Thanks for the clarification. Apologies for the confusion.

You are correct, the Adv Query Loop block does not have a layout option for a carousel.

You can create a carousel using the Post Grid/Carousel block in Kadence. Here’s how to do it step-by-step:

– Edit Your Page or Post: Open the page or post where you want to add the carousel.
– Add the Post Grid/Carousel Block
– Enable Carousel Layout: In the block settings sidebar, find the “Enable Carousel” toggle and switch it on. This will turn your post grid into a sliding carousel.
– Customize Your Carousel: Adjust the number of columns (slides visible at once). Set autoplay, navigation arrows, and dots as needed. Filter which posts to display (by category, tag, or custom post type). Style the carousel using the design options in the sidebar.

For more details, check out the Post Grid/Carousel Block documentation: https://www.kadencewp.com/help-center/docs/kadence-blocks/kadence-blocks-post-grid-carousel-block/

Let us know how we could help you further.

Kind Regards,
Michael Taro

[architabasandrai]

architabasandrai

#294956

Hi Gabs,

I’m glad you reached out. I’d be happy to help.

Yes, you can set your archive to display in 5 columns using custom CSS. You can add something like this to Customizer > Additional CSS: https://www.kadencewp.com/help-center/docs/kadence-theme/how-do-i-add-custom-css/

.blog .kadence-posts-list{
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

Thanks for reaching out. To give you the exact CSS you’ll need, could you please share your website URL with me? You can send it as a private reply so it stays visible only to our team.

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

Best Regards,
Archita

[Gabs]

Gabs

#294951

Hello, how can I set the archive to use 5 columns using custom CSS?
thx

[Gabs]

Gabs

#294951

Hello, how can I set the archive to use 5 columns using custom CSS?
thx

[andrew-4339]

andrew-4339

#294805

Just checking out Kadence (free) and I have a row containing a section, which contains a 2-column column.

I can set the Custom Content Max Width to 70%, and it appears correctly when editing, but the columns remain full-width in browsers.

Not sure what to look for as I’m not very familiar with Kadence, but since it’s working in the editor but not browsers I figure I’m missing something.

Any help appreciated!

[andrew-4339]

andrew-4339

#294805

Just checking out Kadence (free) and I have a row containing a section, which contains a 2-column column.

I can set the Custom Content Max Width to 70%, and it appears correctly when editing, but the columns remain full-width in browsers.

Not sure what to look for as I’m not very familiar with Kadence, but since it’s working in the editor but not browsers I figure I’m missing something.

Any help appreciated!

[RUK]

RUK

#294760

Here is the code for the full slider:

<div id=”ld-focus-content” class=”ld-focus-content”>

<h1>Test Slider</h1>

<div class=”learndash learndash_post_sfwd-lessons user_has_no_access” id=”learndash_post_1074150″>
<div class=”learndash-wrapper learndash-wrapper–lesson entry-content”>

<div class=”ld-tabs ld-tab-count-1″>

<div class=”ld-tabs-content”>

<div class=”ld-tab-content ld-visible gsp_dc” id=”ld-tab-content-1074150″>
<div class=”kb-advanced-slider kb-advanced-slider-1074150_d318b6-a9 wp-block-kadence-slider”><div class=”kb-advanced-slider-inner-contain kb-adv-slider-html-version-2″><div class=”kb-blocks-advanced-carousel kt-blocks-carousel kt-carousel-container-dotstyle-dark”><div class=”kb-blocks-advanced-slider-init kb-slider-loading kb-blocks-slider kt-carousel-arrowstyle-whiteondark kt-carousel-dotstyle-dark kb-slider-size-ratio kb-slider-type-slider kb-slider-ratio-12-5 kb-slider-group-arrow kb-slider-arrow-position-center kb-slider-tab-ratio-inherit kb-slider-mobile-ratio-inherit splide kb-splide kb-slider-version-3 splide-initial is-overflow is-initialized splide–fade splide–ltr splide–draggable is-active” aria-label=”Slider content” data-slider-center-mode=”true” data-slider-type=”slider” data-loop-type=”loop” data-columns-xxl=”3″ data-columns-xl=”3″ data-columns-md=”3″ data-columns-sm=”2″ data-columns-xs=”1″ data-columns-ss=”1″ data-slider-anim-speed=”400″ data-slider-scroll=”1″ data-slider-fade=”true” data-slider-arrows=”true” data-slider-dots=”true” data-slider-hover-pause=”false” data-slider-auto=”true” data-dragging=”true” data-slider-speed=”7000″ data-slider-gap=”30″ data-slider-gap-tablet=”30″ data-slider-gap-mobile=”30″ data-slider-gap-unit=”px” id=”splide01″ role=”region” aria-roledescription=”carousel”><div class=”splide__arrows splide__arrows–ltr”><button class=”splide__arrow splide__arrow–prev slick-prev” type=”button” aria-label=”Previous slide” aria-controls=”splide01-track”><svg xmlns=”http://www.w3.org/2000/svg&#8221; viewBox=”0 0 40 40″ width=”40″ height=”40″ focusable=”false”><path d=”m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z”></path></svg></button><button class=”splide__arrow splide__arrow–next slick-next” type=”button” aria-label=”Go to first slide” aria-controls=”splide01-track”><svg xmlns=”http://www.w3.org/2000/svg&#8221; viewBox=”0 0 40 40″ width=”40″ height=”40″ focusable=”false”><path d=”m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z”></path></svg></button></div><div class=”splide__track splide__track–fade splide__track–ltr splide__track–draggable” id=”splide01-track” aria-live=”off” aria-atomic=”true” style=”padding-left: 0px; padding-right: 0px;” aria-busy=”false”><ul class=”splide__list” id=”splide01-list” role=”presentation”>

<li class=”wp-block-kadence-slide kb-advanced-slide-item kb-slide-1074150_c6c050-e4 splide__slide is-prev” id=”splide01-slide01″ role=”tabpanel” aria-roledescription=”slide” aria-label=”1 of 2″ style=”margin-right: 0px; width: calc(100% + 0px); transform: translateX(0%); transition: opacity 400ms cubic-bezier(0.25, 1, 0.5, 1);” aria-hidden=”true”><div class=”kb-advanced-slide”><div class=”kb-advanced-slide-inner-wrap”><div class=”kb-advanced-slide-inner”>
<h2 class=”wp-block-heading”>Slide 1</h2>

<p>Slide 1 Content</p>
</div></div></div>

<li class=”wp-block-kadence-slide kb-advanced-slide-item kb-slide-1074150_4f1527-b3 splide__slide is-active is-visible” id=”splide01-slide02″ role=”tabpanel” aria-roledescription=”slide” aria-label=”2 of 2″ style=”margin-right: 0px; width: calc(100% + 0px); transform: translateX(-100%); transition: opacity 400ms cubic-bezier(0.25, 1, 0.5, 1);”><div class=”kb-advanced-slide”><div class=”kb-advanced-slide-inner-wrap”><div class=”kb-advanced-slide-inner”>
<h2 class=”wp-block-heading”>Slide 2</h2>

<p>Slide 2 Content</p>
</div></div></div>

</div><ul class=”splide__pagination slick-dots splide__pagination–ltr” role=”tablist” aria-label=”Select a slide to show”><li role=”presentation”><button class=”splide__pagination__page” type=”button” role=”tab” aria-controls=”splide01-slide01″ aria-label=”Go to slide 1″ tabindex=”-1″></button><li role=”presentation”><button class=”splide__pagination__page is-active” type=”button” role=”tab” aria-controls=”splide01-slide02″ aria-label=”Go to slide 2″ aria-selected=”true”></button></div></div></div></div><div class=”gsp_post_data” data-post_type=”sfwd-lessons” data-cat=”” data-modified=”-60″ data-title=”Test Slider” data-home=”https://carelearning.org.uk”></div&gt; </div>

</div> <!–/.ld-tabs-content–>

</div> <!–/.ld-tabs–>

</div> <!–/.learndash-wrapper–>
</div>

<div class=”ld-focus-comments”>

<div class=”ld-focus-comments__comments ld-expanded” id=”ld-comments” data-ld-expand-id=”ld-comments”>
<div class=”ld-focus-comments__comments-items” id=”ld-comments-wrapper”>
</div>
</div>
<button aria-controls=”ld-comments-form” aria-expanded=”false” class=”ld-expand-button ld-button-alternate” id=”ld-comments-post-button”>
<span class=”ld-icon-arrow-down ld-icon”></span>
<span class=”ld-text”>Post a comment</span>
</button>
<div class=”ld-focus-comments__form-container ld-collapsed” id=”ld-comments-form” data-height=”50″ style=”max-height: 0px;” hidden=”hidden”>
<div id=”respond” class=”comment-respond”>
<h3 id=”reply-title” class=”comment-reply-title”>Leave a Comment <small>Cancel reply</small></h3><form action=”https://carelearning.org.uk/wp-comments-post.php&#8221; method=”post” id=”commentform” class=”comment-form”><input type=”hidden” name=”step_id” value=”1074150″><p class=”logged-in-as”>Logged in as Care Learning. Edit your profile. Log out? <span class=”required-field-message”>Required fields are marked <span class=”required”>*</span></span></p><p class=”comment-form-comment comment-form-float-label”><textarea id=”comment” name=”comment” placeholder=”Leave a comment…” cols=”45″ rows=”8″ maxlength=”65525″ aria-required=”true” required=”required”></textarea><label class=”float-label” for=”comment”>Comment <span class=”required”>*</span></label></p><p class=”form-submit”><input name=”submit” type=”submit” id=”submit” class=”submit” value=”Post Comment”> <input type=”hidden” name=”comment_post_ID” value=”1074150″ id=”comment_post_ID”>
<input type=”hidden” name=”comment_parent” id=”comment_parent” value=”0″>
</p><input type=”hidden” id=”_wp_unfiltered_html_comment_disabled” name=”_wp_unfiltered_html_comment” value=”666e80baa2″><script>
(function(){if(window===window.parent){document.getElementById(‘_wp_unfiltered_html_comment_disabled’).name=’_wp_unfiltered_html_comment’;}})();
</script>
</form> </div><!– #respond –>
</div>
</div> <!–/ld-focus-comments–>

</div>

[cartita.digital]

cartita.digital

#294726

Hello Kadence Team,

I am contacting you to report a critical layout bug in the Gallery Block that is preventing its use. The issue is severe and manifests on all devices, worsening significantly during screen resizing.

1. Core Problem:
The gallery does not render images correctly. Image edges appear cut off, and consistently, the last item in each row fails to display, completely breaking the layout structure.

2. Responsiveness and Resizing Issue:
The problem intensifies when switching between breakpoints (desktop, tablet, mobile). The grid calculation fails, resulting in misaligned and disproportionate rows. Specifically, when switching back from a mobile view to the desktop view, the images do not return to their original position or size, appearing “stretched” or “dragged” downwards, leaving empty space and a corrupted layout.

Evidence from the attached screenshots:

In the Quinceañeras galleries, the last image in the top row is consistently missing.

In the Baby Shower galleries, the severe resizing problem is evident, where images lose their proportions and fail to return to their original state after the viewport change.

What I have tested:

Browsers: The error is reproducible in Chrome, Firefox, and Safari. It is consistent across all of them.

Cache: I have cleared all cache (browser, WordPress, server). The problem persists.

Column Settings: I have adjusted the number of columns in the block settings. The error adapts, always omitting the last image in the row.

Gallery Modes: The error occurs in both Masonry mode and Grid mode.

Images: I have tried images of different dimensions and aspect ratios. The failure continues.

I look forward to your response!

[cartita.digital]

cartita.digital

#294726

Hello Kadence Team,

I am contacting you to report a critical layout bug in the Gallery Block that is preventing its use. The issue is severe and manifests on all devices, worsening significantly during screen resizing.

1. Core Problem:
The gallery does not render images correctly. Image edges appear cut off, and consistently, the last item in each row fails to display, completely breaking the layout structure.

2. Responsiveness and Resizing Issue:
The problem intensifies when switching between breakpoints (desktop, tablet, mobile). The grid calculation fails, resulting in misaligned and disproportionate rows. Specifically, when switching back from a mobile view to the desktop view, the images do not return to their original position or size, appearing “stretched” or “dragged” downwards, leaving empty space and a corrupted layout.

Evidence from the attached screenshots:

In the Quinceañeras galleries, the last image in the top row is consistently missing.

In the Baby Shower galleries, the severe resizing problem is evident, where images lose their proportions and fail to return to their original state after the viewport change.

What I have tested:

Browsers: The error is reproducible in Chrome, Firefox, and Safari. It is consistent across all of them.

Cache: I have cleared all cache (browser, WordPress, server). The problem persists.

Column Settings: I have adjusted the number of columns in the block settings. The error adapts, always omitting the last image in the row.

Gallery Modes: The error occurs in both Masonry mode and Grid mode.

Images: I have tried images of different dimensions and aspect ratios. The failure continues.

I look forward to your response!

[victormonk]

victormonk

#294686

Hey Cameron,

You can request this kind of functionality through our Feedback System here.

It’s also good to know that the Kadence Section Blocks feature Visibility Settings. These settings allow you to hide sections for specific devices. So if you wish to show Two Columns on Desktop and one on Mobile, you could technically achieve these kinds of designs. You can read more about this feature here.

I hope this helps!
-Victor

[cameron-9796]

cameron-9796

#294674

Like Francis, I’m very surprised that I’m unable to change the number of columns by device type/screen size. Seems like a major responsive oversight when I can change so many other, much more trivial things by device type/screen size. How do I request this feature or upvote an existing request?