Search Results for 'COLUMNS'

[phil2]

phil2

#201900

Thanks again, Ben. I can see how using an iframe is definitely setting up difficulties.

It does give such a better user-experience than using an image when demonstrating websites, though.
I have used your code above and combined it with a media-query to give the combination of a decent full screen display on a larger display, then collabsing down without the white-space on tablet and phone.

So the carousel at the bottom of the homepage now shows a “list” of recent websites.
Click on any of the images there and you go through to a page about that website. Example. The display shows all the movement that is happening on the website itself – which I can’t show with an image.
On phone and tablet you still get a decent rendition of the target website.

I now need to reverse the order of the columns on tablet and phone so that the description appears above the iframe, but that’s another piece of work!
Very many thanks for all your help and advice with this.
Kind regards,
Phil.

[administrator2]

administrator2

#201726

My site is running Virtue Premium 3.4.0 (I know it’s old – I’m taking over for someone). Ran the upgrade to 4.7.8, but once complete, any pages that have SiteOrigin PageBuilder rows set to FULL WIDTH or FULL WIDTH STRETCHED just disappear. Specifically, the row gets a style=”visibility:hidden” added inline with the div tag. If I change the row to STANDARD or FULL WIDTH STRETCHED PADDED, they are visible again.

No row class or id or cell class or CSS styles applied.
The page is set to use the full width template.

In 3.4.0, everything works fine. Rows extend full width, with cells/columns using standard width, creating alternating rows with different background colors going across the entire page and the content constrained.

Once I upgrade, all full width rows are hidden, producing a page with a header, title and footer, but no visible content. I’ve restored to backup and re-applied the upgrade several times, each with the same result. Now I’m back to the old version again.

Example page in the old version is here: *Login to see link

Any ideas what would cause this?

[administrator2]

administrator2

#201726

My site is running Virtue Premium 3.4.0 (I know it’s old – I’m taking over for someone). Ran the upgrade to 4.7.8, but once complete, any pages that have SiteOrigin PageBuilder rows set to FULL WIDTH or FULL WIDTH STRETCHED just disappear. Specifically, the row gets a style=”visibility:hidden” added inline with the div tag. If I change the row to STANDARD or FULL WIDTH STRETCHED PADDED, they are visible again.

No row class or id or cell class or CSS styles applied.
The page is set to use the full width template.

In 3.4.0, everything works fine. Rows extend full width, with cells/columns using standard width, creating alternating rows with different background colors going across the entire page and the content constrained.

Once I upgrade, all full width rows are hidden, producing a page with a header, title and footer, but no visible content. I’ve restored to backup and re-applied the upgrade several times, each with the same result. Now I’m back to the old version again.

Example page in the old version is here: *Login to see link

Any ideas what would cause this?

[Reva]

Reva

#201570

This reply has been marked as private.

[Hannah]

Hannah

#201393

Hey Adrian,
You can use a shortcode like this:
[portfolio_posts orderby=date style="mosaic" columns=4 items=200 lightbox=true showtypes=true filter="true"]
Just paste that into the content are of your static homepage.
Hope that helps!

Hannah

[4472apps]

4472apps

#201376

Hi,

*Login to see link
You’ll see I have setup with 6 Home page – Home image menu.

I have Choose how many columns in each row = 4
and have 6 image menu items, so rightly is presents them as 2 rows. Two of these are testing menu items to illustrate the issue.

Each image menu item has a nice vertical white space between each column, but has no horizontal white space between each row. I think this visually confuses the user as to where each item starts and ends

I’d like it so that the same width of vertical white space is used in the horizontal, between the rows. That way it would look like a balanced grid and be similar to a portfolio grid for style.

Can you advise how I can set that up? Thanks.

[4472apps]

4472apps

#201376

Hi,

*Login to see link
You’ll see I have setup with 6 Home page – Home image menu.

I have Choose how many columns in each row = 4
and have 6 image menu items, so rightly is presents them as 2 rows. Two of these are testing menu items to illustrate the issue.

Each image menu item has a nice vertical white space between each column, but has no horizontal white space between each row. I think this visually confuses the user as to where each item starts and ends

I’d like it so that the same width of vertical white space is used in the horizontal, between the rows. That way it would look like a balanced grid and be similar to a portfolio grid for style.

Can you advise how I can set that up? Thanks.

[4472apps]

4472apps

#201375

Hi,

*Login to see link
uses an image menu on the home page, 4 boxes in a row.
OUR BOOKS, WORD SEARCH, SCRAMBLE, SUDOKU

The font looks fine on a computer and on my iPhone, but on a tablet the word SCRAMBLE does not fit in the box, kind of displays as SCRAMBL

You can replicate this using a chrome browser or safari on a pc by making the browser windows smaller. If you make the browser too narrow, the 4boxes in a row become 2 rows and the text fits in each box fine. But if you make the browser medium narrow you’ll see the issue.

Or it can be replicated by setting Choose how many columns in each row = 6, so it uses smaller boxes then the text doesn’t fit in.

