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
@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%;}
}
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:
-
Go to Shopify Admin Panel
-
Select Online Store
-
In Online Store click the “…” and choose “edit code” from the menu.
-
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
- 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.
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
Perfect. Thank you!