Search Results for 'COLUMNS'

[Ben Ritner]

Ben Ritner

#168739

Pagebuilder adds margin to separate each widget in columns. You have to use css to remove that. Then in your widget where you’ve set the background to gray you need to add padding to the top and bottom in the same area where you set the background.
So add this css:

#pl-2748 #pgc-2748-1-0 .so-panel, #pl-2748 #pgc-2748-1-0 .so-panel h2 {
    margin: 0;
}

then add your padding.

Ben

[Ben Ritner]

Ben Ritner

#168738

Your images are forced so small that the padding around them is making the size 0. You can remove the padding with css like this:

img.alignnone {
    padding: 0;
}

I suggest not having so many columns on mobile.

Ben

[Pipa]

Pipa

#168623

Hi,

I am rebuilding a site. On the previous version i used the virtue image to build brands/ logos directory but because it is a long directory and i am using 8 columns, the virtue image was leaving my page frozen.

On the new one, I built a similar page using a visual editor and the virtue shortcode for tabs 8×1, multiple times; but when i open the page via mobile, the images do not display.

Is there a tip/ css code to help in order to have the pictures displayed on mobile as well? does not need to be the 8 in line if it isn’t possible, but at least two per line or even one picture per line?

Many thanks

[Pipa]

Pipa

#168623

Hi,

I am rebuilding a site. On the previous version i used the virtue image to build brands/ logos directory but because it is a long directory and i am using 8 columns, the virtue image was leaving my page frozen.

On the new one, I built a similar page using a visual editor and the virtue shortcode for tabs 8×1, multiple times; but when i open the page via mobile, the images do not display.

Is there a tip/ css code to help in order to have the pictures displayed on mobile as well? does not need to be the 8 in line if it isn’t possible, but at least two per line or even one picture per line?

Many thanks

[George]

George

#168497

I need to to do following: *Login to see link
1) Center the Search box (Header) on smaller devices – I tried several things…
2) Make the search box a bit wider
3) Put some white space between the News and Audiences sections (See image)
4) Make the Width of the footer smaller, so the columns are closer together (See Image)

*Login to see link

Thanks a bunch,
Olympia

[George]

George

#168497

I need to to do following: *Login to see link
1) Center the Search box (Header) on smaller devices – I tried several things…
2) Make the search box a bit wider
3) Put some white space between the News and Audiences sections (See image)
4) Make the Width of the footer smaller, so the columns are closer together (See Image)

*Login to see link

Thanks a bunch,
Olympia

[Kevin]

Kevin

#168323

I suggest that rather than add the images and text in separate columns, just create a row for each person, with the image and text in their respective columns.

So each person will have their own page builder row, with the text and images pertaining to each person will be next to each other in a two column layout.

Hopefully that makes sense!

-Kevin

[Ben Ritner]

Ben Ritner

#168284

ok, I see you are replying but you’re showing all of your pages shortcodes which has more than 5 links and looks like “spam” to the forums filter. so the replay is going into the un-approved.

Here is your shortcode example:

[img_menu image="https://www.myristolcanada.ca/wp-content/uploads/2017/11/myristol-equine.jpg" columns="2" title="Myristol Equine" link="https://www.myristolcanada.ca/products/myristol-equine/"]

And for ascend it should be:

[img_menu image_url="https://www.myristolcanada.ca/wp-content/uploads/2017/11/myristol-equine.jpg" columns="2" title="Myristol Equine" link="https://www.myristolcanada.ca/products/myristol-equine/"]

Ben

[Milos]

Milos

#168155

Well I was hoping photos can show as a mosaic on desktop and as a regular gallery on the mobile phone – I mean in the same page or post.
If not, can you just tell me how to apply the above mentioned ‘two columns’ code exclusively to home page for mobile phone.

[Kevin]

Kevin

#168018

Hey Michael,

In your case, I think that you could accomplish this using page builder. Here is a great place to start if you’re not familiar with the plugin:
https://www.kadencewp.com/using-page-builder/

You will need to decide the initial amount of columns that your page builder row will have, then within each column, add the required amount of additional sub-columns you need to achieve your layout.

Hopefully that makes sense. Let me know if I can explain better.

-Kevin

[Ben Ritner]

Ben Ritner

#168017

Hey,
Pagebuilder makes this easy.

But you can also just do this with basic html:

[columns][span6]
Upper left half content
<div class="row"><div class="col-md-6">
Left content below left half. Spanning 1st 1/4 of the page with.
</div><div class="col-md-6">
Right content below left half. Spanning 2nd 1/4 of the page with.
</div></div>
[/span6][span6]
Upper right half content
<div class="row"><div class="col-md-6">
Left content below right half. Spanning 3rd 1/4 of the page with.
</div><div class="col-md-6">
Right content below right half. Spanning 4th 1/4 of the page with.
</div></div>
[/span6][/columns]

Ben

[Michael]

Michael

#168015

Hi Kadence,
I’m try to put columns inside columns and it’s making a mess and simply not working. It appears that the columns shortcode can’t handle nesting. Any ideas how to proceed?

What I want to do is described roughly below in shortcode. The nesting is important because on mobile (where everything folds vertically), I need the 1st two quarters to sit just below the left half. If I simply do a 2 column split followed by a 4 column split, on mobile all the 4 quarters follow AFTER the 2 halves; which is not what I want.

