Issue
What i would like to achieve is that i want to change the way my boxes appear only on the mobile version of the website. I experimented with display:
and flex:
rules but had no luck. I want them stick to each other but Couldn't find the right CSS rule. Help.
Thanks.
Example picture of how i want them:
The way they appear on desktop version of the website:
.m-image {
border: 5px dashed black;
width: 100%;
height: 70px;
margin: 10px 0;
position: relative;
display: inline-block;
vertical-align: top;
overflow: hidden;
}
img {
width: 100%;
height: 300px;
}
<div class="m-image">
<img srcset="https://images.pexels.com/photos/6395415/pexels-photo-6395415.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"><img/></div>
<div class="m-image">
<img src="https://images.pexels.com/photos/6044656/pexels-photo-6044656.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"><img/></div>
<div class="m-image">
<img alt="" loading="lazy" src="https://images.pexels.com/photos/6045291/pexels-photo-6045291.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" /><img /></div>
Solution
.m-image {
border: 5px dashed black;
width: 100%;
height: 70px;
margin: 10px 0;
position: relative;
display: inline-block;
vertical-align: top;
overflow: hidden;
}
img {
width: 100%;
height: 300px;
}
@media only screen and (max-width: 1000px) {
.main {
display: flex;
gap: 10px;
}
.m-image {
border: solid black 3px;
}
}
<div class = "main">
<div class="m-image">
<img srcset="https://images.pexels.com/photos/6395415/pexels-photo-6395415.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
</div>
<div class="m-image">
<img src="https://images.pexels.com/photos/6044656/pexels-photo-6044656.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
</div>
<div class="m-image">
<img alt="" loading="lazy" src="https://images.pexels.com/photos/6045291/pexels-photo-6045291.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
</div>
</div>
Couple of things to think about when it comes to mobile view. When wanting certain items to display a certain way on mobile view you want to use @media only screen and (max-width: /* width of the device */
. Place all the CSS rules inside of here. These rules will change the rules set above or run new rules that you have define below.
Also, when it comes to display: flex;
you want to make sure you wrap it into another div. This "wrapper" or "container" will provide the structure to the way you want the images to display.
Answered By - Michael
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.