Docs

[blueprint]

Hi support,

I tried to customize my footer (change background-color, font size, line heigth …) Now it looks more or less like I want it to. Except these problems:
– On mobile devices the menue items have weird alignment (see screenshot).
– There is a dark grey line under the last menue item of each widget I can’t get rid of.
Can you tell me how to resolve this?

Here is the code I used (please let me know if there might be a simpler, more elegant solution):

/* Customize Footer */
.x-colophon.bottom {
	padding: 5px 0;
}

.x-colophon.top {
    background-color: #444444;
padding-top: 80px; 
  padding-bottom: 100px;
 		 border-top: none !important;
}

.widget_categories ul > li, .widget_product_categories ul > li, .widget_nav_menu ul > li, .widget_pages ul > li {
  	display: inline-block;

		padding-right: 50px;
  	line-height: 20px;
 		 border-top: none !important;
    border-top: none !important;
    border-bottom: none !important;
    
}

.h-widget {
    margin: 0 0 0.2em;
    font-size: 120%;
    line-height: 1;
  	border-bottom: 1px solid #ffffff;
  	padding-bottom: 5px;
  color: #ffffff;
}

.widget a{
    font-size: 14px;
    line-height: 1;
  	color: #ffffff;
  	border-top: none !important;
    border-top: none !important;
    border-bottom: none !important;
    
}

.widget a:hover{
    font-size: 14px;
    line-height: 1;
  	color: #00afff;
   
}

Thanks!

[blueprint]

This reply has been marked as private.

[blueprint]

Here is the screenshot…

I want the menue items to stay one below the other at all times.

[Joao]

Hi There,

To get rid of the line please add the following code to Appereance > customizer > Custom > CSS

 .widget_nav_menu ul, .widget_pages ul {
    border-color: transparent;
}

Regarding the spacing please add:

widget_nav_menu ul > li {
    padding-right: 0px;
}

Hope that helps

Joao

[blueprint]

Thank you, the first code was helpful.

The second code is not what I intended. As mentioned I want the menue items to be aligned one below the other at all times. I this possible?

Thank you!

[Friech]

Hi There,

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

@media (max-width:  979px) {
	footer .widget_nav_menu ul > li {
     display: block; 
}
}

Hope it helps, Cheers!

[blueprint]

Perfect!!! Thanks a lot!

[Rad]

You’re welcome!

[Author]

Posts