Docs

[bak]

Hi

I have a section with two rows.
1) Row 1: 2 columns with a H2 custom headline each
2) Row 2: 4 columns with image/H3 CH/text.

How can I achieve that on mobile not both H2 follow after each other but rather that each H2 belongs to the elements of row 2 as in desktop view?

[bak]

This reply has been marked as private.

[Rad]

Hi there,

Thanks for writing in.

You should only have one row with 2 columns. 1st column should have the costume headline as well as the image and other content. And same goes for 2nd column.

Multiple rows is only recommended if you’re separating content.

Thanks!

[bak]

This reply has been marked as private.

[Christopher]

Hi there,

You can divide first row in section #3 into two columns and add one custom headline in each column.

Hope it helps.

[bak]

This reply has been marked as private.

[Christopher]

Hi there,

Ok, I see. Columns stack on top of each other from left to right. To fix this issue add a section divide it into two columns. Add one text element in each column and insert following shortcode :

[x_custom_headline type="center" level="h1" looks_like="h1"]Custom headline[/x_custom_headline]
<div class="x-section">
<div class="x-column x-1-2 x-sm">image<br>headline<br>text</div>
<div class="x-column x-1-2 x-sm">image<br>headline<br>text</div>
</div>

Hope it helps.

[bak]

This reply has been marked as private.

[Rupok]

Hi there,

It seems you have used this CSS to hide this :

.page-id-2481 #x-section-7 .x-container .x-1-3:last-child {
  display: none;
}

And this to create margin for the first one :

.page-id-2481 #x-section-7 .x-container .x-1-3:first-child {
  margin-left: 18%;
}

Let’s remove these to get expected result.

Cheers!

[bak]

OK, how can I make the columns the same size of the columns like in the sections with 4 columns?
the circles have a diameter of 210 px in the 4 column sections and almost 260 px in the section with the 3 columns

I would also like the cirlces to be same size on mobile view

[Rue Nel]

Hello There,

To make all your circles the same size in any of the screens, instead of using max-width: 80%;, you can replace it with a fixed sized like max-width: 210px;. With this method, you do not have to worry if the do not have the same column width. As long as you have added the maximum width, they will always be in uniform size.

Hope this would help you.

[bak]

In my experience working with px will make it problematic on mobile view. Also ideally I would like to have the columns the same width because else the custom headlines have different length depending on column width

[Rupok]

Hi there,

I think the above suggestion is already feasible. Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[Author]

Posts