Search Results for 'COLUMNS'

[Dillon]

Dillon

#269405

While using Premium Ascend + WooCommerce, when viewing a website’s shop page on a mobile device, the products are displayed in a one row column layout. I would prefer a two row column layout. How would this be achieved?

Thank you.

[Dillon]

Dillon

#269405

While using Premium Ascend + WooCommerce, when viewing a website’s shop page on a mobile device, the products are displayed in a one row column layout. I would prefer a two row column layout. How would this be achieved?

Thank you.

[Karla]

Karla

#269325

Hello Tom,

Disable the Fixed width table cells option on the table block settings so its columns will not shrink together with the screen width. Here’s a screen recording for your reference – https://share.getcloudapp.com/4guPlQW5.

Hope this helps and let us know if we can assist you further.

Regards,
Karla

[mrtwanstall]

mrtwanstall

#269302

Hello,

When using the table block is there a way to add horizontal scroll bar for mobile devices? As it is now the table is too narrow when viewed on mobiles. I have tried to achieve this by adding a class to the table block and used the following css

.mytable {
display: block;
overflow-x: auto;
white-space: nowrap;
}

This doesn’t quite work though as the table content is still squashed together. I want each column to be as wide as it’s contents, and any columns that don’t fit on the screen to be scrollable. Is there any way to do this?

Thank you. 🙂

[mrtwanstall]

mrtwanstall

#269302

Hello,

When using the table block is there a way to add horizontal scroll bar for mobile devices? As it is now the table is too narrow when viewed on mobiles. I have tried to achieve this by adding a class to the table block and used the following css

.mytable {
display: block;
overflow-x: auto;
white-space: nowrap;
}

This doesn’t quite work though as the table content is still squashed together. I want each column to be as wide as it’s contents, and any columns that don’t fit on the screen to be scrollable. Is there any way to do this?

Thank you. 🙂

[philippevg]

philippevg

#269182

Hi Kevin, thanks for replying.

I attached 2 shots to support my description.

In this example I have a row layout with 2 columns. When I set the column layout to “collapse to rows”, the Gutter settings have no effect. I expect the space between the 2 rows to increase/decrease when I change the gutter settings – it doesn’t.

[philippevg]

philippevg

#269119

Hello all!

I just came across something that I think is a bug…?

I created a Row layout with 3 columns, and set the layout to “Collapse to rows”. When I change the Column gutter (which I suppose should be Row gutter), it has no effect at any of the defined gutter margins.

Is this just me, or is it an actual bug?

[philippevg]

philippevg

#269119

Hello all!

I just came across something that I think is a bug…?

I created a Row layout with 3 columns, and set the layout to “Collapse to rows”. When I change the Column gutter (which I suppose should be Row gutter), it has no effect at any of the defined gutter margins.

Is this just me, or is it an actual bug?

[Manon Chiasson]

Manon Chiasson

#269011

Hello,

1st question, love the products, love the premium features. Newbie, working on 1st website.

I have a Table of Content block inside a 2-column Row. ToC part if working as expected. However, I would like to “freeze” the left column or pane such that it’s scrolling behaviour is different than the right column. For now, both columns scroll together. As a reference, I would like to have the scrolling behave as it does here, notice the left and right columns behave differently (not my page, best example I could find): *Login to see link

Appreciate the help.

Tx.

[Manon Chiasson]

Manon Chiasson

#269011

Hello,

1st question, love the products, love the premium features. Newbie, working on 1st website.

I have a Table of Content block inside a 2-column Row. ToC part if working as expected. However, I would like to “freeze” the left column or pane such that it’s scrolling behaviour is different than the right column. For now, both columns scroll together. As a reference, I would like to have the scrolling behave as it does here, notice the left and right columns behave differently (not my page, best example I could find): *Login to see link

Appreciate the help.

Tx.

[Hannah]

Hannah

#268869

Hi Ian,
You can use this css to add consistent spacing in between your list items:

@media (max-width: 768px) {
.wp-block-kadence-iconlist.kt-svg-icon-list-columns-2.kt-svg-icon-list-items_78f300-cb ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap {
    margin: 15px 0px;
}
}

