How can I prevent logo and social icons from overlapping on mobile?

[TBS2022]

Hello

I am using the impulse theme

On my footer i have my logo and social media icons

desktop

mobile

What can i do to stop them overlapping on mobile?

Regards

[PageFly-Richard]

Hi @TBS2022

can you share with me the page url

[TBS2022]

www.thebodyshop.cy

password: meabro

[PageFly-Richard]

@TBS2022

I’m Richard Nguyen from PageFly- Free Landing Page Builder

You can try with this code.

Follow this:

Go to Online Store->Theme->Edit code->theme.css ->paste bellow code in bottom of file

@media screen and (max-width: 767px){

.grid__item.footer__item–1494301487048 {

display: flex;

flex-direction: column;

align-items: center;

}

ul.no-bullets.footer__social {

margin-top: 0 !important;

}

}

Hope that my solution works for you.

Best regards,

Richard | PageFly

[DelightCart]

@TBS2022 Please send me store url.

[oscprofessional]

Hello @TBS2022

It will be helpful if you try this code -

Go to the Online Store->Theme->Edit code->theme.css → Add code at the bottom

@media only screen and (max-width: 768px) {
.grid__item.footer__item--1494301487048 .footer__logo {
    text-align: center;
}
ul.no-bullets.footer__social {
    text-align: center !important;
    margin: 0 !important;
}

[MandasaTech]

Hello @TBS2022 ,
Follow the below steps.

Go to Online Store->Theme->Edit code->theme.css → paste bellow code in bottom of file

@media(min-width: 280px) and (max-width: 767px){

.no-bullets.footer__social {
margin-top: -5px !important;
text-align: center;
float: left !important;
width: 100%;
margin-bottom:12px;

}

.footer__logo {
text-align: center;

}

}

[PageFly-Victor]

Hi @TBS2022

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

-Go to Online Store->Theme->Edit code

-Asset-> theme.css paste the below code at the bottom of the file.

@media (max-width:767px){

.grid__item.footer__item–1494301487048 {

display: grid !important;

grid-template-columns: 1fr 1fr;

align-items: center;

}

.grid__item.footer__item–1494301487048 .no-bullets.footer__social{

display: grid !important;

grid-template-columns: repeat(4,1fr);

margin-top: -15px !important

}

}

Hope my solution works perfectly for you!

Best Regards;

PageFly

[TBS2022]

Hello - I have tried all your solutions but nothing seems to work

[PageFly-Richard]

@TBS2022

You can try again with this code.

Follow this:

Go to Online Store->Theme->Edit code->theme.liquid->paste bellow code in tag

@media screen and (max-width: 767px){ .grid__item.footer__item--1494301487048 { display: flex !important; flex-direction: column !important; align-items: center !important; } ul.no-bullets.footer__social { margin-top: 0 !important; } }

Please refer to this screenshot: https://prnt.sc/afpBHc_RJbvN

[TBS2022]

I do not have body class = gradient on my theme.liquid file

[suyash1]

@TBS2022 - add this css to the very end of your hteme.css file and check

@media screen and (max-width:749px){

.footer__logo {text-align: center;}

ul.no-bullets.footer__social {
    float: none;    margin-top: 0;
    justify-content: center;    text-align: center;}
}

[PageFly-Victor]

if you tried all and still not working can you give me access. I will help you to deal with it quickly

[TBS2022]

please send me a request

[TBS2022]

@PageFly-Victor how do i give you access?

[PageFly-Victor]

you can install PageFly and give access to create a task account with Gmail [email removed]

[TBS2022]

can you send me a request for collaboration - its easier

[PageFly-Victor]

I just sent a request, you can check it. Do you want it to display 2 lines or 1 line?

[TBS2022]

2 lines please

[TBS2022]

just saw its done already - that’s perfect - thank you so much