2 column layout on mobile

[mrsnooch]

Hi,

This is regarding www.badwolfproductions.co.uk (you’ll need to log in - details below).

In the Services section, there are 2x 3 columned rows. Rather than have these in single column on mobile, I would like this to appear in 2 columns. I have achieved this before on www.bigrockdesigns.com on the ‘Our Top Courses’ section but this was easier because each row had an even number of items, compared to my current 3.

Is there a way to tell Cornerstone to list all 6 items one after the other, creating 2 columns, with 3 rows each? I also tried the code on the Big Rock Designs website, however this targets everything on my page, which I don’t want - I cannot seem to find the identifier for this particular section, or atleast get it to work.

Any help is greatly appreciated.
Thanks
Mark

[friech]

Hi Mark,

Thank you for writing in, the challenge on this is we can not merge the rows, if we make the row a 2 columns on mobile then the 3rd column will become an odd one. I suggest you utilize the Hide Base on Screen Width feature. Hide this 1/3 columns section on mobile, then create a duplicate of this section edit the duplicate make it a 1/6 columns in one row, hide it on desktop and then apply the same custom CSS that you applied on your other site.

Please add your own ID or CLASS to your section so you can specifically target it with custom CSS (https://prnt.sc/h26kco).

Cheers!

[mrsnooch]

Hi Friech,

Thanks for your reply. I have done what you said around duplicating the section, hiding based on screen width, that is all sorted.

However I do not know how to alter my code in order to apply the alignment ONLY to this section. The code I have is;

@media (max-width: 979px) {
.x-column {
float: left !important;
width: 48% !important;
margin-right: 4% !important;
}
.x-column:nth-child(2n) {
margin-right: 0px !important;
}
.x-column.x-1-1 {
float: none !important;
width: 100% !important;
margin: 0 auto !important;
}
}

I tried changing some of the .x-column to .services-mobile, which is the class I have set on the relevant section, however this does not work correctly.

Any help is greatly appreciated.

Thanks
Mark

[Joao]

Hi There,

Please add an ID name to your section, for example , ID : my-section

And pleace the following code:

@media (max-width: 979px) {
#my-section .x-column {
float: left !important;
width: 48% !important;
margin-right: 4% !important;
}
#my-section .x-column:nth-child(2n) {
margin-right: 0px !important;
}
#my-section .x-column.x-1-1 {
float: none !important;
width: 100% !important;
margin: 0 auto !important;
}
}

Hope it helps

[mrsnooch]

Hi Joao,

This worked perfectly,

Many thanks!
Mark

[ruenel]

You’re welcome!
We’re glad we were able to help you out.