Search Results for 'COLUMNS'

[aristfs]

aristfs

#282064

Hello Ben Ritner,

I checked my website with Achecker Web Accessibility Checker for compliance with WCAG 2.0 (AA).

Problem:
Anchor contains no text.
Repair: Add text to the a element or the title attribute of the a element or, if an image is used within the anchor, add Alt text to the image.

Found the problem in this code (class post-thumbnail kadence-thumbnail-ratio-2-3):

<div class="is-layout-flex wp-container-3 wp-block-columns">
<div class="is-layout-flow wp-block-column" style="flex-basis:100%"><div class="wp-block-kadence-posts kb-posts kb-posts-id-_685476-eb content-wrap grid-cols kb-posts-style-unboxed grid-sm-col-2 grid-lg-col-3 item-image-style-above"><article class="entry content-bg loop-entry post-75 post type-post status-publish format-standard has-post-thumbnail hentry category-news">
			<strong><strong><a class="post-thumbnail kadence-thumbnail-ratio-2-3" href="XXXXXXXXXXXXXXXXXXXXXXXXXXX"></strong></strong>
			<div class="post-thumbnail-inner">
				<div class="bialty-container"><img width="436" height="223" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20436%20223'%3E%3C/svg%3E" data-src="XXXXXXXXXXXXXXXXXXXXXXXXXXX" class="attachment-medium_large size-medium_large wp-post-image lazy" alt="Puppies Park;" decoding="async" data-srcset="XXXXXXXXXXXXXXXXXXXXXXXXXXX 436w, XXXXXXXXXXXXXXXXXXXXXXXXXXX 300w" data-sizes="(max-width: 436px) 100vw, 436px"></div>
			</div>

• This reply was modified 3 years, 2 months ago by aristfs.
• This reply was modified 3 years, 2 months ago by aristfs.

[aristfs]

aristfs

#281965

Hello,
Thanks for your answer.
The images have alternative text.
I inserted the kadence block “posts” in homepage, but feature images from latest posts have problem with web accessibility.

My code: (XXXXX is url) (see the problem in bold)

<div class="is-layout-flex wp-container-3 wp-block-columns">
<div class="is-layout-flow wp-block-column" style="flex-basis:100%"><div class="wp-block-kadence-posts kb-posts kb-posts-id-_685476-eb content-wrap grid-cols kb-posts-style-unboxed grid-sm-col-2 grid-lg-col-3 item-image-style-above"><article class="entry content-bg loop-entry post-75 post type-post status-publish format-standard has-post-thumbnail hentry category-news">
			<strong><a class="post-thumbnail kadence-thumbnail-ratio-2-3" href="XXXXXXXXXXXXXXXXXXXXXXXXXXX"></strong>
			<div class="post-thumbnail-inner">
				<div class="bialty-container"><img width="436" height="223" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20436%20223'%3E%3C/svg%3E" data-src="XXXXXXXXXXXXXXXXXXXXXXXXXXX" class="attachment-medium_large size-medium_large wp-post-image lazy" alt="Puppies Park;" decoding="async" data-srcset="XXXXXXXXXXXXXXXXXXXXXXXXXXX 436w, XXXXXXXXXXXXXXXXXXXXXXXXXXX 300w" data-sizes="(max-width: 436px) 100vw, 436px"></div>
			</div>

[Karla]

Karla

#281737

Hi there!

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

You’re right, there is no option to change the inner column’s horizontal alignment. What I can recommend is adding custom CSS code inside the Row Layout block:

selector .kt-row-column-wrap {
    margin-left: 0;
}

See this screen recording for an example – https://share.getcloudapp.com/llugg1dR.

Also, you may log a feature request for an option to align the inner columns here. However, please note that we cannot give an estimated date for when these will be added.

Let us know if we can assist you further.

Kind regards,
Karla

[zihanhossain420]

zihanhossain420

#281566

You can see in the attached there are to columns. The form from the right column seems very long, so, I want the paragraph from the left to align middle vertically. Let me know if you are still confused.

[Karla]

Karla

#281550

Hi there!

