Footer columns

Hi,

I added a custom css to align-center all the footer columns for mobile and tablets (portrait-view), I also hide 3 columns. Even though I centered them, they still don’t look look. My question is:

Is there any way to move one column next to the other one for tablets and mobile devices (portrait view), so it shows each column next to each other? Because showing all columns one under the other one is not very practical, see attachment.

Or, is there any way to center them on tablets-portrait view? see attachment.

.footer-column-1,
.footer-column-2,
.footer-column-3,
.footer-column-4,
.footer-column-5{
text-align: center!important;
}

Thanks.

Attachments:

You must be logged in to view attached files.

Hello,

It is impossible to make your footer columns be shown in a row since you have hidden a few of them and by doing that break columns grid. You can try to make it centered on tablets by adding this additional CSS code for tablets

.footer-container .footer-column {
  width:100%!important;
}

Regards

Awesome. Thanks. Another footer question: When I hover the category links in the shop page, the underline has some effect. How can I add the same effect when I hover on the footer links? see picture attached.

Attachments:

You must be logged in to view attached files.

Hello,

Try to add the following code snippet to the Custom CSS area in Theme Settings.

.footer-container ul li a {
	position:relative;
   text-decoration:none;
}

.footer-container ul li a:after {
    content: " ";
    position: absolute;
  	top:100%;
  	right: 0;
    height: 1px;
    width:0;
    background-color: rgba(0,0,0,.3);
    -webkit-transition: width .25s ease;
    -moz-transition: width .25s ease;
    -o-transition: width .25s ease;
    transition: width .25s ease;
}

.footer-container ul li:hover > a:after {
	width:100%;
  	left:0;
}

Kind Regards
XTemos Studio

You are awesome. Thanks 🙂

You are welcome! 🙂

[Author]

Posts