Media query common sizes4/7/2024 We’ve only used one breakpoint in this example, but you could easily customize this component at other sizes using the sm, lg, xl, or 2xl responsive prefixes as well. On medium screens and up, we’ve constrained the width to a fixed size and ensured the image is full height using md:h-full md:w-48. On small screens the image is automatically full width by default. ![]() Technically we could have just used flex-shrink-0 since it would do nothing on smaller screens, but since it only matters on md screens, it’s a good idea to make that clear in the class name. When the parent is a flex container, we want to make sure the image never shrinks, so we’ve added md:flex-shrink-0 to prevent shrinking on medium screens and larger.By default, the outer div is display: block, but by adding the md:flex utility, it becomes display: flex on medium screens and larger.
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |