Docs

[Jan S]

Hello,

i would like to disable / not use the Post Grid > Auto-Height Feature. I can choose from 1:1 over 16:9 to Original, but none works fully responsive; eg when mixing very short excepts with longer ones.

Its build around vc_gitem-zone-a which auto-heights the single container and overflow:hidden (really?? in responsive age we are working with hiddens??), so: how do i turn it off?

Jan

[Jan S]

This reply has been marked as private.

[Christian]

Hey Jan,

Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks.

[Jan S]

This reply has been marked as private.

[Jan S]

This reply has been marked as private.

[Jan S]

This reply has been marked as private.

[Rad]

Hi Jan,

It’s VC’s native element which isn’t part of X’s integration. Would you mind providing your admin login credentials as well? I like to test the auto height feature, it seems to be okay with just few styling.

Thanks!

[Jan S]

This reply has been marked as private.

[Rad]

Hi there,

Looks like that option is only applicable for the container and not for the content. All columns have same height, but not each text. This is quite tricky since the title and texts have varying length, hence, height too. And they vary on different devices too. We can’t put static height on them to enforce equal height. I tried it with javascript with no luck due to existing positioning. How about creating that are with essential grid? With that, you have great control with its skin and layout and sizing.

Thanks!

[Jan S]

Rad,

alright, for everyone having the same

Issue:
* Visual Composer > Post Grid crops off text in certain display resolutions no matter what “Height Mode” is set to

Solution:
* Set Visual Composer > Grid Builder > select item > Height Mode: 1:1 (others probably working as well)
* Add this to you styles:
.vc_gitem-zone-a .vc_gitem-row-position-top,
.vc_gitem-zone-b .vc_gitem-row-position-top {position: inherit !important;}
.vc-gitem-zone-height-mode-auto:before {padding: inherit !important;}

This way overflow: hidden does not take place (div is not absolute), and the badly coded top-padding-gadget is getting corrected. As a result, the outer div always scales to height of largest (!) content; showing all text lines.

On a personal note: coders using overflow: hidden in responsive age are evil. Evil. Evil. Coders using padding-top-hacks to achieve certain aspect rations just for layout reasons (aka “i dont care of the whole test is readable”) are even more evil.

[Lely]

Hi There,

Thank you for sharing your fixed. Although this works for you, but yes you’re correct – this hack is not recommended for responsiveness.

[Jan S]

Actually, VC uses the hack, my fix removes that and establishes responsiveness (content always fully visible) – so its the other way round 🙂

j

[Friech]

Cool, feel free to get in touch with us regarding any further queries about the X|Theme and Cornerstone.

Cheers!

[Author]

Posts