3 Horizontal Box - CSS-CodePudding

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

CodePudding user response：

    .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 >
    <img srcset="https://images.pexels.com/photos/6395415/pexels-photo-6395415.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
  </div>

  <div >
    <img src="https://images.pexels.com/photos/6044656/pexels-photo-6044656.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
  </div>

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

CodePudding user response：

add a main container to compress the class m-image then add display flex

Ex:

<div id="main-container">
<div ></div>
<div ></div>
<div ></div>
</div>
.main-container {
display: flex;
}

then add padding left and right to your m-image class

CodePudding user response：

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 >
<div >
<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 >
<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 >
<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!

CodePudding user response：

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 ><img src="https://images.pexels.com/photos/6395415/pexels-photo-6395415.jpeg"></div>
        <div ><img src="https://images.pexels.com/photos/6044656/pexels-photo-6044656.jpeg"></div>
        <div ><img src="https://images.pexels.com/photos/6045291/pexels-photo-6045291.jpeg"></div>
    </div>