Skip to content

Instantly share code, notes, and snippets.

@triposat
Created February 26, 2023 08:09
Show Gist options
  • Save triposat/8291e4aa1b2a7c8f5b9aeca211a7196e to your computer and use it in GitHub Desktop.
Save triposat/8291e4aa1b2a7c8f5b9aeca211a7196e to your computer and use it in GitHub Desktop.
Media Query
<section>
<img src="https://www.lambdatest.com/logo.png" alt="Image 1">
<img src="https://images.g2crowd.com/uploads/product/image/large_detail/large_detail_c8f5f4721cde3897dffa246c0e0bfce9/lambdatest-lambdatest.png" alt="Image 2">
</section>
section {
display: flex;
}
img {
width: 50%;
height: auto;
}
@media screen and (min-width: 768px) {
img {
max-width: 50%;
max-height: 200px;
}
}
@media screen and (min-width: 1024px) {
img {
max-width: 200px;
max-height: 50%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment