How to Make Logo Size Larger for Desktop View Only

Solved
mhalfya
Tourist
37 0 0

Hi there!

 

I'm trying to make the logo size larger on my site for the desktop view only. When I try to change the logo size via the Shopify editor, it changes both the mobile and desktop logo sizes. However, the logo size on mobile is fine and it is just the desktop view I'm looking to change.

 

I'm currently using the Prestige theme

 

Any suggestions would be greatly appreciated!

 

Thanks! 

Accepted Solution (1)

Accepted Solutions
oscprofessional
Shopify Partner
9202 1563 1928

This is an accepted solution.

@mhalfya,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in bottom of file

@media screen and (min-width: 1024px) {
 .Header__LogoImage {
	max-width: 250px !important;
}
 }
If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87

View solution in original post

Replies 6 (6)
oscprofessional
Shopify Partner
9202 1563 1928

Hello ,
Please share your site url.
So that i can check and provide you exact solution here.

If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
mhalfya
Tourist
37 0 0

Hi there,

 

Thank you for the reply!

 

My URL is: Kadabra.ca

 

Thanks!

oscprofessional
Shopify Partner
9202 1563 1928

This is an accepted solution.

@mhalfya,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in bottom of file

@media screen and (min-width: 1024px) {
 .Header__LogoImage {
	max-width: 250px !important;
}
 }
If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87

View solution in original post

Adam_Lucas
Shopify Partner
3 0 5

Hey, @mhalfya ! My name's Adam, and I work with Shogun's support team. As someone else pointed out, it's possible to make the customization you had in mind with a change to the theme's CSS - indeed, that'd be the only way of making the change if the content you want to adjust is in the header or footer of the page.

 

With that said, if you'd be interested in having a way to easily make the body of your pages more responsive on different screen sizes, I think you might find a lot to like about our app, Shogun Page Builder - we've made screen responsiveness a major focus of what we do, so it's possible to use Shogun to make either small tweaks to an element - perhaps adding margins that only appear on mobile devices so as to better control how an image is positioned - to significant changes like making multiple versions of an element that are laid out entirely differently, with perhaps one appearing on mobile screens, another on tablets, and another on larger devices - all with no coding or other knowledge of CSS required, since we offer an intuitive drag-and-drop editor.

 

Shogun is completely free for 10 days, so, while I'm confident you'll find it to be enormously useful in making beautiful pages that are responsive across all screen sizes, there's no contract and no obligation - you'd be able to uninstall it without seeing a single payment if you decide it's not for you. Check out what it can do for you here, and if you need any assistance, we offer 24/7 support at support@getshogun.com. Thanks for your consideration!

Adam Lucas | Support Specialist, Shogun
support@getshogun.com | Try Shogun Page Builder for Shopify for FREE!
mhalfya
Tourist
37 0 0

Great, that worked perfectly! Thank you so much!

Liz93
Excursionist
41 0 13

Hi @oscprofessional 

I'm trying to do the same for my site. The logo is good for my mobile view, although way to small for my desktop view.

Are you please able to help me?

https://yoursimpleliving.com/

Psw: test27

Thanks heaps!