Mobile issues

[goodtimesmag]

Hi swiftideas team,

I have marked several mobile issues on the screenshot attached.

1) The design of the dropdown filter is not correct.

2) I still have the problem that as soon as my product titles/names are longer than 3 lines the shop look suffers on my iPhone.

3) The site navigation on the product pages is not diplayed correctly.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

1) This looks to display correctly: http://goodtimesdeals.de/produkt-kategorie/snowboardbindungen-men/

2) Can you add the URL for that page? You will need to set a min height for all products to improve the verticle alignment.

3) That is not generated by the theme.

Thanks.

[goodtimesmag]

1) On my desktop everything looks great. But the arrow is white (an not grey) on my iphone.

2) When I open this site on my Iphone: http://goodtimesdeals.de/produkt-kategorie/snowboards-men/page/4

3) Where is this coming from – woocommerce?

[David Martin – Support]

1) The dropdown style is totally different for me, same as a browser. Same even with a cleared cache?

2) The only way to guarantee the vertical heights is using the fixed min height. Example CSS:

@media only screen and (max-width: 767px) {
.woocommerce ul.products li.product h3 {
font-size: 14px!important;
}
.woocommerce ul.products li.product .price {
    font-size: 12px!important;
}
body.woocommerce ul.products li.product {
    min-height: 495px !important;
    margin-bottom: 10px!important;
}
}

3) Yes, unless you are using a plugin for that?

Thanks.

[goodtimesmag]

1) Hmm, I don’t know what is wrong on my site. Of course I checked the website with a cleared cache, but it still looks like this: IMG_5317-1 (attachment)

2) I used your code, but on my iPhone it still looks like this: IMG_5318-1 (attachment)

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

1) I can replicate this also now, please test adding this CSS:

select.orderby {
   border-color: transparent;
   background-color: #e0e0e0;
}

2) The CSS is not added? I can replicate the issue on my iPhone6, please add the CSS in.

Thanks.

[goodtimesmag]

Hi David,

1) Perfect, thanks.

2) I have added the code. Could you please check it again?

[David Martin – Support]

Great, no problem.

2) – Can you add a WP login, I do not see the code on the front-end for mobile.

Thanks.

[goodtimesmag]

This reply has been marked as private.

[David Martin – Support]

Thanks, I had to flush your plugin cache, after that it looked fine. The CSS was then pulled through.

– How is it for you?

Thanks.

[goodtimesmag]

Actually everything looks fine now, but is there a way to reduce the big white space between the products (see screenshot)?

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

That is the trade off for the above issue.

You could limit that to only certain categories with tall products, such as Male Snowboards ?

Thanks.

[goodtimesmag]

But the images sizes are always the same, the problem was the length of the product names.

[David Martin – Support]

The image height + title height = total product height. Unfortunalty this is the only solution I can provide for this situation.

You could look to detect if is mobile using jQuery, the truncate the titles, however you would need a developer to assist you with that. Good example: http://stackoverflow.com/questions/13828274/how-to-short-truncate-long-products-title-in-woocommerce-category-pages

Thanks,
David.