TailwindCSS - Image don't want to display block

user_16720476 0
Viewed 509

Hello guys i want that my image is align vertically when the screen size is smaller than ... ! But it do not work. Im pretty new in TailwindCSS that's why i have no clue what's wrong or what i could do better.

What i want: The picture should be down there like here.

My code:

HTML

<div class="grid grid-cols-2 pl-20">
  <div class="center p-8">
    <h1 class="text-5xl font-bold">Hello this is a example</h1> 
</div>
  <div class="test center-img mx-8">
    <img src="assets/security.svg" alt="">
  </div>
</div>

CSS

.test {
  display: block;
}

.center-img {
  margin: auto;
  width: 80%;
}

I do not break. Why?

Thank you for help :)

tailwind-css css html
2 Answers

Remove grid grid-cols-2 from the parent div

user_31102920

Hello guys i want that my image is align vertically when the screen size is smaller than ... ! But it do not work.

The idea that you want to do something when the screen is small is wrong.

Please make it with the idea that you want to do something when the screen is large.

The following example gives the grid on a screen more md.

<div class="md:grid md:grid-cols-2 pl-20">
    <div class="center p-8">
      <h1 class="text-5xl font-bold">Hello this is a example</h1> 
  </div>
    <div class="test center-img mx-8">
      <img src="assets/security.svg" alt="">
    </div>
</div>

The following will be helpful:

https://tailwindcss.com/docs/responsive-design#targeting-mobile-screens

Where this approach surprises people most often is that to style something for mobile, you need to use the unprefixed version of a utility, not the sm: prefixed version. Don’t think of sm: as meaning “on small screens”, think of it as “at the small breakpoint“.

For this reason, it’s often a good idea to implement the mobile layout for a design first, then layer on any changes that make sense for sm screens, followed by md screens, etc.

user_19799530
Related