Space between footer columns on mobile view

Store Design
1

peakclo_0-1723457349267.png
peakclo_0-1723457349267.png445×382 8.08 KB

Hello,

I am using Dawn 15.0.2. I have used the below code to create a dropdown menu on my footer for mobile view.

I need to make the space between columns bigger and more evenly spread. Any help is appreciated.

URL: www.peakclo.com

Paste the below code before 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
@media(max-width: 767px){
 footer .footer-block__details-content {
   display: none;
 }
 .footer__blocks-wrapper h2.footer-block__heading {
    position: relative;
 }
 .footer__blocks-wrapper h2.footer-block__heading:after {
    content: "\f078";
    font-family: FONTAWESOME;
    font-size: 12px;
    right: 0;
    position: absolute;
    transition: 0.5s;
 }
}
</style>

Paste the below code before 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
if ($(window).width() < 767){
 $('footer .footer-block__heading').each(function(){
    $(this).click(function(){
        $(this).siblings('.footer-block__details-content').slideToggle()
    })
 })
}
</script>
2

Hi @peakclo ,

To adjust the space between footer columns on mobile view, you can add the following code just above the closing tag in your theme’s code:

This code ensures that each footer column takes up the full width of the screen on mobile devices, creating more space between the columns.

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans

3

Hi,

Thanks for the reply. This has changed the layout to be top and bottom. Can i still have them side by side?

peakclo_0-1723458423473.png
peakclo_0-1723458423473.png448×113 1.79 KB

4

Hello @peakclo
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file.

@media (max-width: 749px) {
.footer__content-top .footer__blocks-wrapper {
width: 100%;
}
}

result

22.png
22.png402×832 14.9 KB

If this was helpful, hit the like button and accept the solution.
Thanks

5

HI @peakclo ,

Got it! To keep the columns side by side, please remove the previous code and insert the following instead:

@media (max-width: 749px) {
    .footer__content-top .footer__blocks-wrapper {
        width: 100% !important;
    }
}

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans

6

Thanks, This works great. Is it possible to have more space between columns. The arrow beside help is very close to Company.

7

Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file.

@media screen and (max-width: 749px) {
.footer-block.grid__item {
padding: 10px !important;
}
}

result

25.png
25.png430×832 10.3 KB

Thanks