Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

Widening the product-details-options box? Rate Topic   - - - - -

 
  • Brennie369
  • Senior Member
  • Members
  • Join Date: 17-Mar 08
  • 831 posts

Posted 21 June 2008 - 10:19 PM #1

Hi, you know the box on each product page that shows the price, price in points, return period, any options you have, qty & add to cart?

I need to widen mine, because one of my options is sticking outside of it a little.

I tried editing this in the style sheet by increasing the width shown in red below, but it didn't have any effect. Is this the wrong item to change in the stlyesheet? Anyone know how to make that box wider?:

/* product details styles */
.product-details-options {
background: #fffdd7 url(images/product_details_options_bg.gif) repeat-x bottom;
border: 1px solid #a3a3a3;
padding: 9px;
margin-top: 15px;
margin-left: -1px;
clear: left;
}
.product-details-options p {
font-size: 11px;
}
.product-details-option {
width: 150px;
float: left;
}

 

Posted 22 June 2008 - 03:05 AM #2

What is the URL to your website?

 
  • mdekok3000
  • Senior Member
  • Members
  • Join Date: 06-Feb 08
  • 883 posts

Posted 22 June 2008 - 03:12 AM #3

Try this:

/* product details styles */
.product-details-options {
    background: #fffdd7 url(images/product_details_options_bg.gif) repeat-x bottom;
    border: 1px solid #a3a3a3;
    padding: 9px;
    margin-top: 15px;
    margin-left: -1px;
    clear: left;
    [COLOR=Red]width: 150px;[/COLOR]
}

[SIZE=2]
[/SIZE]

 
  • Page
  • Senior Member
  • Members
  • Join Date: 06-Sep 07
  • 491 posts

Posted 22 June 2008 - 08:03 AM #4

You should also have a look at it in Safari.

It is making this box narrower all the time for some reason.
*** Trying to help and trying to learn ***
Running an upgraded v135sp3 to v2.0.12 on live store(05/02/10) but not really right after update by Dr SnoRocket

 
  • Brennie369
  • Senior Member
  • Members
  • Join Date: 17-Mar 08
  • 831 posts

Posted 22 June 2008 - 04:37 PM #5

I tried this & it didn't make any change. I even tried it with a width of 200.

Try this:

/* product details styles */
.product-details-options {
    background: #fffdd7 url(images/product_details_options_bg.gif) repeat-x bottom;
    border: 1px solid #a3a3a3;
    padding: 9px;
    margin-top: 15px;
    margin-left: -1px;
    clear: left;
    [COLOR=Red]width: 150px;[/COLOR]
}



 
  • Grabie
  • Junior Member
  • Members
  • Join Date: 14-Jun 08
  • 8 posts

Posted 22 June 2008 - 06:25 PM #6

You said you didn't notice any change. I guess you are using IE, right? If you use Firefox browser, you should have noticed the change.

To make it works with IE, you need to change the setting at style_ie.css as well.


/* product details styles */
.product-details-options {
	width: 500px;
	padding: 9px 9px 5px 9px;
}
/* /product details styles */


 
  • Brennie369
  • Senior Member
  • Members
  • Join Date: 17-Mar 08
  • 831 posts

Posted 22 June 2008 - 08:45 PM #7

YEP! That was it! Thank you very much! :D :D :D

You said you didn't notice any change. I guess you are using IE, right? If you use Firefox browser, you should have noticed the change.

To make it works with IE, you need to change the setting at style_ie.css as well.


/* product details styles */
.product-details-options {
	width: 500px;
	padding: 9px 9px 5px 9px;
}
/* /product details styles */