CODEWITHSUNDEEP
htmlcss
user6619012
user6619012

Reputation:

Display text below price

If you visit this link, you can see below image at the center of the page:

enter image description here

On this site, if you mouse over currency symbol present on top right of window, you can see drop down options, once you change a dropdown option, you can see "Usually Delivered in 3-5 business days" text next to price - I want this text below the Price, as in the next image:

enter image description here

This is the CSS I am using and, it doesn't matter how I try, can't get the desired result. Can someone please have an advice for me? Thank you.

font-family: 'Roboto Condensed', sans-serif;
    color: #636363;
    font-size: 14px;
    line-height: 1.5;
}

Upvotes: 2

Views: 477

Answers (3)

jameswassinger
jameswassinger

Reputation: 373

$(document).ready(function() {
  $('.qty-btn').click(function(){
    if($('.qty').val() > 0)
    {
      $('.deliveryMsg').text('Usually Delivered in 3-5 days.');
    }else {
         alert("Qty must be greater than 0");
    }

  });
});
body {
  background: silver;
  }

.section {
  height: 400px;
  width: 500px;
  margin-bottom: 20px;
  background: #FFFFFF;
  margin-left: 100px;
  padding: 10px;
  }

/* used for demo purposes */
.product-img {
  background: silver;
  opacity: 0.5;
  height: 150px;
  width: 150px;
  /* center the img within the col */
  display: block;
  margin: auto;
  }

.col-left {
  width: 40%;
  }

.col-right {
  float: right;
  margin-top:-165px;
  text-align: left;
  width: 60%;
  }

.title {
  font-weight: bold;
  }

.price {
  margin-top: -5px;
  margin-bottom: -5px;
  color: blue;
  }

input[type="text"] {
  width: 50px;
  }

span {
  font-size: small;
  font-weight: bold;
  }

input[type="button"] {
  background: orange;
  color: #FFFFFF;
  }

.qty {
  width: 20px !important;
  }

.wishlist {
  width: 130px !important;
  }

.deliveryMsg {
  font-weight: bold;
  opacity: 0.5;
  }
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section">
  <div class="col-left">
    <div class="product-img"></div>
  </div>
  <div class="col-right">
    <p class="title" >Golden Waves Marble Texture Apple IPhone 4 Phone Case</p>
    <hr />
    <ul>
      <li>Device: Apple iPhone 4</li>
      <li>Design: Marbles</li>
      <li>Material: Polycarbonate Hard Case</li>
    </ul>
    <hr />
    <h3 class="price">499.00</h3>
    <hr />
    <form>
      <span>Check Delivery Availability <input type="text" placeholder="Enter PIN Code" /> <input type="button" value="CHECK" /></span>
      <br /><br />
      <span>Qty: <input class="qty" type="text" /> <input class="qty-btn" type="button" value="ADD TO CART" /> <input class="wishlist" type="text" placeholder="SAVE TO WISHLIST" /></span>
      <br /><br />
      <span class="deliveryMsg"></span>
    </form>
    
  </div>
  
</div>

<div class="section">
  <h2>Product Description</h2>
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum       has been the industry's standard dummy text ever since the 1500s, when an unknown           printer took a galley of type and scrambled it to make a type specimen book. It has         survived not only five centuries, but also the leap into electronic typesetting,             remaining essentially unchanged. It was popularised in the 1960s with the release of         Letraset sheets containing Lorem Ipsum passages, and more recently with desktop             publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
</div>

Hope that helps!

Upvotes: 0

brianxautumn
brianxautumn

Reputation: 1162

on 

.price-info

Take off 

max-width: 31%;

So that it takes up the entire line

Upvotes: 2

James Manges
James Manges

Reputation: 158

Try taking the float:left off of your p tag. That should fix a few issues on your page and might fix the issue you're having with the text displaying in the wrong area.

You should probably also add some html and css to your question. Without it it makes it a hassle to answer.

Upvotes: 0

Related Questions