Hope that helps!

Best,
Hannah

[Karla]

Karla

#268856

Hello Marj,

Thank you for reaching out to us and apologies for the delay in getting back to you.

There is no built-in option to change the breakpoint of the Row Layout block. You can, however, add custom CSS code to adjust some of the styles on the breakpoint. For example, if you’re using a 2-column row and you want the columns to break at 1080px, you can add this in the Row Layout block’s Custom CSS:

@media (max-width: 1080px) {
  selector .kt-row-column-wrap.kt-tab-layout-row {
      -webkit-flex-direction: column;
      flex-direction: column;
  }
  selector .kt-row-column-wrap.kt-tab-layout-row>.wp-block-kadence-column {
      -webkit-flex: none;
      flex: none;
      width: 100%;
      margin-right: 0;
  }
  selector .kt-gutter-default>.wp-block-kadence-column {
      margin-bottom: 30px;
  }
}

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

Hope this helps and let us know if we can assist you further.

Regards,
Karla

[Roger Løvendahl]

Roger Løvendahl

#268768

Sure, I can at least try to explain what I did 🙂

I added the Fibosearch widget, and then I added the kadence header-widget in the center column in the main row.

Then, I did as @Karla mentioned:

First, please put the widget header item in a separate column so the total columns of that header row are 3 – https://share.getcloudapp.com/NQu7gAdE.

Then I added this little bit of “tweeked” CSS from hers.

	@media only screen and (min-width: 1024px) {
.site-main-header-inner-wrap {
    grid-template-columns: 430px 43% auto !important;
}
}
.site-header-main-section-center .header-widget-area-inner {
    width: 100% !important; 
}
.dgwt-wcas-search-wrapp {
    max-width: 100% !important;
}

aside.widget-area.site-header-item.site-header-focus-item.header-widget1.header-widget-lstyle-plain {
    width: 100%;
}

The grid-template-columns: 430px 43% auto !important; says that my first column always should have a fixed with of 430px, it fit’s to how much space my menu elements take up of the header.
The I added that the search-bar itself should use 43% of what’s left, and the auto-part means that my cart-icon and account-icon can use up what’s left.

I don’t think this is what a real web-developer would have done, and it’s not perfect, but for me it worked out ok – and I don’t know how many hours I spent trying to accomplish this, so when something actually looked OK, I went with it..

Good luck 🙂

• This reply was modified 4 years, 5 months ago by Roger Løvendahl.

[Roger Løvendahl]

Roger Løvendahl

#268679

Thanks, but I can not get it to work.

I added this css to code snippets:

/* SEARCH BAR */
.site-main-header-inner-wrap {
grid-template-columns: auto 60% auto;
}
.site-header-main-section-center .header-widget-area-inner {
width: 100%;
}
.dgwt-wcas-search-wrapp {
max-width: 100%;
}

Then I placed the widgets in main row: Logo – Search Bar – Cart trigger

No change.

I am using the FiboSearch widget as a widget in the center column of the main row.
Settings for FiboSearch is set to width: 100%

• This reply was modified 4 years, 5 months ago by Roger Løvendahl.

[Karla]

Karla

#268665

Hello,

First, please put the widget header item in a separate column so the total columns of that header row are 3 – https://share.getcloudapp.com/NQu7gAdE.

Then, add this in Customizer > Additional CSS:

.site-main-header-inner-wrap {
    grid-template-columns: auto 60% auto;
}
.site-header-main-section-center .header-widget-area-inner {
    width: 100%;
}
.dgwt-wcas-search-wrapp {
    max-width: 100%;
}

Regards,
Karla

[Kevin]

Kevin

#268657

Hey Grace,

You can adjust the amount of columns visible in mobile within the Testimonial Block Settings. Take a look at this video to see where to find the setting:
https://share.getcloudapp.com/bLudjxp7

Does that work for you?

Thanks,
Kevin

[Roger Løvendahl]

Roger Løvendahl

#268622

Hi, I am using Fibosearch, I want the searchfield to be as wide as possible.