Could you confirm if you edited the Info Box block as HTML? Please note that we do not recommend editing custom blocks of any plugin as HTML. Doing so will change their corresponding HTML output and mostly results in broken blocks.

I believe the other two Info Box blocks are not resolved because of issues with their HTML. I recommend using other blocks to construct your section. For example:

• Row Layout block with 3 columns.
• Inside each inner column, add Advanced Image and Advanced Text blocks.

Here’s a video of an example – https://share.getcloudapp.com/RBuBL5br.

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

Regards,
Karla

[Christoph]

Christoph

#281457

Hey Karla,

thanks for your reply. Sure this works, but in this case you dont have multiple sub-links.
In my case, the menu-items are all on the same level. On Desktop i need them to be in 4 columns, as the menu would be too long if they would be in one column of course. On Mobile, one column would be fine. How can i do that?

[Christoph]

Christoph

#281426

Hi.

I’m using the mega menu on the desktop version of my website, *Login to see link .
That’s why I was using a different menu for the mobile version, because of the empty columns, that had to be there for the mega menu.
But the more links I’m adding, it is a bit annoying because ill always have to add the links twice, as the menu is completely the same in terms of the links.

Can I somehow remove the “empty” column-links and display only the real links, so that I can use the same menu for both desktop and mobile?
For example, on desktop i have 4 columns for the menu “Zielfisch”, on mobile id like to have just 1 menu containing all in one row.

Best
Christoph

[Christoph]

Christoph

#281426

Hi.

I’m using the mega menu on the desktop version of my website, *Login to see link .
That’s why I was using a different menu for the mobile version, because of the empty columns, that had to be there for the mega menu.
But the more links I’m adding, it is a bit annoying because ill always have to add the links twice, as the menu is completely the same in terms of the links.

Can I somehow remove the “empty” column-links and display only the real links, so that I can use the same menu for both desktop and mobile?
For example, on desktop i have 4 columns for the menu “Zielfisch”, on mobile id like to have just 1 menu containing all in one row.

Best
Christoph

[Karla]

Karla

#281273

Hi!

First, I tried setting up the structure that you’ve described:

• Row Layout – 80vh min-height, 1200px max-content width.
• Column layout is 45%(left column) and 55%(right column)

See this video – https://share.getcloudapp.com/d5uyzGDy. As you have seen, the inner columns or sections of the Row Layout block have consistent widths. Their heights will differ and that is expected because vh is a fluid unit, it will not stay the same for all screen sizes like px.

If you inspect the allowable space of the sections, you will get an idea of the image sizes you can use. For example, on a monitor with 2499px width and 767px height, these are the dimensions that you will get – https://share.getcloudapp.com/nOu1YA7N.

You can then upload two images with these dimensions or retina-ready ones(times two of their pixel dimensions). Then, on the Advanced Image blocks, select Full for the Image File Size option. This way, both images will have the correct aspect ratio for the columns.

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

Kind regards,
Karla

[Karla]

Karla

#281256

Hi, Johanna!

I apologize for the delay in getting back to you here.

If you want to show featured products on your pages(homepage), you can do the following:

• Edit the homepage.
• Add WooCommerce plugin’s [products] shortcode. For example, “[products limit="4" columns="4" visibility="featured"]“. This is how it worked on my website – https://share.getcloudapp.com/JruyXqQE.

  For more reference about this shortcode, you can refer to their knowledgebase article here – https://woocommerce.com/document/woocommerce-shortcodes/.

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

Regards,
Karla

[chitocamacho]

chitocamacho

#280998

Hi there,

Here’s a quick video on how you can add another column inside a Row Layout block: https://share.getcloudapp.com/yAuQdgXe

Select the Row Layout and on the right panel is the block settings where you can adjust the number of columns/sections. Here’s a screenshot: https://prnt.sc/sExdHHREn5e-

Here’s a tutorial for the Row Layout block. You can also see other block tutorials on the sidebar:
https://www.kadencewp.com/kadence-blocks/documentation/block-tutorials/row-layout-block/

I hope this helps and let us know if you need further assistance.

Kind regards,
Chito

[rankooodle]

