Docs

[Sara H.]

Hello!

About responsive breaks,

I add this code to solve my 4 column break into 2:

@media only screen and (min-width: 768px) and (max-width: 979px) {
.x-column.x-1-4 {
margin-right: 2%;
width: 48%;
}
}

This works perfectly in my section with 4 columns but I also want to change my 3 column section into 2 then 1 in small devices.

thanks

[Sara H.]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in! To resolve this issue, please update your code and use this instead:

@media only screen and (min-width: 768px) and (max-width: 979px) {
  .cs-content .x-column.x-1-4,
  .cs-content .x-column.x-1-3 {
    margin-right: 2%;
    width: 48%;
  }
   
  .cs-content .x-column.x-1-3 {
    margin-bottom: 2%;
  }
  .cs-content .x-column.x-1-3:nth-child(2n) {
    margin-right: 0;
  }
}

Please make sure that each of the column will have the same height so that it will not messed up the layout.

Please let us know how it goes.

[Sara H.]

well it works but it is messing up the layout. I guess its because of the size of some headings…

[Sara H.]

I just tested increasing the heading and it still messing up even with all content at the same size

[Christopher]

Hi there,

Please update previous code to :

@media only screen and (min-width: 768px) and (max-width: 979px) {
  .cs-content .x-column.x-1-4,
  .cs-content .x-column.x-1-3 {
    margin-right: 2%;
    width: 48%;
  }
 .page-id-4 h3.h-custom-headline {
    font-size: 19px;
}
  .cs-content .x-column.x-1-3 {
    margin-bottom: 2%;
  }
  .cs-content .x-column.x-1-3:nth-child(2n) {
    margin-right: 0;
  }
}

Hope it helps.

[Sara H.]

I attached a screenshot the last 2 services are messing with me

[Christopher]

Hi there,

It’s because blocks are in same columns. Please add another row, split it into three columns and add last three blocks there.

Hope it helps.

[Sara H.]

Hi, yes the blocks must be in the same columns otherwise will happen what is happening now.

[Sara H.]

If I dont do in the same section it will give me gaps like a row with 2 items then 1 alone

[Christopher]

Hi there,

Please add a text element and following code :

<div class="x-container">
<div class="x-column x-sm x-1-3">1</div>
<div class="x-column x-sm x-1-3">2</div>
<div class="x-column x-sm x-1-3">3</div>
<div class="x-column x-sm x-1-3">4</div>
<div class="x-column x-sm x-1-3">5</div>
<div class="x-column x-sm x-1-3">6</div>
</div>

Please add following code in Customize -> Custom -> Global CSS :

.x-column.x-1-3 {
    width: 28.66666%;
}

Hope it helps.

[Sara H.]

Hi Christopher first of all thank you for your effort but maybe I got it wrong.

I add a new section then I add the text with the code and also placed the code at global css its not working for me.

What I have at my global css regarding this topic is:

@media only screen and (min-width: 768px) and (max-width: 979px) {
  .cs-content .x-column.x-1-4,
  .cs-content .x-column.x-1-3 {
    margin-right: 2%;
    width: 48%;
  }
 .page-id-4 h3.h-custom-headline {
    font-size: 19px;
}
  .cs-content .x-column.x-1-3 {
    margin-bottom: 2%;
  }
  .cs-content .x-column.x-1-3:nth-child(2n) {
    margin-right: 0;
  }
}

.x-column.x-1-3 {
    width: 28.66666%;

[Sara H.]

please help

[Joao]

Hi There,

You should add the following code to Appereance > Customizer > Custom > CSS

There is also a missing } at the end of your code.

In case you still face issues, please provide your admin credentials in a private reply in order that we can take a closer look.

Thanks

Joao

[Sara H.]

This reply has been marked as private.

[Author]

Posts