Navigation
Archive / 3 columns – Need to be responsive for mobile
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • February 20, 2017 at 3:21 pm #1378761
    tylervarian
    Participant

    I have built a page (still under construction) Using X and Cornerstone. I have 3 columns. But when I shrink the page the 2nd and 3rd columns get shuffled around and don’t align properly. I would like everything to align left in responsive mode. How can I accomplish this?

    http://69.195.124.107/~tudiofi8/pricing/

    Thanks so much for your help!

    February 20, 2017 at 5:21 pm #1378897
    Darshana
    Moderator

    Hi there,

    Thanks for writing in! Please try adding the following CSS media query into your Customizer, Custom > CSS area. 

    
@media(max-width:480px)
  .page-id-494 #x-section-5 .x-column.x-sm {
    float: left;
    width: 30.6667%;
  }
  .page-id-494 #x-section-8 .x-column.x-sm {
    float: left;
    width: 30.6667%;
  }
  .page-id-494 #x-section-9 .x-column.x-sm {
    float: left;
    width: 30.6667%;
  }
  .page-id-494 #x-section-10 .x-column.x-sm {
    float: left;
    width: 30.6667%;
  }
  .page-id-494 #x-section-13 .x-column.x-sm {
    float: left;
    width: 30.6667%;
  }
  .page-id-494 #x-section-14 .x-column.x-sm {
    float: left;
    width: 30.6667%;
  }
  .page-id-494 #x-section-15 .x-column.x-sm {
    float: left;
    width: 30.6667%;
  }
  .page-id-494 #x-section-18 .x-column.x-sm {
    float: left;
    width: 30.6667%;
  }
  .page-id-494 #x-section-19 .x-column.x-sm {
    float: left;
    width: 30.6667%;
  }
  .page-id-494 #x-section-20 .x-column.x-sm {
    float: left;
    width: 30.6667%;
  }
  .page-id-494 #x-section-23 .x-column.x-sm {
    float: left;
    width: 30.6667%;
  }
}

    Hope that helps.

    February 20, 2017 at 7:01 pm #1379077
    tylervarian
    Participant

    Thank you Darshana! This is Awesome!! There is one set of data on the page that does not align properly. They are in the first row/ set of columns. Please see the screenshot.

    Thanks so much for your help!

    February 21, 2017 at 12:12 am #1379315
    Friech
    Moderator

    Hi There,

    Please add this on your custom CSS.

    @media (max-width:  767px) {
	.page-id-494 #x-section-5 .x-column.x-1-3 {
	width: 30.66666%;
	float: left;
	}
}

    The button on that ROW may look different, please remove the class mrl applied on it.

    Thanks

    February 21, 2017 at 8:38 am #1379830
    tylervarian
    Participant

    YOU’RE THE BEST!!! Thank you so much! X Theme support is the best there is! xoxo

    February 21, 2017 at 8:53 am #1379865
    Darshana
    Moderator

    Glad we were able to help 🙂

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