Increase Footer Menu Margins on Mobile

Support
#1

Hi guys,
i´m trying to increase footer menu margins on mobile but with no success.
I need a little help with css.

#2

Hello @jlampreia,

Thanks for writing in!

Please add following CSS under X > Theme Options > CSS:

.x-colophon.bottom .x-nav li {
    margin: 0 0.07em;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

1 Like
#3

Hi Prasant,
thanks for your help, yes that code is for the space between the menu words, what i need is the space between the lines. I can´t find this code.

#4

Hello @jlampreia,

Thanks for updating the thread. :slight_smile:

Please use following CSS under X > Theme Options > CSS:



@media only screen and (max-width: 600px) {
  .x-colophon.bottom .x-nav li {
    line-height: 20px
}

.x-colophon.bottom .x-colophon-content p {
    line-height: 18px; /* for copyright text*/
}
}

Thanks.

1 Like
#5

Thanks Prasant,
the code it’s working very nice.

#6

You’re more than welcome, glad we could help.

Cheers!

#7

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