How to center the footer content on mobile?

Store Design
,
1

Hello ! Here’s my website using the Impulse theme : https://www.lothaire.fr

On desktop, the footer columns act normally but I hate the way they behave on mobile. Any idea how to get the columns to stack as one column on mobile ?

2

Hey @LothaireBordeau

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
@media screen and (max-width: 767px) {
.grid_footer {
    display: flex !important;
    flex-flow: column !important;
    padding-bottom: 20px !important;
    padding-top: 20px !important;
}
.grid_footer .grid__item {
    padding-left: 0 !important;
}
}
</style>

RESULT:

image
image354×757 59.6 KB

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

3

Try this code in “Theme settings”=> “Custom CSS”:

@media (max-width:768px){
  .grid_footer {
    flex-wrap: wrap;
  }
}

Will still be accordions, but stacked vertically, as you asked.

4

Hello @LothaireBordeau ,

I hope you are well!

Please copy and paste the below code to the top of base.css or theme.css. To find base.css or theme.css, go to Online store >> Themes >> Edit code and search for either base.css or theme.css

Alternatively, if the code didn’t work, copy and paste the code below by going to the Online store >> Themes >> Customize >> Click on Settings icon to the left >> Scroll down to the bottom and paste it to the custom CSS tab.

.grid_footer {
flex-direction: column;
padding-top: 20px;
padding-bottom: 20px;
}

5

This didn’t work, unfortunately.

6

Hello. It didn’t seem to work, for some reason. Thank you veyr much.

7

It works great for mobile, for it also makes it as one column on desktop :cry:

8

Sorry, I forgot to add media query wait I am sending again.

9

The code provided by me and @tim_tairli is completely accurate, if it’s not working then most probably there’s an issue in the way you’re adding the code so try to double check that.

Cheers,
Moeed

10

Please copy and paste this one

@media (max-width: 768px) {
.grid_footer {
flex-direction: column;
padding-top: 20px;
padding-bottom: 20px;
}
}

It will work only for mobile.

11

It worked, but I had to use the code suggested
MoeedShopify Partner and surround it with yours. Thank you very much.

12

Yessss ! Like that it works perfectly. Thank so su much.

13

But, you have marked the other person’s reply as a answer :smiling_face_with_tear:.