It’s implemented in the header either via a shortcode or via a widget they provide.
But the header is limiting the length of the input field.

Is there a way for me to override the other columns (which are blank anyway), so I can do something like this to make it responsive:

.class {
width: 100%
resize: vertical;
}

Here is a staging site *Login to see link

[Roger Løvendahl]

Roger Løvendahl

#268622

Hi, I am using Fibosearch, I want the searchfield to be as wide as possible.

It’s implemented in the header either via a shortcode or via a widget they provide.
But the header is limiting the length of the input field.

Is there a way for me to override the other columns (which are blank anyway), so I can do something like this to make it responsive:

.class {
width: 100%
resize: vertical;
}

Here is a staging site *Login to see link

[Jeremy]

Jeremy

#268555

I am using the staff short code

[staff_posts ratio=square columns=3 items=30 link=true]

on the team page and when someone views the page with the browser open to 1800px or wider it is showing 4 columns. which would not be an issue but if they then resize the browser smaller the staff items overlap.

Jeremy

[Jeremy]

Jeremy

#268555

I am using the staff short code

[staff_posts ratio=square columns=3 items=30 link=true]

on the team page and when someone views the page with the browser open to 1800px or wider it is showing 4 columns. which would not be an issue but if they then resize the browser smaller the staff items overlap.

Jeremy

[Karla]

Karla

#268519

Hello,

Apologies for the delay in getting back to you!

Just to confirm – do you want the product images to follow the main image width you’ve set? If so, kindly add this in Customizer > Additional CSS so that the single product images will not occupy the full width of its columns:

.woocommerce div.product div.images img {
    width: auto;
    margin: 0 auto;
}

This is how the image should look like after applying the changes – https://share.getcloudapp.com/NQu7eOkB. Please make sure you purge any cache you have after saving changes so they will be applied right away.

Hope this helps and let us know if we can assist you further.

Regards,
Karla

[Karla]

Karla

#268517

Hello,

Thanks for reaching out.

To show one product column per row in mobile views, go to Customizer > WooCommerce > Product Catalog, scroll down until you see the Mobile Columns Layout option, and select ONE COLUMN– https://share.getcloudapp.com/yAu04Xg8.

Best Regards,
Karla

[john-0313]

john-0313

#268512

This reply has been marked as private.

[Stefan Lindblad]

Stefan Lindblad

#268438

Hi again,

This was an odd bug.

I created an additional Row layout, 3 columns just to try seeing how using an Advanced Heading would look like, if any difference occurs. And yes, it did. It looked suddenly aligned as expected. So therefore I deleted my temporary/additional row layout used for testing the H2 Advanced heading.

By going back to the original H2 heading I changed it by clicking WP title block icon and changed it to an Advanced Heading. First no change, but I switched back and for WP title and advanced heading, and now it works as expected.

I now have an advanced heading H2 in a row layout with another H3 heading ( H3 is not an advanced heading) and paragraph text.

It is all okay now, but o was it annoying. Was at it banging my palm on my head for a better 30 minutes! 🙂

Best
Stefan L

• This reply was modified 4 years, 6 months ago by Stefan Lindblad.

[djbeyhan]

djbeyhan

#268377

Hi Chris,

Yeah I’m definately careful about that DOM size. I didn’t use row inside rows or didn’t even used much columns. Instead of multiple columns, I used just one column and spaced between all child elements on most of them.

If you see the warning above, it is about:

span.kadence-svg-iconset
wp-custom-logo wp-embed-responsive…

SO I think it is about Kadence template or Kadence Blocks

[Karla]

Karla

#268127

Hello,

Thank you for reaching out.

The Ascend theme uses “col” classes that have pre-defined percentage widths for the main content and sidebar columns. If you want to adjust their widths, you can add this in Theme Options > Custom CSS:

@media (min-width: 1200px) {
    .main.kt-sidebar {
        width: 77%;
    }
    aside.kad-sidebar {
        width: 23%;
    }
}

You may also adjust the width values based on your preference.

Hope this helps!

Regards,
Karla