KPC
Kevin Powell - Community•2y ago
Aleksandr M.

Image shrinks, icons don't

Hi guys! There's a problem with my navbar. I have a logo <img src="QuickCart.svg" alt="logo" /> and couple of FA icons in my unordered list. When I make the window width smaller, image shrinks down up until the point it's not visible anymore, while icons remain the same size. How can I make everything shrink? I mean, both the icons and the logo.Here's my JSX from Navbar component and couple of pictures: 
<nav className="flex items-center py-4 px-12 relative shadow-md w-full">
      <div className="flex gap-20 items-center flex-1">
        <Link to={"/"}>
          <img src="QuickCart.svg" alt="logo" />
        </Link>
        <SearchBar />
      </div>

      <ul className="flex justify-between gap-[5rem] ml-20">
        <li className="lg:hidden">
          <FontAwesomeIcon
            icon={faMagnifyingGlass}
            size={"2xl"}
            className="mr-2 cursor-pointer"
          />
        </li>
        <li>
          <FontAwesomeIcon
            icon={faUser}
            size={"2xl"}
            className="mr-2 cursor-pointer"
            onClick={() => {
              dispatch(setIsUserOpen(!isUserOpen));
              dispatch(setIsCartOpen(false));
            }}
          />
          <span className="hidden lg:inline">My account</span>
        </li>
        <li>
          <FontAwesomeIcon
            icon={faShoppingCart}
            size={"2xl"}
            className="mr-2 cursor-pointer"
            onClick={() => {
              dispatch(setIsCartOpen(!isCartOpen));
              dispatch(setIsUserOpen(false));
            }}
          />
          {totalQuantity !== 0 && (
            <div className="absolute bg-rose-700 p-1 w-6 h-6 rounded-full text-center text-xs text-white translate-x-4 -translate-y-4 ">
              {totalQuantity}
            </div>
          )}
          <span className="hidden lg:inline">My cart</span>
        </li>
      </ul>
      {isCartOpen && <Cart />}
      {isUserOpen && <User />}
    </nav>
<nav className="flex items-center py-4 px-12 relative shadow-md w-full">
      <div className="flex gap-20 items-center flex-1">
        <Link to={"/"}>
          <img src="QuickCart.svg" alt="logo" />
        </Link>
        <SearchBar />
      </div>

      <ul className="flex justify-between gap-[5rem] ml-20">
        <li className="lg:hidden">
          <FontAwesomeIcon
            icon={faMagnifyingGlass}
            size={"2xl"}
            className="mr-2 cursor-pointer"
          />
        </li>
        <li>
          <FontAwesomeIcon
            icon={faUser}
            size={"2xl"}
            className="mr-2 cursor-pointer"
            onClick={() => {
              dispatch(setIsUserOpen(!isUserOpen));
              dispatch(setIsCartOpen(false));
            }}
          />
          <span className="hidden lg:inline">My account</span>
        </li>
        <li>
          <FontAwesomeIcon
            icon={faShoppingCart}
            size={"2xl"}
            className="mr-2 cursor-pointer"
            onClick={() => {
              dispatch(setIsCartOpen(!isCartOpen));
              dispatch(setIsUserOpen(false));
            }}
          />
          {totalQuantity !== 0 && (
            <div className="absolute bg-rose-700 p-1 w-6 h-6 rounded-full text-center text-xs text-white translate-x-4 -translate-y-4 ">
              {totalQuantity}
            </div>
          )}
          <span className="hidden lg:inline">My cart</span>
        </li>
      </ul>
      {isCartOpen && <Cart />}
      {isUserOpen && <User />}
    </nav>
44 Replies
Mannix
Mannix•2y ago
well image shrink because there is probably set width:100% or max-width: 100%; in font you have font-size to change the size so you probably want to use clamp ???
Aleksandr M.
Aleksandr M.OP•2y ago
I haven't given any classes to img, so I guess its width is default to 100%. Too bad there's no way to use clamp in Tailwind (at least not officially)
Mannix
Mannix•2y ago
it's not default tailwind is probably adding that. you can always extend tailwind in config and add what you want
Aleksandr M.
Aleksandr M.OP•2y ago
I added clamp manually through .css file, but it doesn't seem to be doing the trick: 
li > svg {
  font-size: clamp(15px, 2em, 3em) !important;
}
li > svg {
  font-size: clamp(15px, 2em, 3em) !important;
}
All images in Tailwind have max-width: 100% on them by default as you said, but if I remove that, everything just overflows and doesn't shrink🥹
Mannix
Mannix•2y ago
you added font size to svg not the icons icons are text not an svg
Aleksandr M.
Aleksandr M.OP•2y ago
Huh, I can see it's being applied in dev tools
Mannix
Mannix•2y ago
that is why max-width: 100%; is for so the images shring to make them responsive set the font size on li not svg 😉 wait you have class fa-2xl this probably set the size of the icons
Aleksandr M.
Aleksandr M.OP•2y ago
Yeah, it does, I overruled it with !important Alright, I'll try
Mannix
Mannix•2y ago
what's the rule set by that fa-2xl class?
Aleksandr M.
Aleksandr M.OP•2y ago
Aleksandr M.
Aleksandr M.OP•2y ago
what have I done
Aleksandr M.
Aleksandr M.OP•2y ago
Now it's hella big and it still won't shrink
Mannix
Mannix•2y ago
revert the clamp back to the svg not li you need to play with the clamp more to get effect you are after does the svg of the icon get that max-width:100% from tailwind ?
Aleksandr M.
Aleksandr M.OP•2y ago
It does not I just added it manually, icons do shrink now, but only after the logo shrinks out of the existence
Mannix
Mannix•2y ago
oh so tailwind doesn't add max-width: 100% on svg strange how small you go for the logo to disappear ?
Aleksandr M.
Aleksandr M.OP•2y ago
It definitely has something to do with flex-1 on my container here: 
<div className="flex gap-20 items-center flex-1">
        <Link to={"/"}>
          <img src="QuickCart.svg" alt="logo" />
        </Link>
        <SearchBar />
      </div>
