Issue
i have this snipet of code and i want to align the variation-options options with the woo-price-area on the right:
<div class="woo-button-area">
<div class="variations variation-price-wrap">
<div class="variation-options">
<select id="opt" class="" name="attribute_pa_opt" data-attribute_name="attribute_pa_opt"
data-show_option_none="no">
<option value="opt1" class="attached enabled">Option 1</option>
<option value="op2" class="attached enabled">Option 2</option>
</select></div>
<div class="woo-price-area">
<p class="price">
<del><span class="woocommerce-Price-amount amount"><span
class="woocommerce-Price-currencySymbol">£</span>9.00</span></del>
<ins><span class="woocommerce-Price-amount amount"><span
class="woocommerce-Price-currencySymbol">£</span>5.00</span></ins>
</p>
<div class="wc-availability"></div>
</div>
</div>
<div class="single_variation_wrap">
<div class="woocommerce-variation single_variation" style="">
<div class="font80">
<a rel="nofollow" href="#details" class="csspopuptrigger" data-popup="details">Details</a>
</div>
<div class="prosconswidget">
<div class="wpsm_pros mt20 font80">
<ul>
<li>Test li</li>
</ul>
</div>
</div>
</div>
</div>
</div>
I have tried floating but the details link come over price area.
This is the page url: https://jsfiddle.net/4x93rLmf/21/
Solution
you can target their wrapper class .variations.variation-price-wrap{display:flex;}
.variations.variation-price-wrap{display:flex;
justify-content:space-between;}
p.price {
display: flex;
flex-direction: column;
margin: 0;
}
<div class="woo-button-area">
<div class="variations variation-price-wrap">
<div class="variation-options">
<select id="opt" class="" name="attribute_pa_opt" data-attribute_name="attribute_pa_opt"
data-show_option_none="no">
<option value="opt1" class="attached enabled">Option 1</option>
<option value="op2" class="attached enabled">Option 2</option>
</select></div>
<div class="woo-price-area">
<p class="price">
<del><span class="woocommerce-Price-amount amount"><span
class="woocommerce-Price-currencySymbol">£</span>9.00</span></del>
<ins><span class="woocommerce-Price-amount amount"><span
class="woocommerce-Price-currencySymbol">£</span>5.00</span></ins>
</p>
<div class="wc-availability"></div>
</div>
</div>
<div class="single_variation_wrap">
<div class="woocommerce-variation single_variation" style="">
<div class="font80">
<a rel="nofollow" href="#details" class="csspopuptrigger" data-popup="details">Details</a>
</div>
<div class="prosconswidget">
<div class="wpsm_pros mt20 font80">
<ul>
<li>Test li</li>
</ul>
</div>
</div>
</div> </div>
</div>
Answered By - godfather Answer Checked By - Mildred Charles (PHPFixing Admin)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.