Images in a Row - help required please

**shags38** · 18 Mar 2021, 12:36 AM

v1.5.7b PHP 7.3 classic responsive template website

I am trying to bring my site up to speed with HTML5 but am stumped on this particular aspect of Images in a Row, specifically such that when in mobile view the images are situated vertically instead of horizontally as they are required in desktop. The code I tried using doesn't drop the images below each other in mobile so that I end up with 3 tiny little images side by side - the images are clickable to categories so I need them full screen width (or close to) in mobile.

Any assistance would be appreciated.
cheers, Mike

This is the HTML5 code I have tried but cannot achieve vertical positioning in mobile (desktop horizontal is fine);

Code:

<style>
* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 30.00%;
  padding: 2px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}
</style>

<div class="row">
  <div class="column">
    <a href="https://www.dazzlerscliponearrings.com.au/all-clip-on-earrings-c-1" title="All Clip On Earrings"><img src="https://www.dazzlerscliponearrings.com.au/images/banners/homead1.jpg" alt="all clip on earrings" style="width:90%"></a><br />
  </div>
  <div class="column">
    <a href="https://www.dazzlerscliponearrings.com.au/fashion-clip-on-earrings-c-2" title="Fashion Clip On Earrings"><img src="https://www.dazzlerscliponearrings.com.au/images/banners/homead2.jpg" alt="fashion clip on earrings" style="width:90%"></a><br />
  </div>
  <div class="column">
    <a href="https://www.dazzlerscliponearrings.com.au/sterling-silver-clip-on-earrings-c-3" title="Sterling Silver Clip On Earrings"><img src="https://www.dazzlerscliponearrings.com.au/images/banners/homead3.jpg" alt="sterling silver clip on earrings" style="width:90%"></a><br />
  </div>
</div>

So this is the current html that works fine, i.e. horizontal in desktop and vertical in mobile view;

Code:

<div class="column"><a href="https://www.dazzlerscliponearrings.com.au/all-clip-on-earrings-c-1" title="All Clip On Earrings"><img src="https://www.dazzlerscliponearrings.com.au/images/banners/homead1.jpg" img alt="all clip on earrings" width="310" height="200" style="padding-bottom:1.5em;"/></a><br /></div>
<div class="column"><div align="center"><a href="https://www.dazzlerscliponearrings.com.au/fashion-clip-on-earrings-c-2" title="Fashion Clip On Earrings"><img src="https://www.dazzlerscliponearrings.com.au/images/banners/homead2.jpg" img alt="fashion clip on earrings" width="310" height="200" style="padding-bottom:1.5em;"/></a><br /></div></div>
<div class="column"><div align="center"><a href="https://www.dazzlerscliponearrings.com.au/sterling-silver-clip-on-earrings-c-3" title="Sterling Silver Clip On Earrings"><img src="https://www.dazzlerscliponearrings.com.au/images/banners/homead3.jpg" img alt="sterling silver clip on earrings" width="293" height="205" style="padding-bottom:1.5em;"/></a><br /></div></div>

<br class="clearBoth" />

**dbltoe** · 18 Mar 2021, 02:31 AM

You might want to review the thread at https://www.zen-cart.com/showthread....ight=flex-flow

**shags38** · 18 Mar 2021, 05:38 AM

Originally Posted by dbltoe

You might want to review the thread at https://www.zen-cart.com/showthread....ight=flex-flow

Thanks dbltoe - I had previously read that thread and a few others but I am not seeing what I require specifically, unless of course it is there and I'm not recognizing it or understanding it. I have gone through w3schools and done a number of searches but none can tell me what will make the images go vertical in mobile but still be horizontal in desktop. There is any amount of help regarding one or the other, vertical or horizontal on a page but again that isn't quite what I need.

cheers,
Mike

**dbltoe** · 18 Mar 2021, 06:28 PM

There was a mistake in the code on the other thread in that the closing " for <div id="boxContainer">

Here is how it would look with four "boxes" delineated by the different colors.

Code:

<div id="boxWrapper">
  <div id="boxContainer">
    <div class="boxItem">
      WHATERVER YOU WANT IN THE BOX
    </div>
    <div class="boxItem">
       SECOND ITEM IN THE BOX
     </div>
    <div class="boxItem">
       THIRD ITEM IN THE BOX
     </div>
    <div class="boxItem">
       YOU GET THE IDEA
     </div>
  </div>
  <div id="boxContainer">
    <div class="boxItem">
      WHATERVER YOU WANT IN THE BOX
    </div>
    <div class="boxItem">
       SECOND ITEM IN THE BOX
     </div>
    <div class="boxItem">
       THIRD ITEM IN THE BOX
     </div>
    <div class="boxItem">
       YOU GET THE IDEA
     </div>
  </div>
  <div id="boxContainer">
    <div class="boxItem">
      WHATERVER YOU WANT IN THE BOX
    </div>
    <div class="boxItem">
       SECOND ITEM IN THE BOX
     </div>
    <div class="boxItem">
       THIRD ITEM IN THE BOX
     </div>
    <div class="boxItem">
       YOU GET THE IDEA
     </div>
  </div>
  <div id="boxContainer">
    <div class="boxItem">
      WHATERVER YOU WANT IN THE BOX
    </div>
    <div class="boxItem">
       SECOND ITEM IN THE BOX
     </div>
    <div class="boxItem">
       THIRD ITEM IN THE BOX
     </div>
    <div class="boxItem">
       YOU GET THE IDEA
     </div>
  </div>
<br>
</div>

The following CSS will give you four across, three across, two across or in a single line depending on the width of the screen.

