Navigation
Archive / Column swap advice for @media queries
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • August 2, 2016 at 2:06 am #1113323
    Claire L
    Participant

    Hello,

    Would love your advice on the best way to go about performing a column swap for better mobile UX.
    REf: http://hp.designcounsel.com.au/our-produce/fresh-herbs/

    I want to swap the image columns to all align left in the instance the site is being viewed via a mobile device so the UX is consistent ie, image first description second in the stack.

    Kind regards,

    Claire 🙂

    August 2, 2016 at 2:32 am #1113343
    Rupok
    Member

    Hi Claire,

    Thanks for writing in! You can use the Content Hiding feature in Cornerstone. Let’s select the Section/Row and check for any device to hide – http://prntscr.com/9a4ibh

    (If Mobile icon is checked then the content will be hidden for mobile devices)

    So you can just hide a section for mobile and use different one to hide in desktop.

    Hope this helps.

    Cheers!

    August 2, 2016 at 9:35 am #1113830
    strobley
    Participant

    Hi Claire,

    Depending on what you need, this may be a better solution: http://xthemeusers.com/switch-columns-mobile/

    Cheers 🙂

    August 2, 2016 at 10:15 am #1113876
    Rupok
    Member

    Thanks for sharing @strobley

    Certainly it’s helpful.

    Cheers!

    August 2, 2016 at 9:26 pm #1114820
    Claire L
    Participant

    Hi Rupok & Strobley – Thanks for your advice. I had tested the first method previously and it worked. Was curious to learn of other methods so I’ll definitely give this CSS solution a shot too.

    Thanks again for your help – you’re both superstars!

    Cheers,

    Claire 🙂

    August 2, 2016 at 11:42 pm #1114892
    Prasant Rai
    Moderator

    You are most welcome, Claire. Feel free to ask us again. Have a great day! 🙂

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-1113323 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>