Styling of Liquid Objects : what gives?

Highlighted
New Member
3 0 0

Hello all, I'm trying to decrease the size of a logo included in the nav bar. I have virtually no experience with liquid so please correct my logic.

 

I wrapped the logo object in a div and named it class="logo-in-nav". Then, below the closing header tag I wrote some css to style, so we have: (360px width is the size at which the logo is squished up, increasing the height of nav bar)

<header>
<div class="logo-in-nav">{%include 'logo' %}</div>

<!--nav-->
</header>

<style>
@media all and (min-width: 0px) and (max-width: 360px;) {
      .logo-in-nav {
        height: .5em;
        width: .5em;
      }
    }
</style>

Edit: Shopify didn't like the original message and adjusted accordingly. If there are any syntax issues i apologize

0 Likes
Trailblazer
529 129 170

Hi, @haughtyhay ,

This is Evita from On The Map.

 

Right now you are editing just the div container of the images, but you have to edit image directly, so for that you need to edit img tag:

 

@media screen and (max-width: 360px) {
    .logo-in-nav img {
        height: .5em;
        width: .5em;
    }
}

Oh, I removed min-width: 0px for media query, it's not necessary.

 

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
1 Like