Code:

#boxWrapper(text-align:center;}/* Lines all the items in the box up nicely. */#boxContainer{display:flex;flex-flow: row wrap;justity-content:space-evenly;}/* Tells the container we'll be wanting it to adjust to the items we place in it. */
#boxItem{order: 0;flex: 0 1 auto;align-self: flex-start;padding:10px;box-sizing: border-box;min-width:200px;max-width:225px;}/* defines each box.  Padding and width are "adjust as required" */
#boxContainer br<clear:both;}/* Just to keep the right-hand column from jumping in where it doesn't belong. */

If the only thing in each "box" is an image, it would look like the following with the single image taking the place of all the "items" in the "box".

Code:

<div id="boxWrapper">
  <div id="boxContainer">
    <img src="img_girl.jpg" alt="Girl in a jacket" />
 </div>
  <div id="boxContainer">
    <img src="img_boy.jpg" alt="Boy in a jacket" />
</div>
  <div id="boxContainer">
    <img src="img_woman.jpg" alt="Woman in a jacket" />
</div>
  <div id="boxContainer">
    <img src="img_man.jpg" alt="Man in a jacket" />
</div>
<br>
</div>

And, the CSS would look like

Code:

#boxWrapper(text-align:center;}/* Lines all the items in the box up nicely. */#boxContainer{display:flex;flex-flow: row wrap;justity-content:space-evenly;}/* Tells the container we'll be wanting it to adjust to the items we place in it. */
#boxContainer img{order: 0;flex: 0 1 auto;align-self: flex-start;padding:10px;box-sizing: border-box;min-width:200px;max-width:225px;}/* defines each image.  Padding and width are "adjust as required" */
#boxContainer br<clear:both;}/* Just to keep the right-hand column from jumping in where it doesn't belong. */

**shags38** · 19 Mar 2021, 12:28 AM

Originally Posted by dbltoe

There was a mistake in the code on the other thread in that the closing " for <div id="boxContainer">

Here is how it would look with four "boxes" delineated by the different colors.

Code:

<div id="boxWrapper">
  <div id="boxContainer">
    <div class="boxItem">
      WHATERVER YOU WANT IN THE BOX
    </div>
    <div class="boxItem">
       SECOND ITEM IN THE BOX
     </div>
    <div class="boxItem">
       THIRD ITEM IN THE BOX
     </div>
    <div class="boxItem">
       YOU GET THE IDEA
     </div>
  </div>
  <div id="boxContainer">
    <div class="boxItem">
      WHATERVER YOU WANT IN THE BOX
    </div>
    <div class="boxItem">
       SECOND ITEM IN THE BOX
     </div>
    <div class="boxItem">
       THIRD ITEM IN THE BOX
     </div>
    <div class="boxItem">
       YOU GET THE IDEA
     </div>
  </div>
  <div id="boxContainer">
    <div class="boxItem">
      WHATERVER YOU WANT IN THE BOX
    </div>
    <div class="boxItem">
       SECOND ITEM IN THE BOX
     </div>
    <div class="boxItem">
       THIRD ITEM IN THE BOX
     </div>
    <div class="boxItem">
       YOU GET THE IDEA
     </div>
  </div>
  <div id="boxContainer">
    <div class="boxItem">
      WHATERVER YOU WANT IN THE BOX
    </div>
    <div class="boxItem">
       SECOND ITEM IN THE BOX
     </div>
    <div class="boxItem">
       THIRD ITEM IN THE BOX
     </div>
    <div class="boxItem">
       YOU GET THE IDEA
     </div>
  </div>
<br>
</div>

The following CSS will give you four across, three across, two across or in a single line depending on the width of the screen.

Code:

#boxWrapper(text-align:center;}/* Lines all the items in the box up nicely. */#boxContainer{display:flex;flex-flow: row wrap;justity-content:space-evenly;}/* Tells the container we'll be wanting it to adjust to the items we place in it. */
#boxItem{order: 0;flex: 0 1 auto;align-self: flex-start;padding:10px;box-sizing: border-box;min-width:200px;max-width:225px;}/* defines each box.  Padding and width are "adjust as required" */
#boxContainer br<clear:both;}/* Just to keep the right-hand column from jumping in where it doesn't belong. */

If the only thing in each "box" is an image, it would look like the following with the single image taking the place of all the "items" in the "box".

Code:

<div id="boxWrapper">
  <div id="boxContainer">
    <img src="img_girl.jpg" alt="Girl in a jacket" />
 </div>
  <div id="boxContainer">
    <img src="img_boy.jpg" alt="Boy in a jacket" />
</div>
  <div id="boxContainer">
    <img src="img_woman.jpg" alt="Woman in a jacket" />
</div>
  <div id="boxContainer">
    <img src="img_man.jpg" alt="Man in a jacket" />
</div>
<br>
</div>

And, the CSS would look like

Code:

#boxWrapper(text-align:center;}/* Lines all the items in the box up nicely. */#boxContainer{display:flex;flex-flow: row wrap;justity-content:space-evenly;}/* Tells the container we'll be wanting it to adjust to the items we place in it. */
#boxContainer img{order: 0;flex: 0 1 auto;align-self: flex-start;padding:10px;box-sizing: border-box;min-width:200px;max-width:225px;}/* defines each image.  Padding and width are "adjust as required" */
#boxContainer br<clear:both;}/* Just to keep the right-hand column from jumping in where it doesn't belong. */

Many thanks dbltoe - so dumb question of the day ... where exactly do I put the CSS, and can I leave the comments in or should I delete them?

cheers,
Mike