Docs

[yhshin1020]

Hey,

I have a 1/2 + 1/2 column set up with no margin on Cornerstone.

I want to be able to achieve the following effect: http://imgur.com/a/uLNyw

I have come close, except I have a few problems.

1) On mobile, the vertical-align: middle doesnt seem to work. (pic below)

2) I have an image that is taller than the set column width on the right of the column. Is there a way to make the column on the left not change height with the slide on the right as it is doing now? (So have the column on the left be the same size while the column on the right is taller than the column on the left).

Thanks.

[yhshin1020]

This reply has been marked as private.

[yhshin1020]

This reply has been marked as private.

[Christian]

Hey there,

This is technically possible but requires custom coding so this would be outside the scope of our support. You might want to contact our trusted partners who caters X setup and customization needs. Please see https://community.theme.co/custom-development/

Please use the Gap element to control spacing in various screen widths instead.

Thank you for understanding.

[yhshin1020]

This reply has been marked as private.

[Rad]

Hi there,

That’s vertical alignment only works in tables. And the threads you see are merely workaround to achieve it in that specific situation.

You can’t do the vertical alignment of columns since it uses <div>, and it’s mostly possible, only on one line text. It usually fails on multiple contents since it’s not a table.

Though, I’m happy to check the issue to provide some recommendation. What page has this issue?

Thanks!

[yhshin1020]

This reply has been marked as private.

[Paul R]

Hi,

You can add this under Custom > Edit global CSS in the Customizer.

@media (max-width: 767px) {
.x-section .x-container.marginless-columns .copy.x-column[class*="x-"] {
    height: auto !important;
    padding: 30px 0;
}
}

Then add this in Custom > Edit Global Javascript.

jQuery(document).ready(function($){

    var highestBox = 0;
        $('.my-section .container .column').each(function(){  
                if($(this).height() > highestBox){  
                highestBox = $(this).height();  
        }
    });    
    $('.my-section .container .column').height(highestBox);

});

Lastly, please remove copy class in your columns class field.

Thanks

[Rue Nel]

Hello There,

Thanks for the updates! I would recommend that you use Marginless columns and then in your column, you add some paddings. Please check out my test page here: http://prntscr.com/d705ir. You should be able to check the elements I used in the page entitled “An X Test”. I have also attached the Cornerstone template.

Hope this helps.

[yhshin1020]

Thanks, just one more question:

i have few rows with two columns stacked on top of each other.

On mobile, the content on the left goes on top and the column on the right goes below the column on the left.

How do I make it such that on mobile and tablet screens the slider will always go under the text column?

Thanks.

[Christopher]

Hi there,

Columns stack on top of each other from left to right. For mobile if you wish to change the order, please use visibility options and display/hide specific section/row on mobile devices.
See the attachment.

Hope it helps.

[yhshin1020]

This reply has been marked as private.

[yhshin1020]

This reply has been marked as private.

[Joao]

Hi There,

Please add the following code to Appereance | Customizer | Custom | CSS

.x-flexslider .x-slides img {

    margin-bottom: 0px !important;
}
.with-container {
    margin-bottom: 0px !Important;
}

Hope it helps

Joao

[yhshin1020]

This reply has been marked as private.

[Author]

Posts