Works on desktop, not on a device?

Solved
Highlighted
Tourist
12 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

0 Likes
Highlighted
Shopify Partner
239 22 29

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: thepremierstores@gmail.com
0 Likes
Highlighted
Tourist
12 0 1

Thank you.

 

Which file should this be pasted onto please?

0 Likes
Highlighted
Tourist
12 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.

0 Likes
Tourist
12 0 1
0 Likes
Highlighted

Success.

Shopify Partner
239 22 29

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: thepremierstores@gmail.com
1 Like
Highlighted
Tourist
12 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


 

0 Likes
Highlighted
Tourist
12 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?

0 Likes
Highlighted
Shopify Partner
239 22 29

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: thepremierstores@gmail.com
0 Likes
Highlighted
Tourist
12 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!

0 Likes