Search Results for 'COLUMNS'

[Leon]

Leon

#247846

Ideally I would want column count to adjust to window size. But if that’s too complex, then just set column count to 10.

Yes, I am referring to the logo. I would like to use a different one with less height.

My end goal is to display as many items as possible on the shop page, and minimize the dead space.
1. More columns
2. Thin logo image.
3. Remove padding between columns & rows

[Hannah]

Hannah

#247845

If you want more than 6 columns you would need to adjust this with css. How many columns are you wanting?

I’m not seeing an image header for your shop, just your logo. Is that what you mean? This can be removed or replaced with css.

Hannah

[Leon]

Leon

#247830

That worked! but now I want more than 6 columns in the shop. How would I do that?
Also, how do I replace or remove the image header for the shop page only?

[Donna]

Donna

#247778

I’d like each staff members’ photo and text to be in rows instead of columns. Can this be done using the staff_post shortcode?
For posts, I do this with the shortcode [blog_posts type=normal items=”9″ orderby=”date” cat=outings] on one of my other web pages.
Thanks for any advice you can give me.
-Donna

[Donna]

Donna

#247778

I’d like each staff members’ photo and text to be in rows instead of columns. Can this be done using the staff_post shortcode?
For posts, I do this with the shortcode [blog_posts type=normal items=”9″ orderby=”date” cat=outings] on one of my other web pages.
Thanks for any advice you can give me.
-Donna

[Brandy]

Brandy

#247474

Hi Team Kadence!

This is maybe an odd request but wanted to check here before I get too far in the process. Is there any easy way to sort the columns vertically instead of horizontally?

I’m thinking I might need to make a special template to do this but wanted to check first if I’m over thinking it. 🙂

Right now, we sort by title and it looks like this:

First Second Third
Fourth Fifth Sixth

And what we want is:

First Fourth
Second Fifth
Third Sixth

Thanks for any insight on this!

[Brandy]

Brandy

#247474

Hi Team Kadence!

This is maybe an odd request but wanted to check here before I get too far in the process. Is there any easy way to sort the columns vertically instead of horizontally?

I’m thinking I might need to make a special template to do this but wanted to check first if I’m over thinking it. 🙂

Right now, we sort by title and it looks like this:

First Second Third
Fourth Fifth Sixth

And what we want is:

First Fourth
Second Fifth
Third Sixth

Thanks for any insight on this!

[Ben Ritner]

Ben Ritner

#247381

Looks like you are hitting this issue: https://stackoverflow.com/questions/9983520/webkit-animation-is-leaving-junk-pixels-behind-on-the-screen

For performance reasons, WebKit only repaints those part of a page that it thinks might have changed. However, the iOS (pre-7) Safari implementation of border radius anti-aliases a few pixels beyond the calculated dimensions of a box. Since WebKit doesn’t know about these pixels, they don’t get redrawn; instead, they are left behind and build up on each animation frame.

Here is a workaround:

.portfolio-content .kt-has-2-columns .inner-column-1 .kt-inside-inner-col:after{
    content:'';
    width:100%;
    height: 1px;
    background: rgba(86,86,90,0.5);
    position: absolute;
    left: 0;
    bottom: -1px;
}
.portfolio-content .kt-has-2-columns .inner-column-1 .kt-inside-inner-col {
    position:relative;
    border-color:transparent;
}

Ben

[Hannah]

Hannah

#247360

Hey Robin,
That can be enabled for the home slider (theme options > home slider) or in your header when using the Featured Page Template. Or you can add it as a shortcode like this: [gallery ids="351,237,236,139" type="carousel" columns="4" lightboxsize="large"]
Or, if using the block editor and Kadence Blocks you can use the Advanced Gallery Block. See here: https://www.kadenceblocks.com/custom-blocks/advanced-gallery/
Hope that’s helpful!

Hannah

[Sam Macnamara]

Sam Macnamara

#247349

Hi, just teaching myself Blocks and I just cannot find a way to add padding to individual columns. I.E if I start a 2 column block I just can’t see a way to add padding to one column not both

I mean if I wanted to create something like the sample in the image where only the right-hand column needs padding. I can see padding & margin options but no way to control them individually??

One other thing (which is just me being fussy lol) is it possible to create a link to a specific tab on a page? So say if I wanted a link to open “DIGITAL” on this page? *Login to see link

Thank you
Sam

[Sam Macnamara]

Sam Macnamara

#247349

Hi, just teaching myself Blocks and I just cannot find a way to add padding to individual columns. I.E if I start a 2 column block I just can’t see a way to add padding to one column not both

I mean if I wanted to create something like the sample in the image where only the right-hand column needs padding. I can see padding & margin options but no way to control them individually??

One other thing (which is just me being fussy lol) is it possible to create a link to a specific tab on a page? So say if I wanted a link to open “DIGITAL” on this page? *Login to see link

Thank you
Sam

[Hannah]

Hannah

#247328

A sidebar is different from blocks or columns. Think of a blog post, for example. People do not want to scroll through typical sidebar content (recent pots, ads, contact info, etc) before getting to the actual post content. I would be happy to get your menu styled as you’re wanting if you want to try the route I suggested previously.

Hannah

[Ben Ritner]

Ben Ritner

#247034

Hey Susanne,

I think what might be best is if I get a really good understanding of what you want, then create it for you and make sure that is in fact what you want and then I can show you how to create it that way there is less back and forth.

If you have a mockup of how you want this to look on desktop and mobile then that would make it really easy for me to create for you.

If you don’t, then I just need some clarification, I see that you want all three columns to be equal height, and on tablet as those columns get squeezed together you want them to continue to be equal height. On mobile are you wanting them to break into rows, or are you wanting to continue with columns ( I really don’t recommend that). If you want them to break down into rows at that point does it matter if the height of each is the same or should they just be the height of the content?

Ben

[Hannah]

Hannah

#246937

Hey,
See this post: https://www.kadencewp.com/knowledge-base/two-product-columns-in-mobile/
Hope it’s helpful!

Hannah

[SJNBham]

SJNBham

#246933

Thanks for the workarounds Ben! Here’s the final CSS we’re using:

/*Posts block layouts fix*/
.wp-block-kadence-postgrid * {
    box-sizing: border-box;
}

/*IE11 fix for posts block grid layout*/
@media (min-width: 1500px) {
	.kt-post-grid-wrap[data-columns-xxl="4"]>.kt-blocks-post-grid-item:nth-child(4n+5) {
clear: both;
	}
}

[Giuseppina]

Giuseppina

#246930

Is there a way to set woocommerce categories products on 2 columns in mobile view?
Thank you!

[Giuseppina]

Giuseppina

#246930

Is there a way to set woocommerce categories products on 2 columns in mobile view?
Thank you!

[Ben Ritner]

Ben Ritner

#246826

Yeah IE11 has been dropped by many huge web influencers, even large hosts like GoDaddy.

I suggest if you need IE11 support use the masonry layout, which the javascript in masonry should pull it together.

I plan on phasing IE11 support out later this summer.

This css below should make them stay in 4 on IE11.

@media (min-width: 1500px) {
.kt-post-grid-wrap[data-columns-xxl="4"]>.kt-blocks-post-grid-item:nth-child(4n+5) {
    clear: both;
}
}

[Hannah]

Hannah

#246788

Hey,
That’s not something you could do with css unfortunately. One workaround would be to use a plugin that allows you to create custom product pages like https://www.kadencewp.com/product/kadence-woo-template-builder/ or https://www.kadencewp.com/product/kadence-woocommerce-elementor/ .
Then you can use a shortcode to display a product carousel. Like this: [carousel type="product" items="10" columns="4" sscol="2" cat="cat-slug"]
Would this work for you?

Hannah

[Hannah]

Hannah

#246772

Hi Daniel,
There isn’t a built-in function for this. One workaround would be to create three categories, one for your top posts, one for your featured post, and the other for your bottom posts. Then you can display all your posts on one page using multiple shortcodes like this:
[blog_grid orderby=date items=4 columns=4 cat=CAT-SLUG1]
[blog_posts items=1 word_count=30 cat=SLUG2]
[blog_grid orderby=date items=8 columns=4 cat=CAT-SLUG3]
Would this work for you?

Hannah

[John]

John

#246726

This reply has been marked as private.

[SJNBham]

SJNBham

#246715

This reply has been marked as private.

[Ben Ritner]

Ben Ritner

#246697

maybe it didn’t reach you

Nope, that is not an email address to use, it’s for form notifications only. Please post logins here. 🙂

It appears the current news page is gone? I created a test page and didn’t have any issues using the masonry layout. Can you please recreate your current news page how you had it before?

Also please remove this this css from your child theme:

/* Mobile portrait (and larger)*/
.kt-post-grid-wrap[data-columns-ss="1"]>.kt-blocks-post-grid-item, .kt-post-grid-wrap[data-columns-ss="1"]>.kt-post-masonry-item {
    width: calc(100% - 30px) !important;
}

/* Tablet portrait (and larger)*/
@media (min-width: 768px) {
	.kt-post-grid-wrap[data-columns-sm="2"]>.kt-blocks-post-grid-item, .kt-post-grid-wrap[data-columns-sm="2"]>.kt-post-masonry-item {
    	width: calc(50% - 30px) !important;
       }
}

/* Tablet-landscape (and larger)*/
@media (min-width: 992px) {
    .kt-post-grid-wrap[data-columns-md="3"] > .kt-blocks-post-grid-item, .kt-post-grid-wrap[data-columns-md="3"] > .kt-post-masonry-item  {
    		width: calc(33.33% - 30px) !important;
	} 
}

Ben

[Hannah]

Hannah

#246627

Hey,
Do you mean that you’re wanting three single columns? You can create this look using an image widget, visual editor widget, then social links widget. You can add all three widgets to a single footer column then use css to stretch them full width and center them. I provided css in your other thread for changing colors of the social icons.

Hannah