[columns][span6]
Upper left half content
[columns][span3]
Left content below left half. Spanning 1st 1/4 of the page with.
[/span3][span3]
Right content below left half. Spanning 2nd 1/4 of the page with.
[/span3][/columns]
[/span6][span6]
Upper right half content
[columns][span3]
Left content below right half. Spanning 3rd 1/4 of the page with.
[/span3][span3]
Right content below right half. Spanning 4th 1/4 of the page with.
[/span3][/columns]
[/span6][/columns]

Thanks,
Michael

[Michael]

Michael

#168015

Hi Kadence,
I’m try to put columns inside columns and it’s making a mess and simply not working. It appears that the columns shortcode can’t handle nesting. Any ideas how to proceed?

What I want to do is described roughly below in shortcode. The nesting is important because on mobile (where everything folds vertically), I need the 1st two quarters to sit just below the left half. If I simply do a 2 column split followed by a 4 column split, on mobile all the 4 quarters follow AFTER the 2 halves; which is not what I want.

[columns][span6]
Upper left half content
[columns][span3]
Left content below left half. Spanning 1st 1/4 of the page with.
[/span3][span3]
Right content below left half. Spanning 2nd 1/4 of the page with.
[/span3][/columns]
[/span6][span6]
Upper right half content
[columns][span3]
Left content below right half. Spanning 3rd 1/4 of the page with.
[/span3][span3]
Right content below right half. Spanning 4th 1/4 of the page with.
[/span3][/columns]
[/span6][/columns]

Thanks,
Michael

[Ben Ritner]

Ben Ritner

#168007

ok, your icon issue was caused because you have turned on minimal icons and the google and youtube icon are not part of that.

You seem to be using 3 different optimization plugins. all doing similar things. I strongly advise against that.

The testimonial shortcode is a bug, the columns aren’t going through. I will update the theme with a fix for this.

Ben

[Bob]

Bob

#167993

This reply has been marked as private.

[Gabi]

Gabi

#167864

Hi,

after the last update of Virtue Premium theme I am having issues with carousel on my home page. Here is the link . The carousel on small mobile screens is displaying two products instead of one, like was before the update. The carousel is buili with shorcode: [carousel type=featured-products orderby=date columns=4 items=7 scroll=1 speed=250000] . Could you please see what is the problem, thanks in advance, Gabi

[Gabi]

Gabi

#167864

Hi,

after the last update of Virtue Premium theme I am having issues with carousel on my home page. Here is the link . The carousel on small mobile screens is displaying two products instead of one, like was before the update. The carousel is buili with shorcode: [carousel type=featured-products orderby=date columns=4 items=7 scroll=1 speed=250000] . Could you please see what is the problem, thanks in advance, Gabi

[Ben Ritner]

Ben Ritner

#167829

Hey
To add some more information.

The default column setting refers to the 1140px layout that bootstrap css framework uses.

In ascend you can increase that max width from 1140 to 1440 or 1740 or none

This is the “Site Layout Max-Width” setting in your theme options > layout settings.

When you increase the grid max width that will increase the columns used on those larger screens. This way your content never gets stretched if you are on a very large screen simply more columns are added.

Ben

[Peter]

Peter

#167725

Hi,
If I choose 3 columns I get 4, with 4 columns I get 5.

Please advice.

Best Regards,
Peter Nooijen

[Peter]

Peter

#167725

Hi,
If I choose 3 columns I get 4, with 4 columns I get 5.

Please advice.

Best Regards,
Peter Nooijen

[Ben Ritner]

Ben Ritner

#167583

Hey,
I’m not sure I understand. You have set the columns to show two columns. Are you not wanting the images to be in two columns in a gallery? The size is going to be determined by how large of columns you are setting.

Also with a dark background I suggest adding this css:

.kt-galleries-show-caption-bottom .kt-gallery-caption-container {
    opacity: 0;
}

Which will fade out the caption box.

Ben

[Ben Ritner]

Ben Ritner

#167553

As of 4.3.6

[carousel type="staff" items="10" columns="3"]

Ben

[Ben Ritner]

Ben Ritner

#167533

Hey,
You would have to use a shortcode in a text widget instead of a carousel widget.

The shortcode would look like this:

[carousel type="post" columns="5" items="10" img_height="300"]

Change the img_height setting to match what you want.

Ben

[Marit]

Marit

#167493

Hi
I have a pagebuilder row with 5 columns on my home page, making up an image menu.
It looks great on desktop.
But when viewed on iPad the headers “merge” together
And even worse on mobile, the row splits into TINY single columns that don’t even fill the space available…
How can I fix this?

Screenshot:
*Login to see link
*Login to see link

Thank you for your help

[Marit]

Marit

#167493

Hi
I have a pagebuilder row with 5 columns on my home page, making up an image menu.
It looks great on desktop.
But when viewed on iPad the headers “merge” together
And even worse on mobile, the row splits into TINY single columns that don’t even fill the space available…
How can I fix this?

Screenshot:
*Login to see link
*Login to see link

Thank you for your help

[Ben Ritner]

Ben Ritner

#167256

Hey,
You would need to use a shortcode instead of a widget.

[carousel type="portfolio" items="10" columns="4" order="DESC" orderby="modified"]

Something like that ^

Ben