Media Query Help - Logo Resizing

[ljakiel]

I'm trying to have our logo resize on tablet and mobile and inspecting the code have found that I can change the width to get it to look how I want. But I cannot figure out the class to target to get the media query to work.

Ideally I would want the logo smaller (250px is what I was testing when inspecting the code) and to stay in the left corner of the page.

Here is the link to the template I am working with:
https://go.unearthlabs.com/eam-software-0?hs_preview=hnoCaJeB-50350526779

[natsumimori]

Thank you so much for your input @miljkovicmisa and @webdew !

[webdew]

Hi @ljakiel,

Please use this code in your style css:-@media (max-width:992px){

.header-container #hs_cos_wrapper_module_16239579204121650 {
text-align: center;
}
.header-container #hs_cos_wrapper_module_16239579204121650 img {
max-width: 225px;
margin: 0 auto;
width: 100%;
}

}

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards. 

[miljkovicmisa · Accepted solution]

Hello @ljakiel , you can use the following snippet to achieve your request:

/* this code adds a width of 250px to the logo image element when the windows is 1139px and smaller */
@media (max-width: 1139px) {
  .hs_cos_wrapper_type_logo img {
    width: 250px!important;
  }
}

Note: If you are a developer, there is a better way to do it, if you are okay with writing code to a template or editing dnd template answer here with the type of the template you are using so I can show you how to add custom classes to modules.
Otherwise this is perfectly okay to do and will do the job!

If my answer was helpful please mark it as a solution.

[natsumimori]

Thank you for posting @ljakiel .

I wanted to tag in our Community contributors here- @miljkovicmisa and @Sjardo , would you mind sharing your advice for @ljakiel ?