Mobile responsive

HTML-CSS
1

I´m having issues with my header withe the responsive for mobiles ad tables.

This is what I have:


/* Estilos base para o header */
header {
  display: flex;
  flex-direction: column;
  background-color: #f7ede2; /* Fundo beige */
  color: #523414; /* Texto castanho escuro */
  box-shadow: 0 8px 16px rgba(82, 52, 20, 0.9); /* Sombra mais pronunciada castanho escuro */
  z-index: 1000;
  position: relative;
}

/* Estilo para a mensagem de frete grátis */
.free-shipping-message {
  background-color: #f7ede2; /* Cor de fundo beige */
  color: #523414; /* Cor do texto castanho escuro */
  padding: 0rem;
  text-align: center;
  font-size: 1rem;
  width: 100%;
  animation: slide 30s linear infinite; /* Animação infinita */
}

@keyframes slide {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Estilo para o cabeçalho principal */
.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0rem;
  width: 100%;
  flex-wrap: wrap;
}

/* Estilo para a área à esquerda (menu e busca) */
.nav-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Estilo para o ícone do menu hambúrguer */
.menu-icon {
  cursor: pointer;
  font-size: 2rem;
  color: #523414;
}

/* Estilo para o ícone de busca */
.search-icon {
  cursor: pointer;
  font-size: 1.2rem;
  color: #523414;
  position: relative;
}

/* Estilo para a barra de pesquisa */
.search-bar {
  position: absolute;
  top: 100%; /* Posiciona abaixo do ícone da lupa */
  left: 0; /* Alinha à esquerda do ícone da lupa */
  transform: scaleX(0); /* Inicialmente oculta */
  transform-origin: left; /* Expande a partir da esquerda */
  width: 0; /* Inicialmente sem largura */
  max-width: 300px; /* Largura máxima quando visível */
  padding: 0.5rem;
  border: 1px solid #5e3d17; /* Cor da borda */
  border-radius: 20px; /* Bordas arredondadas */
  background-color: #eedac3; /* Cor de fundo */
  color: #5e3d17; /* Cor do texto */
  transition: transform 0.3s ease, width 0.3s ease; /* Transições suaves */
  white-space: nowrap; /* Impede quebra de linha */
  z-index: 2; /* Garante que a barra de pesquisa esteja acima de outros elementos */
}

.search-bar.visible {
  transform: scaleX(1); /* Mostra a barra */
  width: 200px; /* Largura desejada quando expandida */
}

.search-bar input {
  width: calc(100% - 2rem); /* Deixa espaço para o botão "x" */
  padding: 0.5rem;
  border: none;
  background-color: transparent;
  color: #5e3d17;
  border-radius: 20px;
}

.search-bar input::placeholder {
  color: #5e3d17;
}

/* Estilo para o botão de fechar da barra de pesquisa */
.close-button {
  background: none;
  border: none;
  color: #5e3d17;
  cursor: pointer;
  font-size: 1.2rem;
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
}

/* Estilo para a área à direita (login e carrinho) */
.nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Estilo para os ícones de login e carrinho */
.icon {
  font-size: 1.5rem;
  color: #523414;
}

.logo {
  font-family: fantasy;
  color: #523414;
  font-size: 1rem; /* Ajusta o tamanho do logo */
  text-decoration: none;
  margin: 0 auto; /* Centraliza o logo */
}

/* Estilo para o menu dropdown do menu hamburguer */
.menu-dropdown {
  position: absolute;
  top: 60px; /* Ajuste conforme necessário */
  left: 0;
  background-color: #f7ede2;
  border: 1px solid #f7ede2;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  width: 200px; /* Ajuste conforme necessário */
  z-index: 1000;
}

.menu-section {
  margin-bottom: 1rem;
}

.menu-section h2 {
  margin-bottom: 0.5rem;
  font-size: 1rem;
  color: #5e3d17;
}

.menu-section ul {
  list-style-type: none;
  padding: 0;
}

.menu-section ul li {
  margin-bottom: 0.5rem;
}

