Personalized checkout and custom promotions with Shopify Scripts
I am struggling with the header of my site and getting the second image to auto resize and fall in line with my company logo on a mobile device.
It does the job fine on desktop (shown below) but when it comes to mobile the second image is not in the centre, the wrong size, and not where I want it. Any suggestions? Really bugging me.
Solved! Go to the solution
This is an accepted solution.
Hello,
If you want to align the two logos on the middle then it will require to move some html:
<h1 class="header-logo text-center col-xs-12 col-sm-12 col-md-3"> <a href="/"> <img src="//cdn.shopify.com/s/files/1/1182/0422/t/2/assets/logo.png?v=9909353269390435188" alt="Kent Plumbing Supplies" style=" "> <img src="https://cdn.shopify.com/s/files/1/1182/0422/files/The_IPG_Logo_-_Colour_-_Cropped.png?v=1579704192" class="hidden-lg" style="padding-right: 20px;display: inline-block;padding: 0;margin-left: 10px;float: none;" alt="" align="right"> </a> </h1>
You should add the second logo (hide on desktop, visible on mobile) after the main logo, and use that styles. Don't remove your liquid code, it's just a example, you can try it on a duplicated theme to test it. If you need more assistance please send us an email and we will respond ASAP.
Hi, @KPSRainham:
You can use this CSS styles to fix that issue:
@media (max-width: 991px){ .header-middle.container .row > h1 img{ max-height: 30px; } .header-middle.container .row > p { text-align: center; margin: 0; } .header-middle.container .row > p img{ padding-right: 20px; max-height: 50px; padding: 0; margin-top: 10px; float: none; } }
Paste that code at the bottom of your CSS file.
Thank you.
Which file should this be pasted onto please?
This is an accepted solution.
Hello,
If you want to align the two logos on the middle then it will require to move some html:
<h1 class="header-logo text-center col-xs-12 col-sm-12 col-md-3"> <a href="/"> <img src="//cdn.shopify.com/s/files/1/1182/0422/t/2/assets/logo.png?v=9909353269390435188" alt="Kent Plumbing Supplies" style=" "> <img src="https://cdn.shopify.com/s/files/1/1182/0422/files/The_IPG_Logo_-_Colour_-_Cropped.png?v=1579704192" class="hidden-lg" style="padding-right: 20px;display: inline-block;padding: 0;margin-left: 10px;float: none;" alt="" align="right"> </a> </h1>
You should add the second logo (hide on desktop, visible on mobile) after the main logo, and use that styles. Don't remove your liquid code, it's just a example, you can try it on a duplicated theme to test it. If you need more assistance please send us an email and we will respond ASAP.
@PremierStores
Hi Premier, part of this works perfectly but I’m not sure which part. Forgive me I’m not 100% there with coding. I have circled the part i have removed below and replaced it with the coding you have sent. When this is in place it works PERFECTLY on the mobile device (have attached images) but it doesn’t work well with desktop, and removes the strap line “Quality products.....” am i removing the wrong thing or perhaps placing it in the wrong area? Big ask but would really appreciate it if i can ask you what to remove and where to add it. It is also showing twice on desktop and messing the layout of it all. This is probably to do with the positioning I’m getting wrong or not knowing how to hide on desktop but appear on mobile. Any further help would be greatly appreciated!
appears fine on mobile as shown on previous image, but removes strap line and ruins positioning on desktop as shown below.... think i may have entered in wrong area?
Please send us a private message with your Shopify URL then we can send you an invitation to your Shopify as a collaborator.
Hi @PremierStores thank you so much for your help on all of this. After a few hours of searching and testing i have managed to sort it using the code you have provided.
Thank you again for your help - it is greatly appreciated!
Apologies - I may have mislead you on which image I need where....
I would like "The IPG" logo to ideally be on the same line as "KPS" perhaps on the right of it with some amount of spacing. If not then if its possible to have "The IPG" logo directly underneath the "KPS" logo and the same width and auto height so it falls in line.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024