[solved] How to Re-size Product info box

[shri]

Hi,

 When i view my product, the product info box width is not enough to fit the '+' and '-' buttons next to the quantity, So the '+' sign comes on the second line. Also the Add to cart button under it is also not as it was in default theme. I don't remember what i did but i need to make it look like the original theme. Does anyone know to change the width of this box.

 

Edited February 19, 2015 by shri (see edit history)

[fred-vinapresta]

Hi, what is the url to your website?

[shri]

Hello,

 

Here's the url

 

http://malverncomputerservices.com.au/

 

I managed to re-size the quantity box so "+" and "-" are on one line now. I also managed to change the width of the "Add to cart" button. but the cart image and Add to cart are both on different lines still.

 

 

Edited February 18, 2015 by shri (see edit history)

[shri]

I fixed it. Thanks alot for replying. 

[hollabrunn2003]

Hi, how did you solve that?

[shri]

Hi, 

Again i must mention i did not get much help from anyone on this forum as most of the time. I end up finding dodgy fixes on my own. I am still thankful to #fred-vinapresta for replying though

Are you able to access your css file ?

1). if you go to public_html->themes->default-bootstrap->css->product.css

 

find these lines

 

#quantity_wanted_p input {

  Width: 78px;

 

adjust width as you like and save it. For me i did 68px. And it reduced the size of the quantity box so the "+" and "-" sign sit next to each other.

 

2). Than i increased the size of the add to cart button

 

/public_html/themes/default-bootstrap/product.tpl go to following <p> tag

 

<p id="add_to_cart" class="buttons_bottom_block no-print">

          <button type="submit" name="Submit" class="exclusive" style="width:170px;">

                   <span>{l s='Add to cart'}</span>

          </button></p>

 

Added the style tag with width that i wanted.

 

3). Now the cart image and cart button will be on different line so i need to bring them on same line

 

/public_html/themes/default-bootstrap/css/product.css

 

#center_column.col-sm-9 .col-md-3 .box-info-product .exclusive:before {

      font-family: "FontAwesome";

     /* position: relative;*/ Commenting this line

     top: 0;

      left: 0;

      bottom: 0;

      color: white;

      font-size: 25px;

      line-height: 47px;

      text-shadow: 0 1px #015883;

      content: "\f07a";

      z-index: 2;

      width: 51px;

      text-align: center;

      border: none;

      -webkit-border-radius: 0;

      -moz-border-radius: 0;

      -ms-border-radius: 0;

      -o-border-radius: 0;

      border-radius: 0; }

 

That worked for me. Although there is one problem with this. When you comment out the position:relative part. It means that when you minimise or reduce the size of browser screen the cart button will not fit in the box.i am still looking for a solution to this. But it works temporarily for me.

Edited February 23, 2015 by shri (see edit history)