Themeco Community

Hi There

I couldnt not notice any issue based on your description.

I have checked your website home page at different device sizes and everything seems aligned.

Can you provide a screenshot of the issue?

Thanks

Joao

Hello There,

Thanks for sending us the screenshot. To resolve this issue, you need to enable the marginless columns. And then in each columns you might need to add a padding. I went ahead and edited your page in Cornerstone. Please check it out if this would work out for you.

Hope this helps. Please let us know how it goes.

Hi there,

For the form input, please add this CSS to Admin > Appearance > Customizer > Custom > CSS

  .home #x-section-8 .x-column {
display: block !important;
width: 100% !important;
}

Marginless will only equalize the initial dimension of the columns, but not the content. The box that you have is from call out element, and it’s a content within a column. Content will not inherit column’s height, content will vary in height depending on how much information is within it. It just happens that the border is applied to the content and not on the column.

For workaround, please add this code to Admin > Appearance > Customizer > Custom > Javascript

jQuery ( function($) {

function size_callout() {

var max_height = 0;

$('.marginless-columns .x-callout').each( function() {

var new_height = $(this).parent().find('.x-callout').innerHeight();

max_height =  new_height >= max_height ? new_height : max_height;

console.log( new_height + '-' + max_height);

$(this).parent().parent().find('.x-callout').css({ 'min-height' : max_height });

} );

}

$(document).ready( size_callout );
$(window).resize( size_callout ).load(size_callout);

} );

Thanks!