rankooodle

#280992

Just started with the theme and blocks and can’t figure out how to edit a section to add a new column?

Thanks!

[rankooodle]

rankooodle

#280992

Just started with the theme and blocks and can’t figure out how to edit a section to add a new column?

Thanks!

[Karla]

Karla

#280979

Hi there!

I’m sorry for the delayed response.

If you enable either the Left or Right Sidebar layout for posts or pages, there will be two columns: the main content and the sidebar. The Featured Image section is part of the main content and it is expected that it will not expand to full width if you have a sidebar layout enabled. This is what the thumbnail of the layout options indicates – https://share.getcloudapp.com/o0uX2nWq.

If you want to show a full-width featured image, I recommend following this setup(if you do not have the Essential Bundle):

• Do not show the featured image.
• Enabled the “Above Content” title section.
• Go to Design settings and activate the “Use Featured Image for Background?” option.
• Go back to General settings and adjust the “Container Min Height” option as necessary.

Here’s a screen recording for your reference – https://share.getcloudapp.com/eDu7qqWP.

On the other hand, if you have the Essential Bundle, that means you can use the Kadence Theme Pro and Kadence Blocks Pro addons. Then, you can refer to these links so you can create a hooked element that will show as a full-width section and will dynamically show the current post’s featured image:

• https://www.kadencewp.com/kadence-theme/knowledge-base/pro-addon/how-to-use-element-hooks/
• https://www.kadencewp.com/blog/how-to-use-dynamic-content-with-kadence/
• Kadence WP YouTube playlist

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

Regards,
Karla

[admin26]

admin26

#280726

Hello,

Two questions on a four column dropdown menu.

1. I don’t want to use all caps for the font, and I can’t work out where to change that.
2. I would like the order of the menu items to fill down the columns, not across them. Right now, the first four menu items are the top listing for each of the four columns.

Thanks!

[admin26]

admin26

#280726

Hello,

Two questions on a four column dropdown menu.

1. I don’t want to use all caps for the font, and I can’t work out where to change that.
2. I would like the order of the menu items to fill down the columns, not across them. Right now, the first four menu items are the top listing for each of the four columns.

Thanks!

[gilberthernandez]

gilberthernandez

#280709

Hello,

I apologize for the delay in response. The Archive Custom Settings feature provided by Kadence Pro lets you add an Above Header Background Image and dictate the columns of the archive loop. These settings are available when you edit a taxonomy term like in categories or tags, for example. Here is a screenshot of an edited term without the feature:

And here is an image of the same edit screen with the feature enabled:

[Bonn]

Bonn

#280692

Hi there,

Instead of using Row blocks with 3 columns, you can use a Row block with 1 column, and just set the “Inner Block Direction” to Horizontal: https://share.getcloudapp.com/QwudoZE5

You can use the Advanced Image block so that you can add a max-width value. You will have to adjust the max-width to your liking.

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

See if this works for you.

Regards,
Bonn

[thedetoureffect]

thedetoureffect

#280670

Hi there,

I have a page with nothing on it except a Row block with 3 columns. Each column has an image block in it. Since there are five images, two of them have to go below the other two, like this:

A B C
D E

When it collapses on mobile I want it to maintain the order, so it looks like this:

A
B
C
D
E

But instead, it’s going:

A
D
B
E
C

I tried both the “left to right” collapse order and the “right to left” collapse order but neither of them work because the problem isn’t left/right, it’s up/down. Is there a way to fix this?

I tried just doing two separate row blocks instead. Top row has ABC, separate row below it has DE. But for some reason none of the images are lining up when I do this, image D wants to ride the border of the page instead of sitting directly below image A, like this:

A B C
D E

Even though all of the settings are exactly the same for both rows and the images are the same size. So I’d rather keep one row block so they’re all properly lined up, and figure out the collapse order issue.

In the screenshot attached you can see why they need to be in this order, they are chronologically dated. My website is TheDetourEffect.com and the page is password protected.

Thank you!

[thedetoureffect]

thedetoureffect

#280670

Hi there,