.menu-section ul li a {
  text-decoration: none;
  color: #5e3d17; /* Cor padrão dos links */
  padding: 0.5rem;
  display: block;
  border-radius: 4px; /* Bordas arredondadas */
  transition: background-color 0.3s ease, color 0.3s ease; /* Transições suaves */
}

.menu-section ul li a:hover {
  text-decoration: underline;
  color: #3e1e0a; /* Cor do texto quando o link está em hover */
  background-color: #f7e6d2; /* Cor de fundo quando em hover */
}

/* Estilo para o link ativo no menu */
.menu-section ul li a.active {
  color: #3e1e0a; /* Cor do texto quando o link está ativo */
  font-weight: bold; /* Negrito quando ativo */
  background-color: #f7e6d2; /* Cor de fundo quando ativo */
}

/* Estilo para o botão de fechar no menu dropdown */
.menu-close-button {
  background: none;
  border: none;
  color: #523414;
  font-size: 1.5rem;
  cursor: pointer;
  position: absolute;
  top: 10px; /* Ajuste conforme necessário */
  right: 10px; /* Ajuste conforme necessário */
}

/* Estilo para o link no menu hambúrguer */
.menu-section a {
  text-decoration: none;
  color: #5e3d17; /* Cor padrão dos links */
  padding: 0.5rem;
  display: block;
  border-radius: 4px; /* Bordas arredondadas */
  transition: background-color 0.3s ease, color 0.3s ease; /* Transições suaves */
}

/* Estilo para o hover do link no menu hambúrguer */
.menu-section a:hover {
  text-decoration: underline;
  color: #3e1e0a; /* Cor do texto quando o link está em hover */
  background-color: #f7e6d2; /* Cor de fundo quando em hover */
}

/* Estilo para o link ativo no menu */
.menu-section a.active {
  color: #3e1e0a; /* Cor do texto quando o link está ativo */
  font-weight: bold; /* Negrito quando ativo */
  background-color: #f7e6d2; /* Cor de fundo quando ativo */
}

.icon {
  font-size: 1.5rem; /* Tamanho dos ícones */
  color: #523414; /* Cor dos ícones */
  position: relative; /* Necessário para o contador do carrinho */
}

/* Estilo específico para o botão do carrinho */
.button-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
}

.button-cart .cart-item-count {
  position: absolute;
  top: -5px; /* Ajuste conforme necessário */
  right: -10px; /* Ajuste conforme necessário */
  background-color: #54a539; /* Cor de fundo vermelha */
  color: white;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 0.8rem;
  font-weight: bold;
}

.button-cart .icon {
  font-size: 1.5rem; /* Tamanho do ícone do carrinho */
  color: inherit; /* Mantém a cor herdada */
}

/* Media Queries para tornar o header responsivo */

/* Para tablets (telas com largura de até 768px) */
@media (max-width: 768px) {
  .main-header {
    flex-direction: column;
    align-items: flex-start; /* Alinha os itens no início */
  }

  .nav-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem; /* Reduz o espaço entre os itens para tablets */
  }

  .menu-icon {
    font-size: 1.5rem; /* Reduz o tamanho do ícone do menu hambúrguer */
  }

  .search-icon {
    font-size: 1.2rem; /* Reduz o tamanho do ícone de busca */
  }

  .search-bar {
    position: static; /* Remove o posicionamento absoluto para melhor exibição */
    width: 100%; /* Aumenta a largura da barra de pesquisa */
    max-width: none; /* Remove a largura máxima */
    margin-top: 0.5rem; /* Adiciona um espaço acima da barra de pesquisa */
  }

  .search-bar input {
    width: calc(100% - 2rem); /* Ajusta a largura do input */
  }

  .nav-right {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem; /* Reduz o espaço entre os itens para tablets */
  }

  .logo {
    font-size: 1.2rem; /* Ajusta o tamanho do logo */
    margin: 0; /* Remove a margem auto para centralizar o logo */
  }
}

