Navigation
Archive / Prevent content band stacking on mobile.
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • September 23, 2016 at 7:35 pm #1188507
    laurenrundquist
    Participant

    URL: http://www.naturalwayconnection.com
    Wordpress Version: 4.5.4
    X Version: 4.6.1
    Cornerstone Version: 1.3.2

    Hi,

    There is a content band on my home page (screenshot attatched) with four columns and one image in each column. I love how this content band appears on desktop with the images in line, but when the screen is reduced between 768px the images switch to stacking, which I don’t want.

    How can I prevent this from happening?

    I imagine there are a few ways to do it–maybe using classes to change the size of each of the four images with media queries, or maybe there is something simple that can make the content band and image sizes mobile responsive. I imagine that X Theme should have a simple way to prevent stacking with reduced screen sizes.

    I would like to be able to do this by adding CSS into the customizer, if possible, or something relatively simple.

    Thank you!

    September 23, 2016 at 8:10 pm #1188638
    Jade
    Moderator

    Hi there,

    You can add this under Custom > CSS in the Customizer.

    .home #x-content-band-4 .x-column, 
.home #x-content-band-6 .x-column {
    width: 25% !important;
    float: left;
}
    September 25, 2016 at 6:01 pm #1190068
    laurenrundquist
    Participant

    That’s perfect. Thanks a bunch!

    September 25, 2016 at 7:45 pm #1190192
    Rue Nel
    Moderator

    You’re welcome! We’re happy to help you out.
    If you need anything else we can help you with, don’t hesitate to open another thread.

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