I’ve looked around in the theme options but can’t see a place to set the font size or auto fit option.

Thanks for your help.

[4472apps]

4472apps

#201375

Hi,

*Login to see link
uses an image menu on the home page, 4 boxes in a row.
OUR BOOKS, WORD SEARCH, SCRAMBLE, SUDOKU

The font looks fine on a computer and on my iPhone, but on a tablet the word SCRAMBLE does not fit in the box, kind of displays as SCRAMBL

You can replicate this using a chrome browser or safari on a pc by making the browser windows smaller. If you make the browser too narrow, the 4boxes in a row become 2 rows and the text fits in each box fine. But if you make the browser medium narrow you’ll see the issue.

Or it can be replicated by setting Choose how many columns in each row = 6, so it uses smaller boxes then the text doesn’t fit in.

I’ve looked around in the theme options but can’t see a place to set the font size or auto fit option.

Thanks for your help.

[Hannah]

Hannah

#201006

You can use both actually! Your static homepage (where you’re using siteorigin) is enabled on the homepage via page content in the homepage layout manager. Then the portfolio carousel can separately be enabled. If you’re wanting the portfolio carousel mixed into your page content you can use this shortcode: [carousel type=portfolio orderby=date columns=4 items=8 speed=9000 scroll=all] Just paste that into a text widget within your site origin editor.
Hope that’s helpful!

Hannah

[Sissi]

Sissi

#200942

So the dropdown does not work with elementor BUT the shortcodes for themeselves work. So I am searching for a complete list of all shortcodes with all editing options. Especially the text editing shortcodes like columns or for example:

[kt_typed first_sentence=”erster text” second_sentence=”zweiter text” startdelay=”100″ loop=”true”]

Where can I find the document about this?

[Sissi]

Sissi

#200942

So the dropdown does not work with elementor BUT the shortcodes for themeselves work. So I am searching for a complete list of all shortcodes with all editing options. Especially the text editing shortcodes like columns or for example:

[kt_typed first_sentence=”erster text” second_sentence=”zweiter text” startdelay=”100″ loop=”true”]

Where can I find the document about this?

[Jacqueline]

Jacqueline

#200915

Hi Ben,

Thanks for reply – your css slowed it down, but I want to better understand your column idea:
“Then add your image in one and text in the other column. In each widget you can set animation options so for example in your image widget you can set the animation setting and duration.”

If not using the split image widget but using 2 columns – What kind of image widget are you referring to that has animation and duration settings?

Thanks,
Jackie

[Hannah]

Hannah

#200890

1. Try adding this to your custom css box in Theme Options > Advanced Settings:

@media (max-width: 768px) {
.panel-widget-style.panel-widget-style-for-w5b85627cdf342-1-1-0, div#pgc-w5b85627cdf342-0-0 {
    display: none;
}
#pl-w5b85627cdf2e9 .panel-grid-cell {
    margin: 0;
}
}

2&3. When editing a row in page builder, under the Layout tab you should see “Collapse Behavior” and “Collapse Order” dropdowns. That will adjust how your columns collapse in mobile.

4. You can change the color with this css:

@media (max-width: 768px) {
div#pgc-11-1-0 p, div#pgc-11-1-0 h2, div#pgc-11-1-0 h5 {
    color: red !important;
}
}

Hope that’s helpful!

Hannah

[Ben Ritner]

Ben Ritner

#200879

Hey,
You can add this css:

.kt-animate-fade-in-left, .kt-animate-fade-in-right {
    transition-duration: 2s !important;
}

Which will mostly work. For better control use two columns instead of the split content widget. Then add your image in one and text in the other column. In each widget you can set animation options so for example in your image widget you can set the animation setting and duration.

Ben

[christian.toller]

christian.toller

#200857

Thanks Ben!

I can’t figure out the image size issue. Tried all sorts of combinations of theme settings, but in the end they seem to be ignored.
Please note that I use shortcodes like this to show the sub-categories
[product_categories columns=”3″ hide_empty=”0″ number=”0″ parent=”164″]
The same issue occurs on archive pages that show products. Here I use the Widget “Woo Archive: Main Loop” in the corresponding Woo Template.

Any idea how to get square boxes with white background and have the product/category picture fit inside?
If you want credentials for the development site to take a look, just let me know…

The other topics are sorted out:
The count is now hidden, using your CSS example.
And I decided to write a shortcode that returns the current category and the base category (which has no parent-category).
The code is added below for those who are interested. Just add that to your theme’s functions.php.
If you add the shortcode [archive_header type=”current”] on an archive page (or template), you’ll get the current category.
[archive_header type=”base”] gives you the base category.

	function archive_header_function($atts)
	{
		$atts = shortcode_atts(
			array(
				'type' => 'current',
			), $atts, 'archive_header'
		);
		$type = $atts['type'];
		global $post;
		ob_start();
		$currentCat = get_queried_object();
		$parentcats = get_ancestors($currentCat->term_id, 'product_cat');
		if ( $parentcats ) { 
			foreach($parentcats as $parent) {
				$cat = get_term_by( 'id', $parent, 'product_cat' );
				if ( $cat->parent == 0 ) {
					$baseCat = $cat;
				}
			}
		}
		
		if($type == "current") {
			echo $currentCat->name;
		}
		
		if($type == "base" AND isset($baseCat)) {
			echo $baseCat->name;
		}

		return ob_get_clean();
	}
	add_shortcode('archive_header','archive_header_function');