I have a page with nothing on it except a Row block with 3 columns. Each column has an image block in it. Since there are five images, two of them have to go below the other two, like this:

A B C
D E

When it collapses on mobile I want it to maintain the order, so it looks like this:

A
B
C
D
E

But instead, it’s going:

A
D
B
E
C

I tried both the “left to right” collapse order and the “right to left” collapse order but neither of them work because the problem isn’t left/right, it’s up/down. Is there a way to fix this?

I tried just doing two separate row blocks instead. Top row has ABC, separate row below it has DE. But for some reason none of the images are lining up when I do this, image D wants to ride the border of the page instead of sitting directly below image A, like this:

A B C
D E

Even though all of the settings are exactly the same for both rows and the images are the same size. So I’d rather keep one row block so they’re all properly lined up, and figure out the collapse order issue.

In the screenshot attached you can see why they need to be in this order, they are chronologically dated. My website is TheDetourEffect.com and the page is password protected.

Thank you!

[geoladkd]

geoladkd

#280652

I’ve got a mad issue, using Elementor and Kadence thème.

When i create a simple X-columns layout, with image/title/text, the title of the first column always get a margin that create a gap.

I don’t have any customisation, any CSS or anything else. I’ve juste duplicated the columns (and started from blank page multiple times). The margin appear only in live rendering, never in Elementor. This is getting me mad !

Is it intended ? I guess no.
Can you help me solving this ?

Thank you !

• This topic was modified 3 years, 5 months ago by geoladkd.

[geoladkd]

geoladkd

#280652

I’ve got a mad issue, using Elementor and Kadence thème.

When i create a simple X-columns layout, with image/title/text, the title of the first column always get a margin that create a gap.

I don’t have any customisation, any CSS or anything else. I’ve juste duplicated the columns (and started from blank page multiple times). The margin appear only in live rendering, never in Elementor. This is getting me mad !

Is it intended ? I guess no.
Can you help me solving this ?

Thank you !

• This topic was modified 3 years, 5 months ago by geoladkd.

[NyteU]

NyteU

#280634

Hello,

In the Kadence Theme I set the numbers of columns in Archive Page to 1 and it’s working well for posts (picture 1).

But I wanted to do the same with pages, so I downloaded a plugin which allowed me to add categories to pages. Unfortunately when I go to archive page with pages (not posts!), it shows them in 3 columns, not 1 (picture 2). What should I do to fix it?

Thanks in advance,
Kuba

[NyteU]

NyteU

#280634

Hello,

In the Kadence Theme I set the numbers of columns in Archive Page to 1 and it’s working well for posts (picture 1).

But I wanted to do the same with pages, so I downloaded a plugin which allowed me to add categories to pages. Unfortunately when I go to archive page with pages (not posts!), it shows them in 3 columns, not 1 (picture 2). What should I do to fix it?

Thanks in advance,
Kuba

[nig]

nig

#280473

Copy & paste isn’t always easy; try it with columns! I have 3 columns, wanted to create 4 and copy the last one and replicate it. Each column is a section, the section cannot be duplicated and the copy/paste just dumps a lot of ‘code’ into the new column area. I try to convert to HTML and copy and paste that over; but Kadence and HTML causes a heck of a lot of problems with pages hanging/crashing and going into ‘Attempt Block Recovery’ almost 100% of the time.

Great theme – but some rough edges to it when working on the back end build.

[Aaron Kessler]

Aaron Kessler

#280466

https://kadence.uber.space/beispiel-seite/

in the developer tools you will find an element with the classes “kt-row-column-wrap kt-has-2-columns kt-gutter-default kt-v-gutter-default kt-row-valign-top kt-row-layout-equal kt-tab-layout-inherit kt-m-colapse-left-to-right kt-mobile-layout-row” with these styles attached:

#kt-layout-id_e80e62-15 > .kt-row-column-wrap {
    padding-top: px;
    padding-bottom: px;
}
.kt-row-column-wrap {
    padding: 25px 0 25px 0;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    position: relative;
    z-index: 10;
}

Kadence Blocks should not generate styles with invalid property values.

• This reply was modified 3 years, 6 months ago by Aaron Kessler.