Adjust Menus in Footer

[JoeyRoo]

Hi, is there a way to adjust the Menus in the Footer so they are all in line? Currently the "Wholesale" Menu is sitting below the Social icons, but I want it to sit next to the "Contact" menu

https://theothelabel.com/

[suyash1 · Accepted solution]

@JoeyRoo - please add this css to the very end of your app.css file and check,
Shopify Admin -> Online Store ->Theme -> Edit code -> app.css

@media screen and (min-width:48em){
#footer .row .medium-6{flex: 0 0 33%;}
}

[JoeyRoo]

Perfect. Thank you!

[Sweans]

Hi @JoeyRoo ,

Here the problem is that there is a css class in your social div that says medium-6 this is to attain the width of 6% of the overall in medium screen size devices. if you have experience you can easily find the snippet for this change the class to medium-4

if you have no experience regarding this you can follow simple steps:

1. Go to Shopify Admin Panel

2. Select Online Store

3. In Online Store click the "..." and choose “edit code” from the menu.

4. In app.css,

#footer .small-12.medium-6.columns {
flex: 33%;
}

Result:

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,
Sweans

[BSS-TekLabs]

- Here is the solution for you @JoeyRoo 
- Please follow these steps:

- Then find the base.css or theme.css or app.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

 

@media only screen and (min-width: 600px) {
.footer .medium-6 {
        flex: 0 0 30% !important;
    }
}

Copy

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[GTLOfficial]

Hello @JoeyRoo 
Go to online store ---------> themes --------------> actions ------> edit code------->assets --->app.css ----> line number 835
search for this code

@media print, screen and (min-width: 48em) {
.medium-6 {
flex: 0 0 50%;
max-width: 50%;
}
}

and replace with this code

@media print, screen and (min-width: 48em) {
.medium-6 {
flex: 0 0 30%;
max-width: 50%;
}
}

and the result will be

If this was helpful, hit the like button and mark the job as completed.
Thanks