[jaryszek]

jaryszek

#200607

Hi, i want to add 3 images in 3 columns.

Something like here:
*Login to see link

These images are not good quality – not sharp. But when you go into post it is ok – very sharp.
In page inspector in post there is 850 x 400 image sizes.

In main page there is 630 x 420. How to have these images sharp for post and for 3 columns ?

Best,
Luke

[jaryszek]

jaryszek

#200607

Hi, i want to add 3 images in 3 columns.

Something like here:
*Login to see link

These images are not good quality – not sharp. But when you go into post it is ok – very sharp.
In page inspector in post there is 850 x 400 image sizes.

In main page there is 630 x 420. How to have these images sharp for post and for 3 columns ?

Best,
Luke

[Hannah]

Hannah

#200590

Hey,
We created a plugin that allows you to customize the shop page using Elementor. See here: https://www.kadencewp.com/product/kadence-woocommerce-elementor/
You could also create a page using Elementor and then add your products using a shortcode like this: [products limit="24" columns="4"]
Hope that helps!

Hannah

[Hannah]

Hannah

#200313

Hey Andrea,
Try adding this to your custom css box in Theme Options > Advanced Settings:

.woocommerce-product-gallery img {
    display: flex;
    width: 80%;
    float: right;
}
.woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
    width: 100%;
    float: none;
}
ol.flex-control-nav.flex-control-thumbs {
    width: 20%;
    float: none;
    order: -1;
    position: absolute;
    top: 0;
}

It is important to note that your thumbnails will overflow if there are too many, because they won’t stack like they would if they were under the main image and there is not a built-in feature to slide the thumbnails like there would be if you were to use a plugin like the Kadence Woo Extras plugin. So you would just need to limit your product thumbnails.
Hope this is helpful!

Hannah

[Kevin]

Kevin

#200297

1. Here is some CSS that will reduce the size of the info boxes. Try adding to Theme Options> Custom CSS:

.page-id-8 .kad-info-box {
    padding: 0;
}

2. As for getting them to go into two columns in mobile, I’m not sure. I’ll flag this for a developer followup so that he can let us know the best route.

-Kevin

[Kevin]

Kevin

#200295

Hello,

I’m not seeing any info box widgets on that page. Are you referring tot he split content?

1. You could adjust the width by adding the widget into a 3 column page builder row. Adjust the two outer columns to be something like 10%, and then the middle to 80%. If you want more right of left spacing, then you should be able to change the percentages as needed.

2. Try adding this CSS to Theme Options> Custom CSS and let me know if it works for you:

@media (max-width: 992px) {
.page-id-2 .content-ktsi-left {
    width: 50%;
    float: left;
}

.page-id-2 .kt-si-imagecol.img-ktsi-left {
    width: 50%;
    float: left;
    }
}

Let me know if this is what you’re after.

-Kevin

[Jesse]

Jesse

#200289

Hi,

I am trying to do 2 things:
1.) I need the info boxes height and width to be smaller. Is there a way I can customize that widget?
2.) When viewed on mobile, is there a way that I have have these info boxes stay in 2 columns rather than adjust to 1 column?

My site is http://www.premiercabinetsinc.com
Pswd is Premier2018

[Jesse]

Jesse

#200289

Hi,

I am trying to do 2 things:
1.) I need the info boxes height and width to be smaller. Is there a way I can customize that widget?
2.) When viewed on mobile, is there a way that I have have these info boxes stay in 2 columns rather than adjust to 1 column?

My site is http://www.premiercabinetsinc.com
Pswd is Premier2018

[Ben Ritner]

Ben Ritner

#200281

This is because of how floats work in html. the image is floated left by default which is fine and allows for wrapping but it doesn’t work for block items because they do not clear the float so even though the content is to the right of the float the container is not.

You can set the content to work more like columns and then it won’t wrap but would make the border line up with css like this:

.grid_item.staff_item .staff-entry-content {
    float:left;
    width: 70%;
}
.grid_item.staff_item:after {
    content: '';
    clear: both;
    display: table;
}

Ben

[Hannah]

Hannah

#200267

Hey,
One option is to add your kadence slider shortcode right into the content area of your testimonial grid page. Then the slider will show above the testimonial grid, but below your title. If you want the slider to show above your title, you can use the featured template and add your testimonial grid as a shortcode like this: [testimonial_posts orderby=date items=4 columns=4 cat=photos]
Hope that’s helpful!

Hannah