Search Results for 'COLUMNS'

[oedoma42]

oedoma42

#219476

Hello,

I would like to make all testimonials excerpts and a uniform size but I can’t find the option to do that. My preference is a Testimonial Carousel with one row and 3 columns rather than filling a page with them all. I do use Elementor for some pages so that is an option.

Is there a way to do this?

[oedoma42]

oedoma42

#219476

Hello,

I would like to make all testimonials excerpts and a uniform size but I can’t find the option to do that. My preference is a Testimonial Carousel with one row and 3 columns rather than filling a page with them all. I do use Elementor for some pages so that is an option.

Is there a way to do this?

[Carrie]

Carrie

#219297

Hi
*Login to see link
I’d like the 3 columns to be fairly evenly spaced; the first row has a layout builder which is fine the way it is.
Could you help me please?

Thank you so much.
Carrie

[Carrie]

Carrie

#219297

Hi
*Login to see link
I’d like the 3 columns to be fairly evenly spaced; the first row has a layout builder which is fine the way it is.
Could you help me please?

Thank you so much.
Carrie

[Kevin]

Kevin

#219150

You could try reducing the number of columns to increase the width of the products to better match the main product page. Would that work for you?

-Kevin

[Ben Ritner]

Ben Ritner

#219119

The carousels are a little different because they are built with Javascript. You would have to use a shortcode and then in the shortcode define the column count for smaller sizes:

[carousel type="featured-products" columns="3" items="8" speed=9000 scol="3" xscol="2" sscol="2"]

Or you can just add this into your theme options > header and footer scripts in the header scripts and it will change all your carousels:

<script type="text/javascript">
jQuery(document).ready(function ($) {
 $('.kt-content-carousel.products').each(function(){
$(this).attr('data-slider-xs', '2');
$(this).attr('data-slider-ss', '2');
});
});
</script>

[Ben Ritner]

Ben Ritner

#219110

Hey,
Currently, there isn’t a way to do this within the theme settings you can use a child theme and override the templates/content-fourgrid.php template file and change line 5 to the number you want.

Another option for you since your setting the grid in a fullwidth container is to make the grid switch to 5 columns are larger screen sizes, then 6 columns on even larger screen sizes.

Like this:

@media (min-width: 1400px){
    .page-template-page-blog-grid .b_item {
        width: 20%;
    }
}
@media (min-width: 1800px){
    .page-template-page-blog-grid .b_item {
        width: 16.66%;
    }
}

I hope that helps!

Ben

[Anthony]

Anthony

#219009

Apologies for the confusion, on the blog grid set at 4 columns the grid box width is 25%, which on my display is approx 500px, however the blog grid images are fixed at 364px wide. This results in the image being entered in the grid box with an approx 70px margin either side, before the border. what I am looking to do is change the maximum width of the blog grid images from 364px to 550px, which happens to be the size I have my medium images set to

[Sharon]

Sharon

#218988

No. Using columns. Can I convert the column block to row layout?

[Sharon]

Sharon

#218975

I created a column block of 4 columns. I want the entire set background color changed. I do it individually but want background to be completely covering the columns blocks. The column blocks are the ones with icons.

Is there also a way to change the column widths?

*Login to see link

[Sharon]

Sharon

#218975

I created a column block of 4 columns. I want the entire set background color changed. I do it individually but want background to be completely covering the columns blocks. The column blocks are the ones with icons.

Is there also a way to change the column widths?

*Login to see link

[Hannah]

Hannah

#218917

Hey Jennifer,
This post should have what you need: https://kb.kadencethemes.com/knowledge-base/two-product-columns-in-mobile/
Hope that helps!

Hannah

[Jennifer]

Jennifer

#218909

Hi,

What is the CSS that would make products show in two columns instead of one on mobile for Virtue Premium? (Shop page and product carousels.) Sorry if this has been asked previously, I was unable to find the answer when searching the forum.

Thanks,
Jennifer
*Login to see link

[Jennifer]

Jennifer

#218909

Hi,

What is the CSS that would make products show in two columns instead of one on mobile for Virtue Premium? (Shop page and product carousels.) Sorry if this has been asked previously, I was unable to find the answer when searching the forum.

Thanks,
Jennifer
*Login to see link

[christian.toller]

christian.toller

#218885

Hello there!

Sample of the question: *Login to see link
That’s a page containing some headings and some categories embedded via shortcode:

<h2 id="1" class="anker" style="text-align: center;"><strong>Speisezimmer & Wohnzimmer</strong></h2>
<p style="text-align: center;">[product_categories columns="3" hide_empty="0" number="0" parent="265"]</p>

<h2 id="2" class="anker" style="text-align: center;"><strong>Sitzmöbel</strong></h2>
<p style="text-align: center;">[product_categories columns="3" hide_empty="0" number="0" parent="266"]</p>

