Five columns in one row

[tonevski]

Is it possible to have 5 columns an a single row?

[Radu]

HEllo,

Read here : http://www.jezweb.info/add-5-column-layout-vc/

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[tonevski]

Thank you

[lauradelaat]

Hello there, I hope it is ok to reply on this as I was testing this out. I couldn’t find the option canvas custom settings below the page design. I could choose full width at the template on the right side but that is nog working. See the link: http://martijnvanbraam.nl/home-test-slider/

Could you tell me where to find the canvas custom setting to set the full width?

Thanks for letting me know 😉

Best regards,

Laura

Attachments:

You must be logged in to view attached files.

[Radu]

Hi Laura,

I see that your page is already full width, the tutorial is showing an older version of Visual Composer, but explain me what do you want to achieve.

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[lauradelaat]

Hi Radu,

Thanks for your reply!

I want to use a five column row. I’ve used the advice of the tutorial and added the Extra class name and the editor.

The only thing I didn’t understand was the note:
Note: “.vc_span2” targets the individual column of the 6-column layout but you have to
include the primary wrapper of that VC row which is the “.home_box_wrap.wpb_row” and
also the “.vc_responsive” which is one of the “body” tag classes to effectively override the default styles.

Could it be I missed something there?

I would like to get the five round pictures in a five column row, spread equally.
(see image added)

Could you see what I do wrong?

Best regards,

Laura

Attachments:

You must be logged in to view attached files.

[Radu]

Hi,

You should to add a custom class to match only that row and to apply some css rules available only for that row (section) not site-wide. Please see the attached screenshot just add a class name to the row that contain that 5 round avatars.

After you do that, please leave the layout with that classes and reply here and i will provide you the css that will arrange the 5 cols.

But you can try with this css

COPY CODE

.five_cols_homepage div div .col-sm-2 {
    width: 20% !important;
}
.five_cols_homepage .lastitem-hidden {
display:none;
}

Let me know

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

Attachments:

You must be logged in to view attached files.

[lauradelaat]

Hi Radu,

Could it be I already did that in the right way by applying the instructions of the tutorial?

See the attached printscreens.

I’m sorry to not be so much known with CSS so I can understand you that wel.
I don’t know if what you send in the last reply is an addition on what I have already did or as a replacement.

Thanks for your support, I’ll be online tomorrow again 😉

Best regards,

Laura

Attachments:

You must be logged in to view attached files.

[Radu]

Yes it’s ok with that classes

Just add this to wp-admin -> theme options -> general settings -> quick css

And this class should be added to latest column (the empty col) home_box_last not at 5th column.

COPY CODE

.home_box_wrap .col-sm-2 {
    width: 20% !important;
}

Let me know

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[lauradelaat]

Yes yes yes yes!!!

How awesome when things work!

Many many thanks for your help.

I only just discovered that on mobile the pictures are shown very small, they were bigger before.

Is there something we can do?

Best regards!

[Radu]

Hi,

Please add this css

COPY CODE

.home_box_wrap .col-sm-2 {
    display: initial !important;
}

Let me know if is ok like this.

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[lauradelaat]

That too is working perfectly fine! Thanks so much again!

I hope I’m not starting to irritate, I have one more problem that needs to be solved 🙂

I’m at the closure of this stage of the project, that’s why 😉

When I open the site on my mobile, the header background image doesn’t fill the entire header. I’ve found out that when I change the settings from ‘contain’ to ‘inherit’ or ‘cover’ it does fill the whole space but the problem then is that you don’t see the full picture but very enlarged. And the customer wants to see the detailed picture. Is there an other setting I need to set to get this done?

Thanks for your time

[Radu]

Hi,

The best option is to set background-size:cover and background-position: center right; then add this css to your site

COPY CODE

@media(max-width:720px) {
.container>.navbar-header{
    line-height: 160px !important;
    height:150px !important;
}
}

I’ve tested with this values and it looks good from my point of view.

Let me know

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[lauradelaat]

Great, that works too. You’re the best.

Have a great sunday.

Many thanks.

Laura

[Radu]

Thank you for the kind words.

You’re welcome

Don’t forget to rate our theme 5 stars on Themeforest since it will really help us.

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[lauradelaat]

Ok, will do!

[Radu]

Thank you !!

Have a nice day

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts