Docs

[Pablo F]

Hi,

The question is so simple, but I cannot figure out how to solve this layout.

All that I´ve tried renders different results in Safari-Firefox vs. Chrome.

Could you please tell me what´s the right way to make the attached layout within a tab? Using CSS, shortcodes,…?

PS. As you can imagine, the rectangles are images.

Thank you in advance.

[Rue Nel]

Hello There,

Thanks for writing in! Can you not use column shortcodes inside the tab contents? I think you can use this shortcode format:

[column type="1/2"] Text 1 content in here. [/column] [column type="1/2" last="true"] Place your Image 1 in here. [/column][clear][column type="1/2"] Text 2 content in here. [/column] [column type="1/2" last="true"] Place your Image 2 content in here. [/column]

http://prntscr.com/ay84m9

Hope this helps.

[Pablo F]

Almost perfect!

How can I control the text alignment inside the column? No matter the alignment I set inside a div or span, it´s always shown in the top center.

Could it be responsive too? I mean on desktop the top right alignment and on mobile the top center alignment, like in the attached picture.

Thank you again.

[Rue Nel]

Hello There,

To have the elements align on desktop as top right alignment and on mobile as top center alignment, please insert the following custom css in the settings tab, Settings > Custom CSS

.x-tab-content .x-column{
  text-align: right;
}
  
@media(max-width: 979px){
  .x-tab-content .x-column{
    text-align: center;
  }    
}

Please let us know if this works out for you.

[Pablo F]

Hi @Rue,

It works like a charm.

Thank you!

[Rue Nel]

You’re most welcome as always!
Thanks for letting us know that it has worked for you.

[Author]

Posts