<div className="flex gap-20 items-center flex-1">
        <Link to={"/"}>
          <img src="QuickCart.svg" alt="logo" />
        </Link>
        <SearchBar />
      </div>
Removing it makes everything shrink at almost the same time But if I remove it, the search input breaks
Aleksandr M.
Aleksandr M.OP•2y ago
with flex 1:
Aleksandr M.
Aleksandr M.OP•2y ago
without:
Aleksandr M.
Aleksandr M.OP•2y ago
and here's css it has:
Mannix
Mannix•2y ago
why not use space-between instead of gap and flex-1 ?
Aleksandr M.
Aleksandr M.OP•2y ago
It shrinks down until its not visible, like this
Aleksandr M.
Aleksandr M.OP•2y ago
If I make the window smaller, it would be impossible to see the logo
Mannix
Mannix•2y ago
how small the window get tho? you know there is nothing below like 320px in terms of devices
Aleksandr M.
Aleksandr M.OP•2y ago
On 470px its not visible at all Doesn't do the trick sadly
Mannix
Mannix•2y ago
the gap screws with the shrinking imo it's to big imo
Aleksandr M.
Aleksandr M.OP•2y ago
Because I want the search input to stretch when it's on a bigger screen
Aleksandr M.
Aleksandr M.OP•2y ago
like that
Mannix
Mannix•2y ago
you can't try flex-shrink-0 on logo to stop it from shrinking so the flexbox will shrink only the searchabr
Aleksandr M.
Aleksandr M.OP•2y ago
It might be the ml-20 on my ul that messes everything up
Mannix
Mannix•2y ago
ml-20 what is that line margin-left : 20rem? that is ridiculous lol
Aleksandr M.
Aleksandr M.OP•2y ago
actually ml-20 is margin left 5rem
Mannix
Mannix•2y ago
still big 5 * 16 is like 80px why not ml-auto?
Aleksandr M.
Aleksandr M.OP•2y ago
ml-auto does this:
Aleksandr M.
Aleksandr M.OP•2y ago
same as no margin-left at all
Aleksandr M.
Aleksandr M.OP•2y ago
looks much better with ml-20 on
Aleksandr M.
Aleksandr M.OP•2y ago
probably it's not the best way
Mannix
Mannix•2y ago
so you need a gap between logo search and ul no need for margin there at all add gap on the nav and remove that ml from ul
Aleksandr M.
Aleksandr M.OP•2y ago
yeah, you right, I've just fixed it apparently margin didn't have anything to do with, so the problem stays damn styling things is really confusing
Aleksandr M.
Aleksandr M.OP•2y ago
I removed the gap on ul and it got a bit better But there's no gap which looks ugly...
Mannix
Mannix•2y ago
well you can add it but not a big one you need to remember it is small device. you can increase it at bigger viewport
Aleksandr M.
Aleksandr M.OP•2y ago
I think I finally did it 
li {
  max-width: 100% !important;
}
li > svg {
  font-size: clamp(15px, 2em, 3em) !important;
  max-width: 100%;
}
li {
  max-width: 100% !important;
}
li > svg {
  font-size: clamp(15px, 2em, 3em) !important;
  max-width: 100%;
}
All I had to do was to put max-width on both li and svgs inside of it Now I don't even have to clamp anything actually, it works fine without it Thanks for all your suggestions and your help! I'm eternally grateful 👍
Mannix
Mannix•2y ago
no problem i made quick codepen maybe this will help you https://codepen.io/MannixMD/pen/QWBzyRG i set small gaps and made flexbox do most of the work
Aleksandr M.
Aleksandr M.OP•2y ago
Thanks! It looks nice Really appreciate you going an extra mile
Mannix
Mannix•2y ago
no problem i like coming up with solution it help me get better at it 🙂
Want results from more Discord servers?
Add your server