Navigation
Archive / 2 columns on mobile layout
This is archived content. Visit our new forum.
  • Author
    Posts
  • March 16, 2015 at 10:18 am #228303

    marcel w
    Participant

    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

    March 16, 2015 at 11:03 am #228359

    CharliePryor
    Participant

    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

    March 16, 2015 at 12:39 pm #228450

    John Ezra
    Member

    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!

    March 17, 2015 at 1:27 pm #229359

    marcel w
    Participant

    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

    March 17, 2015 at 5:08 pm #229561

    Nabeel A
    Moderator

    Glad we could help and thanks for sharing.

    Cheers!

    October 24, 2015 at 6:02 pm #638229

    petalaz
    Participant

    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.

    October 24, 2015 at 9:53 pm #638406

    Rad
    Moderator

    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.

  • Author
    Posts