eStore/NextGEN – Adjusting Width of Product Variation Drop-Downs/Container

[PsychoCenobite]

I’m not sure if I’ll explain this correctly, but I’ll try…

On the gallery page that uses the eStore and NextGEN plugins, the number of columns displays at 3 on a standard browser and then adjust to 1 column on an iPhone.

If I change the NextGEN column settings to 4, rather than 0, then it fixes the columns at 4, despite the browser you view the page on. This means that on an iPhone it crushes 4 columns into the space for 1 column.

What I’d like to do is to change the width of product area or the variation drop-down menus, or maybe the container for all of them. This should then allow for 4 or more columns without changing the NextGEN column settings.

If this is possible then I should be able to have 4+ columns when viewing it on a standard browser, but when viewing it on an iPhone it should adjust to to just 1 column.

Is this possible? Maybe make the area the same width of the “Add to Cart” buttons?

I know that I would have to change the size of the thumbnails as well, depending of how many columns I want, but is seems the current width is based on the product area or the variation drop-down menus, or maybe the contain for all of them.

Here is a link to the gallery page as it currently is, 3 columns on a standard browser and 1 column on an iPhone, with the NextGEN columns set to 0:

Password: test1

[http://www.ph-design-test.co.uk/rebecca-jon-1.html]

Many thanks.

[admin]

That totally depends on how long your variation names are. Lets say one of your variation name has 30 characters in it. Then the browser will adjust the select drop down box’s width to accommodate those 30 characters in it.

If you have a group of variations where one variation name has 50 characters from the group then the width of that select dropdown box will be 50 characters long.

[PsychoCenobite]

Thanks for the reply.

I’m not sure if my website links were working last night. I’m just going live with the actual site and was removing some parts of the test site.

The link and password above should now be working if you wanted to see how they look.

The variation names will always be the same as they are now. The longest number of characters that are used is 24. But the width of the drop down box has enough room for more than double that.

If I can reduce it to fit a bit tighter to the words inside the box, then that should allow for them to be about the same width as the “Add to Cart” button, and that should then allow for 4-5 columns across the page.

If this is possible, could you give me some pointers on where to make this change? I’m happy to give it a bit of trial and error to get the correct size.

Many thanks.

[admin]

In your case it looks like your theme is specifying a fixed width for all dropdown select boxes. This is why the select boxes are wider than the amount of characters. Do the following theme test quickly to verify what I am saying (this test should take only 2 minutes):

https://support.tipsandtricks-hq.com/forums/topic/test-to-identy-a-conflicting-theme-or-plugin

Anyway, You should be able to override the width of the select boxes by adding the following CSS code in eStore’s custom CSS file (wp_eStore_custom_style.css):

.eStore_variation {

width: 140px !important;

}

[PsychoCenobite]

That’s brilliant! Thank you very much!

I added the extra code to the CSS file and set it to 130px and I can now have 6 columns across the page and it goes down to 1 column on the iPhone.

This is very helpful because the final client galleries will have 500+ images in them, which would have meant a lot of scrolling down or a lot of pages.

This is now perfect!

[teenmetal]

Hi,

How do I expand the width of the product quantity field for iPads and iPhones? When customers enter a double digit quantity on their iPhones, the quantity field box is too narrow, and only one numeral shows up.

Thank you!

[admin]

Please post a link to the page where you have the product listed. It will allow me to check your CSS and suggest a solution.

[teenmetal]

Thanks–here’s a sample product page: [http://www.namarococo.com/portfolio/random-geometry-in-graphite/]

Quantity field is fine on desktop computers, but on iOS, the quantity field is too narrow to see more than one digit, if double digits are entered. I don’t mind if a CSS fix makes the quantity field wider on desktops too, I just don’t know where or how to adjust the CSS.

[admin]

Thank you. I made a slight tweak in the plugin that should address this issue.

[InDesign]

Thanks for the CSS tip. That was a very helpful clue. Love your product. please keep up the good work.

[Author]

Posts