Return to previous page

Woocommerce variations breaks responsive design

This topic has 11 replies, 2 voices, and was last updated 8 years, 10 months ago ago by Eva Kemp

Jimbo

Participant

June 10, 2015 at 19:40

Hi,

I have noticed that when adding variations using woo commerce in this theme the page is not fully responsive on a product page.

This happens on a mobile (iPhone)

this means the content is not fully visible and moves from side to side.

Please see page in private content.

Thanks

Please, contact administrator
for this information.

#69142 Copied

10 Answers

Eva Kemp

Support staff

June 10, 2015 at 20:52

Hello,

Please look at the screenshot https://s3.amazonaws.com/fvd-data/notes/168674/1433965984-kOw1Cr/screen.png and specify where exactly the problem persists as we can’t replicate it.

Thank you.
Regards,
Eva Kemp.

#69150 Copied

Jimbo

Participant

June 10, 2015 at 22:39

It happens after you select the variation, I’m certain it did not do this before theme update?

When using my iPhone in vertical resolution it makes the page width move side to side and content is not fixed?

I need variations for my products.

#69171 Copied

Jimbo

Participant

June 11, 2015 at 11:28

Hi,

I think I might have spotted the issue.

The selection drop downs might be too wide and also the whole page content is not scaled to the page!

I need this fixing ASAP please as this is a major user experience issue.

This would suggest the themes fully responsive code is broken on product pages using the mobile.

#69213 Copied

Jimbo

Participant

June 11, 2015 at 14:20

I also noticed that when selecting the variations it seems to change the zoom on the page, if I zoom out the page displays ok??

Shall I send an email to a manager as getting no response here???

Feel like going back to previous theme version!

#69236 Copied

Eva Kemp

Support staff

June 11, 2015 at 16:18

Hello,

Please show us screenshots of the problem you see from your side.

Thank you.
Regards,
Eva Kemp.

#69261 Copied

Jimbo

Participant

June 11, 2015 at 16:38

Eva,

If you tried it on a mobile you would see!

We are going around in circles yet again when there is a problem with this theme.

I will contact a manager yet again, I’m getting fed up with this theme breaking all the time.

Not happy at all

#69265 Copied

Jimbo

Participant

June 11, 2015 at 17:57

Updated woocommerce and no difference so not to do with woocommerce.

This is a theme issue on selecting the variation, this seems to zoom after selecting?

It only does this after you make the selection and so far the issue is on the mobile.

I have contacted a manager.

I AM NOW WAITING FOR A FIX PLEASE!

#69270 Copied
Eva Kemp

Support staff

June 11, 2015 at 18:50
Hello,

When filling out forms using selects on iOS they should appear at a comfortable reading size 16px. That’s why page is zoomed in until that size requirement is met. Add the following code in child theme style.css to fix your problem:
```
@media (max-width:480px){ table.variations td select {
font-size:16px;}
}
```
Regards,
Eva Kemp.
#69276 Copied
Jimbo

Participant

June 11, 2015 at 19:57

Eva,

Thank you, I added the code and it worked.

I had to add 667px as max width, no doubt this might have to go to 700+ to allow for iPhone 6 and I
Phone 6+

Might be worth adding this to theme update bug fix for iOS devices.

#69290 Copied

Eva Kemp

Support staff

June 12, 2015 at 09:40

Hello,

We’ll fix this bug in the next theme update.

Thank you.
Regards,
Eva Kemp.

#69357 Copied
Viewing 11 results - 1 through 11 (of 11 total)