How do I make my logo shrink between two desktop version breakpoints

Design help General
1

I am working on this site:

https://preview.webflow.com/preview/themodelconvention?utm_medium=preview_link&utm_source=dashboard&utm_content=themodelconvention&preview=cda0fe78e707ed7337e52199302da15c&mode=preview

I have designed it with a max width of 1640 pixels
However, the top menu goes all messy between 1440 and 991 (when it goes in to tablet mode)

If the logo where to shrink between those breakpoints, I should be fine.
However, I can not get my settings right for the SVG file (or navbar…)

Thank you in advance for your help

G

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

You need to set custom media queries and style the CSS manually. After that, you need to put the style tag in the HEAD or the FOOTER of the website

For example:

  <style>
@media only screen and (max-width: 991px) {
    
 .mapouter {
        position:relative;
        text-align: left;
        height: 45vw;
        width: 100%;}
  </style>

Please, check this link out: CSS Media Queries

3

thank you Jeandcc, I will give it a go

1 Like