Return to previous page

Issues on mobile: products overlap and secondary menu out of scale

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

McMullen

Participant

November 17, 2014 at 06:57

Hello!

I am double checking mobile view before going live (thank you for your help thus far!) and noticed that the products overlap in one row. Is there a way to columnize for mobile? It would look cleaner. I noticed in another post you added custom CSS to “fix” mobile view – is that something you can share here or does it need to be custom to the specific site? If so,please see my login creds below.

Alo, the logo (secondary header) is wonky – compressed and out-of-scale. Suggestions?

Here’s a screenshot http://prntscr.com/577dt4

THanks!!

Please, contact administrator
for this information.

#24830 Copied

8 Answers

McMullen

Participant

November 17, 2014 at 07:04

Here is another mobile screenshot (similar issue with elements not respecting container boundaries): http://prntscr.com/577epo

#24831 Copied

Eva Kemp

Support staff

November 17, 2014 at 17:46

Hello,

Please provide us with a page link for the second screenshot.

Thank you.
Regards,
Eva Kemp.

#24945 Copied

McMullen

Participant

November 18, 2014 at 01:34

The link to the page referenced by the second screen shot: http://muscleandmischief.com/mischief-makers/

but the issue is also seen on the home page: http://prntscr.com/57gjr6

#25030 Copied

McMullen

Participant

November 18, 2014 at 22:16

Hello,

I hate to seem pushy, but did you find a resolution to the above issue? That is the one thing I need to correct before going live with the site. I see that you logged in using the given credentials – di you find any issues?

Thanks again!

#25209 Copied
Eva Kemp

Support staff

November 19, 2014 at 14:50
Hello,

I’ve added the following code into custom.css file:
```
@media (max-width: 480px) {.owl-carousel .owl-item {
   width: 95px !important;
}
.owl-carousel .owl-item .btn {
font: 10px/15px 'Roboto', Arial, Helvetica, sans-serif;
padding-left: 0px !important;
width: 83px;
}
.square_box-icon .aio-icon-header h3.aio-icon-title {
font-size: 55px !important;
}
.vc_btn-mulled_wine.vc_btn_square_outlined {
margin-left: -10px !important;}
}
```
Please check the site now.

Regards,
Eva Kemp.
#25347 Copied
McMullen

Participant

November 19, 2014 at 17:26

That worked great on the home screen, however now the product images on the product pages are not displaying correctly. See screenshots:

http://prntscr.com/57zcqs

http://prntscr.com/57zedo

#25391 Copied

McMullen

Participant

November 19, 2014 at 19:27

In an effort to solve my own problem, I eliminated the products on the homepage and instead used the Essential Grid (Woo2 version) – that solved the responsive issues, and allowed me to delete the code you previously added (thank you for taking the time to do that!).

This should work fine, and will not require you to take more of your time to fix the other issues that arose when you added the custom CSS before.

Thanks so much!

#25422 Copied

Eva Kemp

Support staff

November 20, 2014 at 00:44

Hello,

That’s great you were able to find the solution.
Enjoy your work.

Regards,
Eva Kemp.

#25458 Copied
Viewing 9 results - 1 through 9 (of 9 total)

The issue related to '‘Issues on mobile: products overlap and secondary menu out of scale’' has been successfully resolved, and the topic is now closed for further responses

Issues on mobile: products overlap and secondary menu out of scale

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection