Space above columns in mobile view

Support
#1

Hi, see this page:

Looks great on desktop, but on mobile, when the top link list stacks, there is a space above each column, anyway I can remove this so it looks like a full list, not seperated?

at the moment it looks like this:

Thanks!

#2

Hello @logoglo,

Thanks for writing in!

  • Please inspect the Custom Headline element and add a class.

  • After that add following CSS under X > Theme Options > CSS:


@media only screen and (max-width: 600px) {
  .add-class-name-here {
    margin-top: 0;
}
}

Please replace class name as per your requirement.

Thanks.

#3

Done, but it hasnt worked, also, they are not custom headlines, they are just text in columns.

#4

Hi @logoglo,

It’s the spacing from <ul> element. Please change that CSS to this

@media only screen and (max-width: 767px) {
  .remove-margin ul {
    margin-bottom: 0px !important;
}
}

Hope this helps.

#5

I only want it removing from the list…not every column in the site…

#6

Hey @logoglo,

Since the code provided above is class specific so it won’t apply site wide, if you’ve given class remove-margin to all of your columns site wide then you can give a new class to these three columns e.g remove-margin-col that has a list so the CSS is only applied to those columns only. e.g:

@media only screen and (max-width: 767px) {
  .remove-margin-col ul {
    margin-bottom: 0px !important;
}
}

However if it’s not the case then you can safely add the above code to remove the spaces. Hope this helps!

#7

Gotchya, that worked, thanks.

#8

You are most welcome. :slight_smile:

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.