/* Para dispositivos móveis (telas com largura de até 480px) */
@media (max-width: 480px) {
  .main-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 0.5rem; /* Ajusta o padding do cabeçalho */
  }

  .nav-left {
    gap: 0.5rem; /* Reduz o espaço entre os itens */
  }

  .menu-icon {
    font-size: 1.2rem; /* Reduz ainda mais o tamanho do ícone do menu hambúrguer */
  }

  .search-icon {
    font-size: 1rem; /* Reduz ainda mais o tamanho do ícone de busca */
  }

  .search-bar {
    width: 100%; /* Garante que a barra de pesquisa ocupe toda a largura disponível */
    max-width: none; /* Remove a largura máxima */
    margin-top: 0.5rem; /* Adiciona um espaço acima da barra de pesquisa */
  }

  .search-bar input {
    width: calc(100% - 1rem); /* Ajusta a largura do input */
  }

  .nav-right {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem; /* Reduz o espaço entre os itens */
  }

  .logo {
    font-size: 1rem; /* Ajusta o tamanho do logo */
    margin: 0; /* Remove a margem auto para centralizar o logo */
  }
}```
2

Hello,
Can you please share the HTML code too?

3

Change position. It’s relative. when display is flex, use justify-content, align-items to improve responsiveness.

4

this is it:

import React, { useState, useEffect } from "react";
import {
  RiSearchLine,
  RiShoppingCartLine,
  RiUserLine,
  RiCurrencyFill,
} from "react-icons/ri";
import { CiMenuBurger } from "react-icons/ci";
import { Link } from "react-router-dom";
import "./Header.css";
import newone from "../helpers/newone.png";

interface HeaderProps {
  searchQuery: string;
  onSearchChange: (query: string) => void;
  onCurrencyChange: (currency: string) => void;
  onCartToggle: () => void;
  cartItemCount: number; // Adicione a contagem de itens
}

const Header: React.FC<HeaderProps> = ({
  searchQuery,
  onSearchChange,
  onCurrencyChange,
  onCartToggle,
  cartItemCount, // Receba a contagem de itens
}) => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [isCurrencyDropdownOpen, setIsCurrencyDropdownOpen] = useState(false);
  const [selectedCurrency, setSelectedCurrency] = useState("EUR");
  const [isSearchVisible, setIsSearchVisible] = useState(false);

  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    onSearchChange(event.target.value);
  };

  const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen);
  };

  const closeMenu = () => {
    setIsMenuOpen(false);
  };

  const toggleCurrencyDropdown = () => {
    setIsCurrencyDropdownOpen(!isCurrencyDropdownOpen);
  };

  const handleCurrencyChange = (currency: string) => {
    setSelectedCurrency(currency);
    onCurrencyChange(currency);
    setIsCurrencyDropdownOpen(false);
  };

  const toggleSearchVisibility = () => {
    setIsSearchVisible((prev) => !prev);
  };

  useEffect(() => {
    if (isMenuOpen) {
      const links = document.querySelectorAll(".menu-section ul li a");
      links.forEach((link, index) => {
        setTimeout(() => {
          link.classList.add("show");
        }, index * 100);
      });
    } else {
      const links = document.querySelectorAll(".menu-section ul li a");
      links.forEach((link) => {
        link.classList.remove("show");
      });
    }
  }, [isMenuOpen]);

  return (
    <header>
      <div className="free-shipping-message">
        Enjoy free shipping for purchases over 65€!
      </div>
      <div className="main-header">
        <div className="nav-left">
          <div className="menu-icon" onClick={toggleMenu}>
            <CiMenuBurger />
          </div>
          <div className="search-icon">
            <RiSearchLine onClick={toggleSearchVisibility} />
            {isSearchVisible && (
              <input
                type="text"
                placeholder="Search for products..."
                value={searchQuery}
                onChange={handleInputChange}
              />
            )}
          </div>
        </div>
        <Link to="/" className="logo">
          <img src={newone} alt="CaffeineCodeCorner Logo" />
        </Link>
        <div className="nav-right">
          <div className="currency-selector" onClick={toggleCurrencyDropdown}>
            <RiCurrencyFill className="currency-icon" />
            <span>{selectedCurrency}</span>
          </div>
          {isCurrencyDropdownOpen && (
            <div
              className={`currency-dropdown ${
                isCurrencyDropdownOpen ? "show" : ""
              }`}
            >
              <button onClick={() => handleCurrencyChange("USD")}>
                USD 🇺🇸
              </button>
              <button onClick={() => handleCurrencyChange("EUR")}>
                EUR 🇪🇺
              </button>
              <button onClick={() => handleCurrencyChange("GBP")}>
                GBP 🇬🇧
              </button>
              <button onClick={() => handleCurrencyChange("JPY")}>
                JPY 🇯🇵
              </button>
              <button onClick={() => handleCurrencyChange("CAD")}>
                CAD 🇨🇦
              </button>
              <button onClick={() => handleCurrencyChange("AUD")}>
                AUD 🇦🇺
              </button>
              <button onClick={() => handleCurrencyChange("BRL")}>
                BRL 🇧🇷
              </button>
            </div>
          )}
          <Link to="/login">
            <RiUserLine className="icon" />
          </Link>
          <button className="button-cart" onClick={onCartToggle}>
            <RiShoppingCartLine className="icon" />
            {cartItemCount > 0 && (
              <span className="cart-item-count">{cartItemCount}</span>
            )}
          </button>
        </div>
      </div>
      {isMenuOpen && (
        <div className={`menu-dropdown ${isMenuOpen ? "" : "hidden"}`}>
          <button className="menu-close-button" onClick={closeMenu}>
            &times;
          </button>
          <div className="menu-section">
            <Link to="/All Products">
              <h2>All Products</h2>
            </Link>
            <h2>Trending</h2>
            <ul>
              <li>
                <Link to="/mugs/ts">Mugs.tsx</Link>
              </li>
              <li>
                <Link to="/mugs/js">Mugs.js</Link>
              </li>
              <li>
                <Link to="/mugs/css">Mugs.css</Link>
              </li>
              <li>
                <Link to="/mugs/py">Mugs.py</Link>
              </li>
              <li>
                <Link to="/mugs/html">Mugs.html</Link>
              </li>
              <li>
                <Link to="/mugs/java">Mugs.java</Link>
              </li>
            </ul>
          </div>
          <div className="menu-section">
            <h2>Help & Settings</h2>
            <ul>
              <li>
                <Link to="/about-us">About Us</Link>
              </li>
              <li>
                <Link to="/contact">Contact</Link>
              </li>
            </ul>
          </div>
        </div>
      )}
    </header>
  );
};

export default Header;```
5

