Search Results for 'COLUMNS'

[Ben Ritner]

Ben Ritner

#193055

There are lots of sizes that are created based on what you are doing. For example virtue has settings to show your featured image. In that you can set the width and height manually based on what you want and then wordpress will create that image. the media settings are only defaults for when you click “add media” and add an image but the sizes you can have are endless based on your settings, and yes retina versions are always created.

If you are uploading an image for one specific use. let’s say your logo then it’s best that you upload that image at the exact size you want for that one specific use. For anything like product images where you need the large size for a lightbox, all the small sizes are created based on when and where you need them.

It’s important to note that the sizes created are not specific to one screen size but all. Take for example your shop page with images that are 240px. on a large screen where you see 5 columns, the visual size is 210px. BUT on smaller screens or medium screens where the columns change the size of the container can be larger or smaller and so there is not one perfect size even for a column of images.

The size difference between 240px and 210px is so irrelevant in terms of load time that it’s better to focus on what looks good and clear across the most screens. Especially when you consider that many people like to zoom in with there browser or screen settings.

The reason the file size of those two would be irrelevant is because of compression. If you use good compression on your files that will make more difference then anything else including using tiny dimensions.

I hope that clarifies.

Ben

[Felippe]

Felippe

#192987

Hello Ben,

A few days ago you were helping me with a related subject at the forum topic: *Login to see link

I’m still struggling with post/pages design for courses, topics, lessons, quizzes, completed lessons, etc… for instance, the lessons page still have a sidebar with the same content that I use for areas in the website that have nothing to do with courses.

I’d like to have more control and be able to choose if a specific page/post in the course area will have a sidebar or not. So far I’m using CSS for course and Topic pages.

Also, when I choose to have a side bar on an specific page, I’d like to have more freedom to put a specific content on it. One alternative would be not having a sidebar and using page builder’s columns, but pagebuilder is not working in the posts/pages of the course area of the website.

Do you know what I have to do to have more control on sidebars and it’s contents, or how to allow pagebuilder to work on the learndash area of the site?

Thank you very much,
Felippe

[Felippe]

Felippe

#192987

Hello Ben,

A few days ago you were helping me with a related subject at the forum topic: *Login to see link

I’m still struggling with post/pages design for courses, topics, lessons, quizzes, completed lessons, etc… for instance, the lessons page still have a sidebar with the same content that I use for areas in the website that have nothing to do with courses.

I’d like to have more control and be able to choose if a specific page/post in the course area will have a sidebar or not. So far I’m using CSS for course and Topic pages.

Also, when I choose to have a side bar on an specific page, I’d like to have more freedom to put a specific content on it. One alternative would be not having a sidebar and using page builder’s columns, but pagebuilder is not working in the posts/pages of the course area of the website.

Do you know what I have to do to have more control on sidebars and it’s contents, or how to allow pagebuilder to work on the learndash area of the site?

Thank you very much,
Felippe

[Hannah]

Hannah

#192936

Hey Mark,
Are you wanting the staff grid to stay 3 columns even on smaller screens? Not sure if that’s what you’re asking or not.

Hannah

[Hayleigh]

Hayleigh

#192849

The closest I got to a resolution was with this.

.row-full{
width: 100vw;
position: relative;
margin-left: -50vw;
height: 100px;
margin-top: 100px;
left: 50%;
}

But unfortunately the text content or columns with in that div become too wide.
Any suggestions?

[Hannah]

Hannah

#192458

1. Yes, the transparency is .7. You can read more about rgba here: https://www.w3schools.com/cssref/func_rgba.asp

2. It was done using page builder. Create a row at the top of your page, set the row layout to fullwidth stretched and give it a background color. Then you can set the row separator. Next, you can add a visual editor widget to give it text.

3. When your videos are ready you can simply select your slider from Theme Options > Home Page Header.

4. For Wanderlust the homepage is set to a static page (settings > reading). Then you can go into your homepage and create a row in page builder with 3 columns and add an ascend image menu item widget to each column. Then you can create a new row and add a split content widget. This calendar plugin seems to work well: https://wordpress.org/plugins/event-organiser/
The recent posts are added to a three column row, each column with a kadence recent post widget and a specific category selected.
Then the call to action is done by creating a row in page builder and setting the row layout to full width stretched. Add a background image and set the row separator. Then you can add a call to action widget into the row.

5. There is definitely a learning curve with all of this. But you’ll get there! And we are happy to help along the way. Your theme options control the overall look of your site, and page builder is used to edit individual pages and posts.
You can find theme documentation here: http://docs.kadencethemes.com/ascend-premium/
And all our tutorials here: https://www.kadencewp.com/kadence-tutorials/

Hannah

[Ben Ritner]

Ben Ritner

#192341

.kad-header-widget {
    text-align:right;
}
.kad-header-widget .header-widget-area-header {
    display:inline-block;
    padding-left:10px
}

In your theme options > custom css box add that ^ you can also use the layout widget to build it with columns if you prefer.

As for mobile, you can’t show the widgets if you have the simple mobile header enabled, if you turn that off in your theme options > mobile header then you should be set.

Ben

[Kevin]

Kevin

#192331

You should be able to set the columns in the shortcode like this:

[portfolio_types items=7 columns=7]

Does that work for you?

-Kevin

[Ben Ritner]

Ben Ritner

#192244

You can’t center align a grid. So you can add two shortcodes but the bottom one will be larger since you would be setting the columns two a lower amount or they would be aligned left.

I supposed you could use page builder create three rows and place your second shortcode in the center row and since it’s smaller with the columns set to three it would fill less space and not be as large but there is no way to make it exactly the same size as the grid items above.

In terms of the shortcode you would need to flip the order. So for the top it would be order="asc" and the bottom order="desc" which means your last item will be first in the second row. So it’s not perfect but could allow to to use two shortcodes.

Ben

[Ben Ritner]

Ben Ritner

#192222

Hey,
I see your issue. When using the carousel widget (testimonial) in a row that is set to fullwidth stretched it creates space outside of the container because of how negative margin is used when spacing columns in a widget. I’m going to add css to the next version of the theme which will resolve this issue. For now Here is what I added:

@media (max-width: 780px) {
.panel-grid-cell .testimonial-widget-carousel-outer {
    margin: 0;
}
}

As for hiding scroll to top use this: ( I also added for you )

@media (max-width: 780px) {
#topcontrol {
    display: none;
}
}

[Sharon]

Sharon

#192144

I changed the code to [portfolio_types items=7]. It didn’t work. The example code shown in the shortcode doc is

[portfolio_types orderby=date columns=4 items=4 ratio=”square” style=”pgrid” childof=0 childcategories=false]

Not certain what to put in the text widget on the homepage.

[Pamela]

Pamela

#192086

I checked the Pagebuilder settings, and enabled “Collapses columns differently on tablet devices.”. This helped a lot and also your CSS, thank you! Now the images are collapsed on two rows. I can accept that 🙂

The devices that I have tested are Samsung Galaxy Tab A (of different generations).

Regards,

Pamela

[Ben Ritner]

Ben Ritner

#192083

What Devices specifically? What version of browser etc. Help me so I can recreate.

You can change the width at which columns break down into rows in your pagebuilder settings.

If you want to you can also make the font size smaller for the buttons on your specific tablet.

Something like this:

@media (min-width: 780px) and (max-width: 800px) { 
.kadence_image_widget_caption .btn {
    font-size:14px;
}
}

[Ben Ritner]

Ben Ritner

#191767

Hey,
It’s not possible because the variations and add to cart button are part of a single “form” element and you can’t split that up else the add to cart wouldn’t work.

You could check with the plugin developer for the designer to see if they have a option where you could hook the designer into the form element without breaking hte form but I don’t know that it would be possible.

Perhaps making two columns and placing the designer on the left would get you closer to a design your going for?

Ben

[Jennifer]

Jennifer

#191453

Hi there,

I’m having a problem with our Woocommerce product titles not showing correctly when in mobile view. I tried adjusting “Product title Min Height” under Shop Settings, but my changes seem to only work on wider screens (3-columns +).

This is our website: *Login to see link

Here is an example of the product title displaying correctly:

Here is the problem (title and price not appearing correctly):

It looks like the “details_product_item” div gets partially covered by the next product’s image.

Any suggestions on how to fix this?

Thanks!
Jen

[Jennifer]

Jennifer

#191453

Hi there,

I’m having a problem with our Woocommerce product titles not showing correctly when in mobile view. I tried adjusting “Product title Min Height” under Shop Settings, but my changes seem to only work on wider screens (3-columns +).

This is our website: *Login to see link

Here is an example of the product title displaying correctly:

Here is the problem (title and price not appearing correctly):

It looks like the “details_product_item” div gets partially covered by the next product’s image.

Any suggestions on how to fix this?

Thanks!
Jen

[Ben Ritner]

Ben Ritner

#191415

Regarding SEO; since the posts do reside on the site, aren’t we getting the SEO benefit from them anyway

It’s not the same. But please consult with your SEO expert or read up. Most everywhere will tell you to avoid Iframes.

If you want a grid with a border that is not hard to accomplish without the need for embed.

[blog_posts type="grid" items="2" columns="2"]

Add that ^ shortcode

And add this css in your theme options > custom css :

.kad_blog_item .grid_item {
    padding: 25px;
    border: 1px solid #e5e5e5;
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

Ben

[Ben Ritner]

Ben Ritner

#191039

Yep update the shortcode to this:

[staff_posts columns="3" items="80" limit_content="false" orderby="title" order="ASC"]

Ben

[Benjamin]

Benjamin

#191021

That works:
[staff_posts columns=”3″ items=”80″ orderby=”title” order=”ASC”]

However I loose all the formatting within the Staff body, like carriage returns and links to email and websites? Is there a way I can resolve that?

Thanks,
Ben

[Ben Ritner]

Ben Ritner

#190984

Hey,
The password would protect the content of your page. Like the text added into the content box. I suggest using a normal page and add the staff shortcode into the content:

[staff_posts columns="3" items="10"]

Let me know if that works for you.

Ben

[Richard]

Richard

#190905

Thanks Ben, so if I want the images to display correctly I better adjust each portfolio featured image to the size of the mosaic grid? And I won’t be able to adjust the pattern other than adjusting the number of columns?

I have taken a look at the virtue gallery widget and it seems to offer more control. Can I make this work like a portfolgio grid, meaning having some hover over effect and linking to a portfolio item when clicked on?

[Ben Ritner]

Ben Ritner

#190703

Hey,
It’s not random, it’s a grid that follows a pattern. You can’t change the grid. If you set the columns to 3 it will be one pattern, if you set the columns to 4 it will be another.

You can look at the grid and change your portfolio post order by using the menu order and changing your posts order number.

Ben