3 Horizontal Box - CSS - html

Question

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>

Answer 1

.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.

Answer 2

add a main container to compress the class m-image then add display flex
Ex:
<div id="main-container">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
.main-container {
display: flex;
}
then add padding left and right to your m-image class

Answer 3

what you should do in this case is put your images in a single container and apply flex property in the css.
basically manipulate your html and css like this.
HTML:
<div class="image-container">
<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>
</div>
CSS:
.image-container{
display:flex;
gap: 8px;
flex-wrap: nowrap;
}
.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;
}
This should give you your desired result for the desktop and for the mobile version you will have to apply media query into your CSS code.
hope this answers your question!

Answer 4

I couldn't really understand your code, So I wrote one for you suiting your needs
I hope it will fix your problem!
#content{
display: flex;
justify-content: space-around;
width: 100%;
}
.imagecontainer{
overflow: hidden;
width: 30%;
}
img{
width: 100%;
}
<div id="content">
<div class="imagecontainer"><img src="https://images.pexels.com/photos/6395415/pexels-photo-6395415.jpeg"></div>
<div class="imagecontainer"><img src="https://images.pexels.com/photos/6044656/pexels-photo-6044656.jpeg"></div>
<div class="imagecontainer"><img src="https://images.pexels.com/photos/6045291/pexels-photo-6045291.jpeg"></div>
</div>