CODEWITHSUNDEEP
sveltekitflowbite-svelte
adviner
adviner

Reputation: 3567

Svelte flowbite NavBar Display Issue

I just started using Flowbite with Svelete. I followed the instructions located in the following link, and the sample works as expected. But in a new +layout.svelte, I added a NavBar, which I copied exactly like the sample.

enter image description here

But when I view the page, no matter the browser width, it always showing in a mobile view

enter image description here

This was asked previously but had no solution. Any ideas on what I may be missing?

My tailwind.config.js

    /** @type {import('tailwindcss').Config} */
    const config = {
      content: [
        './src/**/*.{html,js,svelte,ts}', 
        './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'
      ],
      theme: {
        extend: {
                colors: {
                    primary: {
                        50: '#FFF5F2',
                        100: '#FFF1EE',
                        200: '#FFE4DE',
                        300: '#FFD5CC',
                        400: '#FFBCAD',
                        500: '#FE795D',
                        600: '#EF562F',
                        700: '#EB4F27',
                        800: '#CC4522',
                        900: '#A5371B'
                      }             
                }

        },
        screens: {
          mobile: { max: "480px" },
          tablet: { min: "481px", max: "1024px" },
          desktop: { min: "1025px" }
        }
      },
      plugins: [
        require('flow bite/plugin')
      ],
      darkMode: 'class'
    }

    module.exports = config;

Update Solution

Nevermind, I needed to add the following media query in my tailwind.config.js file.

screens: {
  'sm': '640px',
  // => @media (min-width: 640px) { ... }

  'md': '768px',
  // => @media (min-width: 768px) { ... }

  'lg': '1024px',
  // => @media (min-width: 1024px) { ... }

  'xl': '1280px',
  // => @media (min-width: 1280px) { ... }

  '2xl': '1536px',
  // => @media (min-width: 1536px) { ... }
}

Found the information here.

Upvotes: 1

Views: 638

Answers (3)

Saanvi Sen
Saanvi Sen

Reputation: 35

Funny, I was facing something similar with FlyonUI

However, then I added the same media queries (sm, md, lg, xl, 2xl) like you used in the tailwind.config.js file, and it was resolved.

Upvotes: 0

blackhat
blackhat

Reputation: 11

Had the same problem and realized flowbite , follows the mobile-first approach, you would need to use the responsive tailwind classes to fix the problem . Example

Upvotes: 0

adviner
adviner

Reputation: 3567

I updated my question with the solution that fixed my problem. The media query was missing in the tailwind.config.js file. Now its working as expected.

Upvotes: 0

Related Questions