css Question posted in
Some basic documentation can be found here.

Css – I want a special image size for mobile and another for large device

Hello i want to modify the size and the position of the image when it’s on small device the only thing is that when i do changes it’s also changing the large device too Even when i do « sm:-300 » it do anything

mobile and pc version] [(https://i.sstatic.net/ImaaJ5Wk.png)

here is my code

import { Outlet, Navigate } from 'react-router-dom';
import { motion } from "framer-motion"
import { MouseParallaxChild, MouseParallaxContainer } from "react-parallax-mouse";

const AuthLayout = () => {
  const IsAuthenthicated = false;
  return (
    <>
      {IsAuthenthicated ? (
        <Navigate to ="/" />
      ) : (
        <>
          <section className="flex flex-1 justify-center items-center flex-col py-10">
            <Outlet />
          </section>

          {/* Utilisation de l'image en tant que fond d'écran */}
          <div
            className="wall1 hover-blur sm:63 xl:block h-screen w-screen object-cover bg-no-repeat absolute top-0 left-0 z-0"
            style={{ backgroundImage: `url("/assets/images/wall1.png")`  }}
          />

          {/* Votre contenu ici */}
        </>
      )}
    </>
  )
}

export default AuthLayout
Tags:

2

Answers


  1. 0

    You can check out the Tailwind documentation to learn about different breakpoints i.e. sm, md, lg, and xl.
    Check this out

    You can also add your own breakpoint in tailwind.config.js file. For example, if you want an extra small device, you can do this:

    tailwind.config.ts

    /** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./src/**/*.{js,jsx}'],
    mode: 'jit',
    theme: {
        extend: {
            colors: {
            },
            
            screens: {
                xs: '450px',
            },
        },
    },
    plugins: [],
};

    You can toggle the background properties based on the device size then like this. For instance, in an xs device you want the background to be in the center but in a device larger than this, you want it to be at the left, so you can do something like this:

    <div
                    className=" bg-center xs:bg-left"
                    style={{ backgroundImage: `url("/assets/images/wall1.png")` }}
                />

    By default the background position is center but in devices greater than xs or 450px, the background position becomes left. You can follow the same kind of implementation for all the other CSS properties too.

    Login or Signup to reply.
  2. 0

    Media queries (CSS3) enables you to specify what happens to content based on screen size…

    Example:

    @media screen and (max-width:799px){

 .Flower{width:50px; height:50px;}

}


@media screen and (max-width:1200px){

 .Flower{width:100px; height:70px;}

}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search