Drop-down options issue. The Attributes and options are cut off

[support@mycheapprint]

Hello everyone,

 

I am trying to setup my products and the fist product I added I noticed that the options are cut off.

 

I posted the issue on reddit and someone told me this

 

Add this to the bottom of your product.css file. .product-variants>.product-variants-item select {width:100%}

 

I am not a developer and do not know how to do this. 

 

Can someone please help me.

 

here is how it looks

 

https://mycheapprinting.com/brown-kraft-cards/14-3128-brown-kraft-business-cards.html#/25-size-35_x_2/33-qty-100/99-printed_sides-front_and_back/104-paper-18pt_uncoated_brown_kraft_cardstock/105-white_ink-white_ink_on_front

 

I would like to make them the same length based on the longest value in any of the attributes

 

I am on the latest version 1.7.1

 

thank you for your time

Edited May 6, 2017 by support@mycheapprint (see edit history)

[ecommerce16]

When using ftp you can access the product.css file There you have to add this.

 

If you dont know what you are doing then it should be better to ask a presta specialist to do it for you. Its easy and 2 minutes work. They will need access to your ftp.

[support@mycheapprint]

When using ftp you can access the product.css file There you have to add this.

 

If you dont know what you are doing then it should be better to ask a presta specialist to do it for you. Its easy and 2 minutes work. They will need access to your ftp.

 

Thank you for your reply. I want to give it a try myself. Doesn't sound like it's going to be hard.

 

I am not able to find the product.css on the ftp can please tell me the phat to this file.

 

thank you

[ecommerce16]

Path is: themes/your theme/css/  there you will find product.css

[ecommerce16]

after that clean cache, and maybe also your browsercache to see the changes

[support@mycheapprint]

Path is: themes/your theme/css/  there you will find product.css

 

So I found themes/classic but there is no css folder. There is however this /themes/classic/assets/css.

 

in there are are bunch of files one is theme.css  maybe I need to use this?

 

I think things are different in 1.7.1. 

[ecommerce16]

Moment i will check, i was not aware you were using 1.7

[ecommerce16]

Its complete different, i didnt know it was so different from 1.6

 

I found the file in: themes/classic/_dev/css/components/

 

I only dont know if it works when you add it to this file as a _file in my opninion never will be active. It seems to be compiled.

 

Its a bit more complicated then i thought. I thought everything should be easier, but its more complicated. I have to few experience with 1.7 to give you a proper answer at the moment.

[ecommerce16]

I fixed it:

 

Go to: assets/css/custom.css

 

and add that line under the message in the folder

 

clear cache and browser cache and it will be like this: https://www.screencast.com/t/UFquyd0Q

[support@mycheapprint]

I fixed it:

 

Go to: assets/css/custom.css

 

and add that line under the message in the folder

 

clear cache and browser cache and it will be like this: https://www.screencast.com/t/UFquyd0Q

 

I have been trying to do this with no success. here what I have and I am sure its wrong

 

/*

.product-variants>.product-variants-item select {width:100%}

 * A template should always ship with an empty custom.css

 */

 

can you please copy and past your code so I fix this?

 

Thanks

[ecommerce16]

you fixed it as i see on your shop?

 

I just added this in custom.css

 

.product-variants>.product-variants-item select {width:100%}

[support@mycheapprint]

you fixed it as i see on your shop?

 

I just added this in custom.css

 

.product-variants>.product-variants-item select {width:100%}

 

So what you are seeing on your end is correct?

 

I even cleared the cache in prestashop and browser. 

 

I am not sure why I am not seeing it?

[ecommerce16]

I think you didnt clear your browser cache proper.

 

I see this: http://prntscr.com/f593kb

 

Maybe try another browser like firefox to see. It is changed!

[support@mycheapprint]

I think you didnt clear your browser cache proper.

 

I see this: http://prntscr.com/f593kb

 

Maybe try another browser like firefox to see. It is changed!

 

I tried that too its the same. After I replied back to you I made some changes again.

 

I just want to make sure that this is correct.

 

I removed the */ and the /* from the custom.css file. Is this right?

 

maybe this is why I am not seeing it?

 

Also I want to thank you for your help in this. You ROCK!

[ecommerce16]

I dont think thats the reason you are not seeing it. I use Ccleaner to clean my browsers everytime i close them. Just to see changes instant. 

 

The problem will be still in your browser. Maybe you can also make a dns flush just to be sure you are seeing the correct shop.

 

Also i dont think it realy matters if you deleted the */

 

In my testshop i didnt use them. The file looks like this in my testshop:

 

/*

 * Custom code goes here.

 * A template should always ship with an empty custom.css

 */

.product-variants>.product-variants-item select {width:100%}

 

You can even remove this phrase:

/*

 * Custom code goes here.

 * A template should always ship with an empty custom.css

 */

 

It doesnt affect the css, its just a message to remember you if you export your theme you should do that without custom css.

[support@mycheapprint]

I tried everything you posted and its the same. I just remembered that I am using cloudflare for my site.

 

I think that is the issue.

 

Let me check