Make Logo Responsive – Minimum Pro

[Juice370]

Hi,

How do you make the logo resize on different device screens in the Minimum Pro theme? Here is the site and logo in question: ecommercegetitright.com

Any help appreciated.

Thanks

http://www.ecommercegetitright.com

[emasai]

It looks responsive to me?

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[Juice370]

You've seen the text version, I'd removed the logo when testing and forgot to re-upload it. Please check now. Perplexed as to why one SP theme (enterprise pro) with exact same settings results in a responsive logo and the other theme (minimum pro) not?

Thanks a lot

[emasai]

It is responsive but only at 320px, there are some intermediate widths that need adjusting, so you need to add some css into the media queries at 600px
.title-area {
width: 100%;
float: none;
}
and
.site-header .widget-area {
max-width: 100%;
}

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[Juice370]

I've emailed as I'm seeing no change with suggestions made.

[Jess]

Juice370,

What the above commenters are saying is that you need additional media queries in your CSS file. For example, if you scroll to the bottom of your .css theme file and add this code....

@media only screen and (max-width: 610px) {
.site-title a {
background-size: contain !important;
}
}

.... you should find that from 610px screen-widths and lower, the logo will get smaller as the screen-width decreases. You will still need to make some other tweaks to make it look really great at all screen sizes (I use Chrome's dev tools to play with the CSS before adding it to the file), but hopefully that helps to get you started!

---

Jess

[Author]

Posts