Biggest responsive bug IMO

[Adrenaline22]

Hi guys, long time no see. After making a dozen of webpages with all your themes I found out your biggest problem lays in the responsive area.

I tried to use both editors (VC and SF). I didn’t realise the problem until I bought a different theme (Savoy) for some project and compared results.

Example of three equal width columns:

LG
1/3 + 1/3 + 1/3
MD
1/2 + 1/2
1/1
SM
1/3
1/3
1/3
XS
1/1
1/1
1/1

This is the correct way to set it and Savoy does it flawlesly, while Uplift has an incorrect MD layout:

MD
1/2 + 1/2
1/2

Which leaves a blank space in the second row (blank 1/2).

Can you verify this?

[Swift Ideas – Ed]

Hi @Adrenaline22

Please, can you clarify how you have this set up on the backend so that we can see where the issue lies – from your explanation it’s a little tricky to understand.

Thanks,

– Ed

[Adrenaline22]

This is the result I’m getting. Tested on two different themes, both with VC.

Attachments:

You must be logged in to view attached files.

[Adrenaline22]

The results are made with identical settings in two totally different themes (Savoy and theme Uplift).

[Rui Guerreiro – SUPPORT]

Thanks. I just forward it to Ed.

-Rui

[Swift Ideas – Ed]

Hi @Adrenaline22

Thanks for the clarification – if you could please provide the page code so that we can paste it locally and test to ensure we implement the right fix, that would be much appreciated.

– Ed

[Adrenaline22]

VC code or the rendered CSS+HTML?

[Swift Ideas – Ed]

The VC code please.

Thanks,

– Ed

[Adrenaline22]

This reply has been marked as private.

[Adrenaline22]

screenshots (Savoy)

Attachments:

You must be logged in to view attached files.

[Swift Ideas – Ed]

Hi @Adrenaline22

So looking at the code, looks to be the CSS that theme adds specific to their adjustments, not VC default code.

Try adding this CSS:

.vc_row.vc_row-o-equal-height>.vc_column_container {
display: -webkit-box;
        display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    max-width: 100%;
}

– Ed