Search Results for 'COLUMNS'

[Ben Ritner]

Ben Ritner

#137019

Yeah that make sense because the columns are tight css… Use this css:

.homecontent > .row {
    margin-left: -10px;
    margin-right: -10px;
}

Ben

[andrea.juelich]

andrea.juelich

#137016

Hey Ben,
regarding the hover: Right now it is only a color change, but this is just a test site. It will be a real different image on the live site.
Regarding the padding: I used columns but now the image items are actually larger then the divider…see the one on the very top.

[Ben Ritner]

Ben Ritner

#137012

Rather then adding clear and since your adding these like columns. I suggest you change the way your using the shortcodes to wrap them in a row. So like this:

[columns]
[img_menu image=http://wordpress.p395839.webspaceconfig.de/wp-content/uploads/2017/03/rosa.png description="54-pcs-set" height="265" link=wordpress.p395839.webspaceconfig.de/contact]
[img_menu image=http://wordpress.p395839.webspaceconfig.de/wp-content/uploads/2017/03/rosa.png description="54-pcs-set" height="265" link=wordpress.p395839.webspaceconfig.de/contact]
[img_menu image=http://wordpress.p395839.webspaceconfig.de/wp-content/uploads/2017/03/rosa.png description="54-pcs-set" height="265"]
[/columns]

2. Your css wont’ work with a transition because the image is only there when hover so when you remove the mouse there is no hover and thus no image to fade with. So css like this could work, although I don’t see any reason for using an image if your just wanting a color:

.home-message h5, .home-message h4 {
    z-index:2;
}
.home-message:after {
    content:'';
    display:block;
    background: url("http://wordpress.p395839.webspaceconfig.de/wp-content/uploads/2017/03/23.png");
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:1;
    opacity:0;
        -moz-transition: opacity .6s ease-in-out;
    -ms-transition: opacity .6s ease-in-out;
    -o-transition: opacity .6s ease-in-out;
    transition: opacity .6s ease-in-out;
}
.home-message {
    background: transparent !important;
}
.home-message:hover:after {
    opacity:1;
}

Ben

[Ben Ritner]

Ben Ritner

#136864

You can also just add two columns in pagebuilder and place this class in the left column kt-animate-fade-in-left and this class in the right column kt-animate-fade-in-right.

Ben

[BG Anders]

BG Anders

#136679

Ok, i understand.

Unfortunately i can’t make everything 2 columns. So i switched the Tablet layout OFF to get from 3 directly to 1 column.
This works ok on desktop and works well on every window size.

But on my daughters Samsung Tab 10 Tablet i still get a tablet layout, meaning 2 columns and the items again jump on the next row, with or without your CSS.

I can’t reproduce the 2 columns layout on my Laptop no mater how i resize the window, so i’m clueless.

Is it possible get 1 column on the tablet in portrait view ?

[Ben Ritner]

Ben Ritner

#136671

Breaking down 3 columns to 2 columns is your issue. There is no “normal” approach to that where they somehow align.

Ben

[BG Anders]

BG Anders

#136670

Sorry Ben, i don’t understand everything you say but mentioning tablet reminded me that i checked the tablet layout in Pagebuilder settings. I taught it is a good thing actually. Unchecking it seems to collapse the 3 columns directly into one and it “solves” the problem.

I still don’t understand how i can use that tablet setting without forcing with css. I didn’t do anything but putting 6 widgets on a 3 column row.
And i sure have no idea how to duplicate any column at 50% …

So, only if you can spare the time:
– what is the correct way to place the 6 widgets on a stretched row and still use the tablet layout setting in Pagebuilder, because it is actually nice that it collapses first into 2 columns.

Do i have to override with your CSS, or is there a “normal” approach ?

[Ben Ritner]

Ben Ritner

#136626

Your items are in three columns on “tablet” screen those columns are setting a width of 50%. Thus you get what you have. You seem to want the first to columns to fill 50% and the last column to somehow duplicate into to columns at 50%. You can’t do that within settings.

You can always override with css:

@media (max-width: 1024px) and (min-width: 780px){
    #pg-136-4 #pgc-136-4-2 {
    width:100% !important;
}
#pg-136-4 #pgc-136-4-2 > .widget {
    width:50% !important;
    float:left;
}
}

Ben

[Kurt]

Kurt

#136374

Hi,

I am using the sitewide call to action. However, the area for the button is too small, forcing the button text to wrap on two lines. How do I give the button more space without messing up the other columns on the site?

Take a look here: federalhybrids.com

Thanks!!

[Kurt]

Kurt

#136374

Hi,

I am using the sitewide call to action. However, the area for the button is too small, forcing the button text to wrap on two lines. How do I give the button more space without messing up the other columns on the site?

Take a look here: federalhybrids.com

Thanks!!

[Justine]

Justine

#136299

thanks Ben, that’s a new feature. I edited it to a full width footer in theme options – footer but then when I go back to widgets there’s still only the option for footer column 1, 2 or 3, no option for no columns

[Justine]

Justine

#136286

yes it’s here http://ecocolour.naturalfabricdyeing.com/start-here/
btw I copied over my footer text to this site but it didn’t change anything so I’ve changed it back. Hannah suggested adding my image in widgets but that only give an option to have columns when I want a full width image. How do I get that original image back please?

[Justine]

Justine

#136257

OK I’m currently editing and weird things are happening… my right hand side bar is now underneath my page content and a table of 4 columns has turned into 4 rows! HELP! Is someone else logged in?

[Kenneth]

Kenneth

#133400

http://www.imarriedthewar.com. There are three columns. Would like to set the column height to max of 400, which is about where they are at now (you’ll see one of the staff blocks has social media and email links. The usual block with excerpt will likely not include these links.

[Ben Ritner]

Ben Ritner

#133366

The page you linked to is a woocommerce shop page (archive page) you can not use page-builder no that page as it creates all kinds of issues with how woocommerce builds the page. If that is what you were trying to do then this makes sense.

Instead of using a widget just add a shortcode

[carousel type="cat-products" cat="category" items="10" columns="4"]

Ben

[Ben Ritner]

Ben Ritner

#133357

Best to set a min height. If you post a link I can help with the css. Without seeing your site it’s impossible to know what height to set it to as it would also depend on how many columns you are using.

Ben

[Hannah]

Hannah

#133188

Hi Dean,
The only difference I can see in the settings is the number of columns. Try increasing your columns on the homepage. Does that make a difference?

Hannah

[Kevin]

Kevin

#133168

One potential workaround would be to place a portfolio carousel into the content using a shortcode, like this:
[carousel type=portfolio orderby=date columns=1 items=8 speed=9000 scroll=1]

Within the simple box it will look like this:
[kt_box opacity="1" min_height="300" valign="middle"]<p>[carousel type=portfolio orderby=date columns=1 items=8 speed=9000 scroll=1]</p>[/kt_box]

Try that and let me know if it works for you.

[Kevin]

Kevin

#133124

Hello Tracey,

One option that may work for you is the portfolio post shortcode. Try adding this to a text editor on the page that you’d like the posts to show up and let me know if it works for you:
[portfolio_posts orderby=date excerpt=false columns=3 items=6 height=200 lightbox=true showtypes=true]

As for the second question, it looks like this plugin may be what you’re looking for:
https://wordpress.org/plugins/enhanced-media-library/

-Kevin

[Kevin]

Kevin

#133123

Sorry, I’m not sure I understand. there is no way to setup the Split Content widget to have 3 columns, but you could use Page Builder for a similar effect.

Try adding a page builder row with 3 columns, and add a Visual Editor to each one. Within the Visual Editor, you can add a Simple Box Widget that has a minimum height with a vertical align set.

Then, add your content to the simple box shortcode and it should display evenly across the page.

You may want to set the row that contains these widgets to Fullwidth Stretched under “Row Layout.”

Let me know if this works for you.

-kevin

[Hannah]

Hannah

#133120

Hey,
So you’re wanting three columns instead of two? There ins’t a built in option for that. I would recommend using page builder and adding three columns with three separate widgets. Or else two columns, one long column using the split content widget and the short column with a text or image widget. Would that work for you?

Hannah