Align items centrally on devices sizes =< small

user_12081358 0
Viewed 612

I have a card component that renders like the first image below on screen sizes above small, mobile devices I have the component set to flex-wrap. When flex-wrap is active then my image is pushed to the left of the card even though it's container is set to w-full and I have tried to center with justify-center. I am trying to centre the image only when devices are small and under. I have tried setting sm: justify-center which doesn't work. Anyone got ideas on how I can refactor to get this functionality to work? Thanks

import React from "react"

export default function FeatureCard(props) {
  return (
    <div className="flex flex-row flex-wrap w-2/3 h-auto bg-gray-200 p-2 rounded-lg">
      <div className="flex xl:w-1/3 lg:w-1/3 md:w-1/3 sm:w-full xs:w-full">
        <img src={props.image} />
      </div>
      <div className="flex xl:w-2/3 lg:w-2/3 md:w-2/3 sm:w-full xs:w-full text-center self-center justify-center font-bold">
        <ul>
          {props.features.map(feature => (
            <li>{feature}</li>
          ))}
        </ul>
      </div>
    </div>
  )
}

      <div className="flex flex-row flex-wrap w-full h-auto justify-center -py-2">
        <div className="flex xl:w-1/2 lg:w-1/2 md:w-full sm:w-full xs:w-full h-auto justify-center py-2">
          <FeatureCard
            features={[
              "Modern Website Design",
              "Progressive Web Applications",
              "Content Management Systems",
              "JAMstack",
            ]}
            image={"https://img.icons8.com/color/96/000000/monitor.png"}
          />
        </div>
</div>

Desktop Display

Mobile display

flexbox tailwind-css css
1 Answers

So if I understand correctly, you want the props.image centered on small screens?

What if you added something like this to the <div className="flex flex-row flex-wrap w-full h-auto justify-center -py-2"> div:

@media (max-width: 600px) {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    }

What it basically does, is changing the flex direction to column instead of row when the screen is smaller than 600px, which in tailwind-css probably translates to:

sm:flex-col sm:justify-center sm:items-center
user_94185800
Related