title: CSS for Vertical Woocommerce Gallery
body: <p>On my <a href="https://unlatino.com/producto/banc-ecole/" rel="nofollow noreferrer">web page</a>, I am changing the default woocommerce gallery to a vertical view. I use two columns of 70% gallery, 30% text. I tried the following CSS code, but I still need to make the thumbnails a bit bigger and move the main photo to the right, as I show in the <a href="https://i.stack.imgur.com/Wj9ld.jpg" rel="nofollow noreferrer">attached photo</a>
  Could you guide me with a little more code?
  Thanks!</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.woocommerce-product-gallery {
      display: flex;}
  .woocommerce-product-gallery .flex-control-thumbs {
      order: -10;}
  .woocommerce div.product div.images .flex-control-thumbs li {
      width: 100%;
      padding-top: 0;
      padding-bottom: 5px;}
  .woocommerce div.product .product_meta {
      border-top: 0px solid #ebebeb;
      padding-top: 1em;
      font-size: .9em;
      margin: 0 0 .8em;}
  .woocommerce div.product div.images img {
      display: block;
      width: 80%;
      height: auto;
      box-shadow: none;}</code></pre>
  </div>
  </div>
  </p>