Navigation
Archive / How to add space below a column?
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • February 5, 2017 at 6:35 am #1358531
    emigriff
    Participant

    Hi everyone,

    I’m working on a travel website and on the homepage have a column dedicated to six different countries: http://www.midiatoursglobal.com/home/

    It looks nice on desktop but when you drag your screen to mobile size there is no space under the “learn more” buttons before going to the next country. I want to add some space so each column looks like it stands alone on mobile.

    First, I tried to add a bottom margin to the learn more buttons, didn’t do anything. Then I tried to add padding to the buttons, nothing.

    So I made the columns all have the class “home-country-column” and am thinking some css for all these columns could do the trick. I tried margin and padding but no avail. Any other tricks I could try?

    Thank you!

    Emily

    February 5, 2017 at 7:26 am #1358572
    Christopher
    Moderator

    Hi there,

    Please add following code in Customize -> Custom -> Global CSS :

    @media (max-width:767px){

.x-column.x-sm.x-1-3 {
    margin-bottom: 30px;
}
}

    Hope it helps.

    February 5, 2017 at 7:27 am #1358573
    Thai
    Moderator

    Hi Emily,

    Please try with this CSS:

    @media (max-width: 767px){
    #homepage-2 .home-country-column {
        margin-bottom: 25px;
    }
}

    Hope it helps 🙂

    February 5, 2017 at 9:33 pm #1359096
    emigriff
    Participant

    Amazing! Both of those worked 😀 Thanks guys.

    February 6, 2017 at 12:05 am #1359191
    Rad
    Moderator

    You’re so much welcome!

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