Woocommerce Question posted in
The official Woocommerce documentation can be found here.

undetermined number of images, side by side, to fit container width – Woocommerce

I have a few img tags (the number of images can vary between 1 and 3).I cannot add a container around them, they have to be directly put like below. I’d like the images to be side by side, and to fit the width of the containing div.

How to achieve this?

<div class="woocommerce-Tabs-panel woocommerce-Tabs-panel--description panel entry-content wc-tab" id="tab-description" role="tabpanel" aria-labelledby="tab-title-description" style="display: none;">
                    
<h2>Description</h2>

    <p>Short henley made of 180 g/m2 organic cotton rib jersey.<br>
    Cotton button tape and red overstitch.<br>
    100% ” GOTS ” certified organic cotton.<br>
    Quality garment made in Portugal.</p>

    <p>All our products are pre-washed to avoid shrinking.<br>
    Machine wash 30°c using Marseille soap or black soap detergent.<br>
    No softener, it reduces the absorption capacity of cotton.<br>
    Do not tumble dry.<br>

    <img src="https://cdn.shopify.com/s/files/1/0788/7793/files/gots-logo_sw_2018-01_large.png"><br>
    <img src="https://cdn.shopify.com/s/files/1/0788/7793/files/gots-logo_sw_2018-01_large.png"><br>
    <img src="https://cdn.shopify.com/s/files/1/0788/7793/files/gots-logo_sw_2018-01_large.png">

  </p>
</div>
Tags:

4

Answers


  1. 0

    Why you can’t to add a container?

    you can add some style:

    <style>
    img {
        display: inline;
    }
</style>

    and you can to add width property if the images are wrapping.

    Login or Signup to reply.
  2. 0

    You can make use of the :nth-last-child() pseudo class.

    .container > div {
  background: blue;
  display: inline-block;
  height: 100px;
  margin: 1rem;
  width: 100px;
}
.box:first-child:nth-last-child(2),
.box:first-child:nth-last-child(2) ~ .box {
  width: calc(100% - 2rem);
}
.box:first-child:nth-last-child(2),
.box:first-child:nth-last-child(2) ~ .box {
  width: calc(50% - 2rem);
}
.box:first-child:nth-last-child(3),
.box:first-child:nth-last-child(3) ~ .box {
    width: calc(30% - 2rem);
}
    <div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

    Credit goes to Lea Verou:

    https://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/

    Login or Signup to reply.
  3. 0

    Try adding style="display:inline-block" to your tags.

    Login or Signup to reply.
  4. 0

    For displaying images side by side, you can add css to img like

    img
{
    float: left;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search