How can I adjust the size of my mobile SVG logo without affecting the desktop version?

Store Design
, ,
1

I created a new SVG logo for my store header: custommattressmakers.com. It looks great and the size is perfect.

However, the size of the logo on mobile is very small. I’ve already set the maximum logo with to 250 px in the Customize header settings. Is there a way to make the mobile SVG logo size larger and not affect the desktop one? I’ve attached pictures of both as reference.

Custom Mattress Makers.jpeg
Custom Mattress Makers.jpeg1290×1829 155 KB

Screenshot 2023-12-14 at 3.53.29 PM.png
Screenshot 2023-12-14 at 3.53.29 PM.png2506×1310 302 KB

2

Hi @NickCMM , add the below code to your theme’s CSS file.

@media screen and (max-width:480px) {
.header__heading-logo {
    width: 230px !important;
}
}

Notice I used 230px here. You can increase or decrease it per your need.

3

Thanks for the reply! Would this be added to the base.css file? Or a different one? Does it go at the bottom of the file, or top?

4

@KabirDev I actually just added it to the Custom CSS section. It’s looks beautiful. The logo is the perfect size on mobile now.

Thanks for your help with a solution to this,