where exactly? I´m already using in most of the elements , I also have this code on my index.tsx, not sure if can also impact because then I have this css for the header more specific :

header {
  background-color: #f7ede2;
  color: #523414;
  padding: 1rem;
}```
6

I tried this in the meantime but still not workin properly

>
/* General Styles */
header {
display: flex;
flex-direction: column;
background-color: #f7ede2;
color: #523414;
box-shadow: 0 8px 16px rgba(82, 52, 20, 0.9);
z-index: 1000;
position: relative;
}

.free-shipping-message {
background-color: #f7ede2;
color: #523414;
padding: 0;
text-align: center;
font-size: 1rem;
width: 100%;
animation: slide 30s linear infinite;
}

@keyframes slide {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}

/* Main Header */
.main-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0;
width: 100%;
flex-wrap: wrap;
}

/* Search Bar */
.search-bar {
position: absolute;
top: 100%;
left: 0;
transform: scaleX(0);
transform-origin: left;
width: 0;
max-width: 300px;
padding: 0.5rem;
border: 1px solid #5e3d17;
border-radius: 20px;
background-color: #eedac3;
color: #5e3d17;
transition: transform 0.3s ease, width 0.3s ease, max-width 0.3s ease;
white-space: nowrap;
z-index: 2;
}

.search-bar.visible {
transform: scaleX(1);
width: 200px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
.main-header {
flex-direction: column;
align-items: flex-start;
}

.nav-left,
.nav-right {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}

.logo {
font-size: 1.2rem;
margin: 0;
}
}

@media (max-width: 480px) {
.main-header {
padding: 0.5rem;
}

.menu-icon {
font-size: 1.2rem;
}

.search-icon {
font-size: 1rem;
}

.search-bar {
width: 100%;
margin-top: 0.5rem;
}

.logo {
font-size: 1rem;
}
}

Blockquote

``

7

hi there!
you are using flexbox properties and values in the media query. you need to enable the flexbox using display property.