I would like to control the vertical distance between two rows of categories, but their vertical position seems to be calculated and then set with an inline top: xxx style:
<div class="tcol-md-4 tcol-sm-4 tcol-xs-6 tcol-ss-12 kad_shop_default kad_product" style="position: absolute; left: 0px; top: 0px;">
<!-- content of first row, left category -->
</div>
...
<div class="tcol-md-4 tcol-sm-4 tcol-xs-6 tcol-ss-12 kad_shop_default kad_product" style="position: absolute; left: 0px; top: 387px;">
first ontent of second row, left category -->
</div>

Note the different “top: 0px;” and “top: 387px;”

Can I somehow modify that calculation, so that the vertical gap between the two rows get’s smaller?

[christian.toller]

christian.toller

#218885

Hello there!

Sample of the question: *Login to see link
That’s a page containing some headings and some categories embedded via shortcode:

<h2 id="1" class="anker" style="text-align: center;"><strong>Speisezimmer & Wohnzimmer</strong></h2>
<p style="text-align: center;">[product_categories columns="3" hide_empty="0" number="0" parent="265"]</p>

<h2 id="2" class="anker" style="text-align: center;"><strong>Sitzmöbel</strong></h2>
<p style="text-align: center;">[product_categories columns="3" hide_empty="0" number="0" parent="266"]</p>

I would like to control the vertical distance between two rows of categories, but their vertical position seems to be calculated and then set with an inline top: xxx style:
<div class="tcol-md-4 tcol-sm-4 tcol-xs-6 tcol-ss-12 kad_shop_default kad_product" style="position: absolute; left: 0px; top: 0px;">
<!-- content of first row, left category -->
</div>
...
<div class="tcol-md-4 tcol-sm-4 tcol-xs-6 tcol-ss-12 kad_shop_default kad_product" style="position: absolute; left: 0px; top: 387px;">
first ontent of second row, left category -->
</div>

Note the different “top: 0px;” and “top: 387px;”

Can I somehow modify that calculation, so that the vertical gap between the two rows get’s smaller?

[Kevin]

Kevin

#218809

This isn’t possible, simply because there isn’t enough room on the page to have images that wide. The columns would not be able to disperse evenly if the image size was increased that much.

If you want wider images, you can reduce the amount of columns. Would that work for you?

-Kevin

[brad19831]

brad19831

#218453

I was able to fix it under “shop archives settings” in theme options. I was able to make the products in a one row list rather than a multiple rows/columns/grid view.

[Fabrizio]

Fabrizio

#218417

it is [blog_posts orderby=date items=4 type=photo cat=portretfotografie columns=2]

[Ben Ritner]

Ben Ritner

#218403

Hey,
That error in your image is showing from the Core columns block, not the Kadence Blocks Row.

Here is the best way to resolve broken blocks: https://www.kadenceblocks.com/docs/how-to-recover-a-broken-block/

Just install the Gutenberg plugin and you will see the options to attempt block recovery.

Ben

[Ben Ritner]

Ben Ritner

#218343

Thanks, for posting!

I know what’s going on. A z-index is assigned to rows and columns because you can technically overlay columns with a negative margin. This is causing the issue with the modal being inside a row.

For a temp fix add the class “includes-modal” into the row settings where you have a modal.

Then add this CSS in your site’s custom CSS:

.includes-modal {
    position: relative;
    z-index: 100;
}

I’m going to brainstorm some ways to check for this so I can automate a long term solution.

Ben

[Kevin]

Kevin

#218047

Hello,

You should be able to just change the amount of columns in that carousel from 1 to 3 to match the other site.

Does that work for you?

-Kevin

[robbie1]

robbie1

#217319

OK thats fixed it.

me NOT thinking like a geek didn’t help:-)

the number of columns wasn’t the only way to specify the number portfolios to be shown

TBH the UX for this is NOT that friendly.

“Choose how many columns are in carousel”
comes first so you assume this is what controls the number of portfolios that are shown

“Choose how many portfolio items are in carousel”
i thought controlled the number of images shown if the portfolio is a slide show.

Can you not add some pop up info boxs to explain what each control does and they interact with each other?
OR a video. Looked for one but couldn’t see any

[Hannah]

Hannah

#217181

Hi Pipa,
In Theme Options > Home Layout > Home Image Menu you can set the number of columns to 4. Are you then just wanting to remove the margin between your columns?
You can reduce the header height from Theme Options > Main Settings > Header Start Height.
Hope that’s helpful!

Hannah

[Anders]

Anders

#217075

Hi,
I’m working on a PC but my client have a Mac and says that the columns do not align properly in the bottom with Safari. This is a screenshotfrom the Mac.

It’s the parallax with five columns on this page.

Is there a way to adjust this?

[Anders]

Anders

#217075

Hi,
I’m working on a PC but my client have a Mac and says that the columns do not align properly in the bottom with Safari. This is a screenshotfrom the Mac.

It’s the parallax with five columns on this page.

Is there a way to adjust this?