How To Make The Rows In One Line

Support
#1

Hello Dear Theme support,

I want to let the 4 rows lay in one line, but I don’t know how to .

I use the 4 rows layout in cornerstone and the 4 different photos are with same height. I don’t know why they are not the same height.
here is the link where you can check the 4 rows I am talking about.
https://yhsay.com/content-draft/
Regards
Daphne

#2

Hi There,

Thanks for writing in! The rows will display as block. The columns are the ones that will display inline. Each of your columns has the same image with the same height. The issue is that in your first column, there is another element which made it being not align to the rest of the columns.

Please edit the page back in Cornerstone and make sure that each column has the same contents and remove unnecessary elements.

Please let us know how it goes.

#3

Hello dear friend,

Just like you told, now i delete the block and reput the block and choose 4 rows layout, it is on the same line now. But the problem is there are white spaces between different rows.

If i want to remove the white spaces between them and make the banners bigger, what should i do ?

Regards
Daphne

#4

Hi There,

You can add the following CSS rules into your Cornerston’s Custom > CSS area OR Customizer’s Custom > CSS area.

.page-id-942 #x-section-5 .x-column.x-1-4 {
    width: 25%;
}
.page-id-942 #x-section-5 .x-column {
    margin-right: 0;
}

Hope that helps.

#5

Hello dear ,yes. it does help. But it is a little different from my expentancy. I want there is no tap between different rows and still i want the four rows to be full width of the page. So each row can be bigger.

Another thing, I want the page to be full width pagination. but still there are some margin left for each side of the page as I showed in the red circle.

regards.
Daphne

#6

Hi There,

Please update the previous CSS to this:

.page-id-942 #x-section-5 .x-container {
    width: 100%;
    max-width: 100%;
}
.page-id-942 #x-section-5 .x-column {
    width: 25%
}
.page-id-942 #x-section-5 .x-column {
    margin-right: 0;
}
#7

Hello dear thai,

yes. it solves the issue.

thanks. Regards
Daphne

#8

Glad to hear it’s sorted, Daphne.

#9

Hello dear Jade,

Today I found though the codes solves the problem on the computer. On the mobile, it is not responsive.

https://yhsay.com is the site.

Regards
Daphne

#10

Hi again,

Please the previous code with the following code:

@media screen and (min-width: 768px) {
  .page-id-942 #x-section-5 .x-container {
    width: 100%;
    max-width: 100%;
  }
  .page-id-942 #x-section-5 .x-column {
    width: 25%
  }
  .page-id-942 #x-section-5 .x-column {
    margin-right: 0;
  }
}

Hope this helps!