Shopify Dawn Theme Mobile View Footer

Solved

Shopify Dawn Theme Mobile View Footer

KN2002
Tourist
11 0 1

I want to make my website responsive to mobile view, and for the footer I have added my brand logo - this looks good in the desktop view but when I am looking on my phone the logo looks quite big. How can I change the size of the image just for my phone.

Accepted Solution (1)
suyash1
Shopify Partner
10845 1340 1716

This is an accepted solution.

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

@media screen and (max-width:749px){
.footer-block__image-wrapper img {max-width: 70%; margin: 0 auto;}
}
To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

View solution in original post

Replies 17 (17)

suyash1
Shopify Partner
10845 1340 1716

@KN2002 Can you please share this page link?

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
KN2002
Tourist
11 0 1

My website is not live yet, it is still wip.

suyash1
Shopify Partner
10845 1340 1716

@KN2002 - can you please share the preview link then?

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
KN2002
Tourist
11 0 1
KN2002
Tourist
11 0 1

renovawears.in

suyash1
Shopify Partner
10845 1340 1716

@KN2002 - password to view page?

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
KN2002
Tourist
11 0 1

Shared on message

suyash1
Shopify Partner
10845 1340 1716

This is an accepted solution.

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

@media screen and (max-width:749px){
.footer-block__image-wrapper img {max-width: 70%; margin: 0 auto;}
}
To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
KN2002
Tourist
11 0 1

This did not work 😞

suyash1
Shopify Partner
10845 1340 1716

@KN2002 - because you added the code but by mistake closing bracket } before this code has been deleted, so you need to put it back. It is like first screenshot, you need to make it like 2nd

 

 

suyash1_1-1742318390548.png

 

suyash1_2-1742318423523.png

 

 

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
KN2002
Tourist
11 0 1

made this change, but it is still not working 😞

KN2002
Tourist
11 0 1

@suyash1  anything that you are able to identify why this is not working.

suyash1
Shopify Partner
10845 1340 1716

@KN2002 _ it is working fine, I think you have solved the issue

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
KN2002
Tourist
11 0 1

@suyash1  Hey, the solution worked - I applied it on the custom css. thanks so much 🙂

Any idea if we can also change the padding between image and quick links (next section in the footer)?

suyash1
Shopify Partner
10845 1340 1716

@KN2002 - add this as well

 

@media screen and (max-width:749px){
.footer-block__details-content.footer-block-image {margin-bottom: 0rem;}
.footer-block-image .footer-block__image-wrapper {margin-bottom: 1rem;}
}
To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

ShishirHelps
Shopify Partner
95 3 6

@KN2002 

Please share your store live link with your Password. So I can see your store and would be help for you.

- I'm Shishir Hasan a Shopify Store Designer | CRO specialist.

- Need my help?

+8801762785429 (WhatsApp) || Work with Upwork


- If this solves the problem, please don't forget to Mark it as Solution!
KN2002
Tourist
11 0 1

Shared through message