2 columns on mobile layout – Themeco Community

2 columns on mobile layout

marcel w — Mon, 16 Mar 2015 15:18:38 +0000

Hello guys,

I have tried some css to show 2 columns on a page for a mobile layout.
URL:
http://www.atplexamen.nl/bibliotheek/

The only thing is that the margin on the left side of the page is zero and the content doesnt look centered with this css.
Can you guys help me to make it look horziontally centered so that the margin on the left and right is the same?

Thank you very much in advance.

Kind regards,

Marcel Wever

Reply To: 2 columns on mobile layout

CharliePryor — Mon, 16 Mar 2015 16:03:56 +0000

I too am very interested in finding a proper way to display two columns on a phone. Today’s phones are large displays, fully capable of two columns on a phone. The seemingly pre-historic and mindless forcing of scrolling to see everything in a single column is boring and outdated already in my opinion. The option for two columns on a phone is one of the most desired features from my clients, and often times, I’m forced to recommend them using The7 Theme in order to achieve the looks and function they want, because it’s something that happens automatically with that theme, and well, purely because this isn’t something that works within X.

Theme.co will undoubtedly see this comment, and I hope they solve your issue here. I’m subscribing to this thread in the hopes that this helps me as well in the future. If you could include the CSS you’re using, that would be amazing.

Theme.co… please consider this for the future. Being more flexible with the space, even if it isn’t much, is a much desired trait for a theme as capable as yours.

– Charlie

Reply To: 2 columns on mobile layout

John Ezra — Mon, 16 Mar 2015 17:39:09 +0000

Hi there,

Thanks for updating the thread! We will submit this as a feature request and see if it is something we can work on. We have a lot of exciting improvements we are working on. Thanks for your suggestions.

@Marcel, To center your 2 column setup, try the following CSS. You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.x-visibility.x-visible-phone {
    margin: 0 auto;
}

Hope this helps – thanks!

Reply To: 2 columns on mobile layout

marcel w — Tue, 17 Mar 2015 18:27:29 +0000

Thank you for the help Themeco.

@Charlie P

I used the following CSS in the custom css settings on the page itself:

.x-visibility.x-visible-phone {
margin: 0 auto;
}
@media (max-width: 767px) {
.x-column.x-1-2 {
float: left;
width: 50%;
}
}

Hope it helps.
Cheers

Reply To: 2 columns on mobile layout

Nabeel A — Tue, 17 Mar 2015 22:08:12 +0000

Glad we could help and thanks for sharing.

Cheers!

Reply To: 2 columns on mobile layout

petalaz — Sat, 24 Oct 2015 23:02:53 +0000

I’m also interested in having 2 columns on a mobile device. Is there any way of doing it now in Cornerstone without the use of css?

I’d like for 2 columns in only one specific section/row to be side by side on mobile devices, by using the css above I’m essentially changing the behavior of all my sections. Also, when I select marginless columns, the 2 column effect is gone even with the modified css.

Reply To: 2 columns on mobile layout

Rad — Sun, 25 Oct 2015 02:53:48 +0000

Hi Petalaz,

No available options for that yet, it’s only possible for css for now.

Have you try adding !important? Please try this.


@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;
}
}

Hope this helps.