0

visit link1 , Its fine. But visit link2 Some problems are there

1)in 2nd link, there is huge gap b/w Rs 25 & "Selling Price + Rs 10 Delivery", Add to cart & buy now button.

2)Also only text "off" is visible, "50" went inside the "check delivery availability" box. 50 & off should visible

we are using this code :

.wk_mp_design .sell_price {  display: none;}
.wk_mp_design .label.yousave_label {display: none;}
.wk_mp_design .old-price .price {color: #a0a0a0;font-size: 12px;font-weight: bold;}
.wk_mp_design .you_save_price {color: green;font-size: 11px;font-weight: bold;}
.wk_mp_design .you_save_price::after {content: "OFF";}
.wk_mp_design .special-price .price {color: #000;font-size: 13px;font-weight: bold;}
.wk_mp_design .regular-price .price {color: #000;font-size: 13px;font-weight: bold;}
.wk_mp_design .special-price {border-top: 1px dotted #ccc;clear: both;}
.wk_mp_design .You_savee {float: right;position: relative;top: -49px;}
.wk_mp_design .You_savee .special-price.yousave {border: medium none;}
.wk_mp_design .desc.std {border-top: 1px dotted #ccc;}
.wk_mp_design .mrp {display: none;}

enter image description here

fresher
  • 917
  • 2
  • 20
  • 55

3 Answers3

1

1) Caused because of 

<p class="special-price">

p elements 's margin-top

.Quick .special-price {
    margin-bottom: 0px !important;
    margin-top: 20px !important;
}

also notice the height in 

.product-shop .price-box {
    padding-bottom: 0px !important;
    height: 100px;
}

aswell.

2) I don't really understand what you mean.

Emirhan Özlen
  • 474
  • 2
  • 14
  • 2) you can see 50% off text in 1st link, you can see only "off" in 2nd link. – fresher Feb 13 '16 at 17:34
  • Sorry was gone for lunch. You're welcome. The 2nd is because of different styles applied on element. Notice the top: -100px !important; on You_savee class on working website – Emirhan Özlen Feb 13 '16 at 17:52
1

This is the relevant markup for the first site:

<div class="Quick_1">
    <div class="product-data">
        <div class="widget widget-static-block"></div>
        <div class="price-box">
            <p class="old-price">…</p>
            <p class="special-price">…</p>
            <p class="sell_price">…</p>
            <p></p>
            <div class="You_savee">…</div>
        </div>
        <div class="widget widget-static-block"></div>
    </div>
    <div class="add-to-box">…</div>
</div>

And this is the same part on the second site:

<div class="Quick_1">
    <div class="product-data">
        <div class="widget widget-static-block"></div>
        <div class="price-box">
            <p class="old-price">…</p>
            <p class="special-price">…</p>
            <div class="You_savee">…</div>
        </div>
        <div class="widget widget-static-block"></div>
    </div>
    <p class="sell_price">…</p>
    <div class="add-to-box">…</div>
</div>

If you look closely, the sell_price element is outside of the product-data element in the second link which causes this problem. If you move it inside, above the You_savee within the price-box, then it will render as desired.

poke
  • 369,085
  • 72
  • 557
  • 602
  • seems you gave perfect answer, as i dont have that much skill to analyse this, i am accepting other answer. anyways thanks a lot again. – fresher Feb 13 '16 at 17:53
1

1> height is the issue; use this

.product-view .product-essential .product-shop .price-box {
    padding-bottom: 0 !important;
    height: 75px;
}

2> top value is the issue; use this

.Quick .You_savee {
    border: 1px solid #ccc;
    border-radius: 37px;
    color: green;
    left: 151px;
    padding: 0;
    position: relative !important;
    top: -70px !important;
    width: 49px;
}

if above classes are used in multiple places just override these classes

Dinnu Buddy
  • 369
  • 1
  • 3
  • 13