Docs

[Matthieu]

Hey there,
Can you tell me what to add to my custom css to allow more room to the footer menu elements ?
I’d like for tactile devices to have less possibility to accidentally touch the wrong link. Indeed, they are very close to each others.
Can you help me ?
URL : http://isatis.io/accueil

[Rahul]

Hey There,

Thanks for writing in!

To increase the spacing between the footer menu items, please add the following CSS at Appereance > Customizer > Custom > CSS :

.x-colophon.bottom .x-nav li a {
  letter-spacing: 4px;
}

Hope this helps!

[Matthieu]

Hi Rahul,
I’m afraid it doesn’t.
By more room, I meant some padding (up/down + left/right) between the different links and not more space between later.
Sorry about that, I should have given you more info…

[Rupok]

Hi there,

Thanks for writing back. So you want it for smaller screens, right? You can add this under Custom > CSS in the Customizer.

@media only screen and (max-width: 480px) {
.x-colophon.bottom .x-nav li a {
  margin: 5px;
}
}

You can adjust the media query or just take it off if you want this for all screen size. Also if you need padding, just add them for this selector, I think only margin is necessary to avoid clicking on wrong place.

Cheers!

[Author]

Posts