CODEWITHSUNDEEP
htmlcss
Noscin
Noscin

Reputation: 59

Align image with border 2 column on mobile

I have images where I want to do 5 columns on the desktop and 2 on the mobile, on the desktop it is working however on the mobile being img-responsive is showing only 1 image at a time and I want to show 2.

I've used hidden-xs but I think it's wrong. Two images are not aligned.

<style>
  #tudo {
    width: 100%;
  }
  
  @media screen and (min-width: 980px) {
    #tudu {
      margin-right: 50px;
    }
    #tudo1 {
      position: relative;
      width: 15%;
      margin-left: 4%;
      float: left;
      border: 2px solid #35c9b1;
      max-height: 300px;
    }
  }
  
  @media screen and (max-width: 500px)
  /* Mobile */
  
  {
    #tudo1 {
      position: relative;
      width: 46%;
      margin: 2%;
      float: left;
      border: 2px solid #35c9b1;
    }
  }
</style>
<div id="tudo" align="left">
  <div id="tudo1"><img class="img-responsive" src="https://picsum.photos/200"></div>
  <div id="tudo1"><img class="img-responsive" src="https://picsum.photos/150"></div>
  <div id="tudo1"><img class="img-responsive" src="https://picsum.photos/140"></div>
  <div id="tudo1"><img class="img-responsive" src="https://picsum.photos/130"></div>
  <div id="tudo1"><img class="img-responsive" src="https://picsum.photos/120"></div>
</div>

Upvotes: 0

Views: 78

Answers (3)

Einar &#211;lafsson
Einar &#211;lafsson

Reputation: 3177

I'm not 100% sure what you would like to achieve, but I highly recommend looking into the CSS Grid Layout. You could use it to get the columns easily. One way would be like this.

#tudo {
   display: grid;
   width: 100%;
   grid-template-columns: repeat(5, 1fr);
   grid-column-gap: 10px;
   grid-row-gap: 15px;
}

@media only screen and (max-width: 600px) {
   #tudo {
     grid-template-columns: repeat(2, 1fr);
   }
}

With the grid-template-columns, you can specify how many columns you want, and you can also set each column to specific widths. The fr is for fractions, but you can also use e.g percentages and fixed widths in px.

E.g. if you want to have the first item in each row fixed and rest take up the available space, you can do the following:

grid-template-columns: 300px repeat(4, 1fr);

With this, the first item in each row will be fixed to 300px and the rest will take up 1/4 of available space.

See more here: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

With grid-column-gap and grid-row-gap you can set the space between the rows and columns.

See this guide here for more info on CSS grid https://css-tricks.com/snippets/css/complete-guide-grid/

Upvotes: 2

exside
exside

Reputation: 3884

Does this show the behaviour you're looking for?

  • Use padding instead of margin for spacing
  • Use box-sizing: border-box to avoid box-model width gotchas with borders and padding
  • Use max-width: 100% on images so they don't overflow the size of the container
  • Use inline-block + whitespace fix instead of float but that's up to you, if you use floats you need a clearfix on #tudo!
  • Do not use ID's multiple times, use classes instead.
  • Have main styles not wrapped in a media query, either go mobile first (e.g. your global styles are for mobile) or go desktop first and change your stuff for smaller screens selectively (used in below example based on your code)

Of course you could achieve the same thing with flexbox or css-grids, but I tried to stay close to what you provided as code-input.

  * {
    box-sizing: border-box;
  }
  
  #tudo {
    font-size: 0;
    width: 100%;
  }
  
  .tudo1 {
    font-size: initial;
    display: inline-block;
    max-height: 300px;
    padding: 4%;
    position: relative;
    width: 20%;
  }
  .tudo1 img {
    border: 2px solid #35c9b1;
    display: block;
    max-width: 100%;
  }
  
  @media screen and (max-width: 500px)
  /* Mobile */
  
  {
    .tudo1 {
      width: 50%;
      padding: 2%;
    }
  }
<div id="tudo" align="left">
  <div class="tudo1"><img class="img-responsive" src="https://via.placeholder.com/300x300"></div>
  <div class="tudo1"><img class="img-responsive" src="https://via.placeholder.com/300x300"></div>
  <div class="tudo1"><img class="img-responsive" src="https://via.placeholder.com/300x300"></div>
  <div class="tudo1"><img class="img-responsive" src="https://via.placeholder.com/300x300"></div>
  <div class="tudo1"><img class="img-responsive" src="https://via.placeholder.com/300x300"></div>
</div>

Upvotes: 0

Burak
Burak

Reputation: 196

In mobile styling you should decrease #tudo1 width 4px because of 2px left and 2px right border. You can use calc(46% - 4px)

Upvotes: 0

Related Questions