Re: Works on desktop, not on a device?

Solved

Why isn't my website's second image resizing properly on mobile devices?

KPSRainham
Tourist
16 0 1

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.

DesktopDesktopMobileMobile

Accepted Solution (1)
PremierStores
Shopify Partner
285 28 52

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.

Let's make the best store!
Contact us at: [email protected]

View solution in original post

Replies 9 (9)

PremierStores
Shopify Partner
285 28 52

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.

Let's make the best store!
Contact us at: [email protected]
KPSRainham
Tourist
16 0 1

Thank you.

 

Which file should this be pasted onto please?

KPSRainham
Tourist
16 0 1
PremierStores
Shopify Partner
285 28 52

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.

Let's make the best store!
Contact us at: [email protected]
KPSRainham
Tourist
16 0 1

@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!

 

8CB3AB15-812A-43E9-999B-BC9254290089.jpeg2EC50180-0911-46E9-90A2-C87E60B72989.jpeg


 

KPSRainham
Tourist
16 0 1

@PremierStores 

 

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?

PremierStores
Shopify Partner
285 28 52

Please send us a private message with your Shopify URL then we can send you an invitation to your Shopify as a collaborator.

Let's make the best store!
Contact us at: [email protected]
KPSRainham
Tourist
16 0 1

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!

KPSRainham
Tourist
16 0 1

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.