|
: Problem With Category Spacing in Storefront View : synthetic April 25, 2018, 08:04:54 PM Hello,
I've found a little bug and not sure how to fix it. The third category item in first row of the layout is not getting the vertical seperator class applied like the rest of the categories and it throwing off the alignment a little. You can see here https://doingitnaturallyusa.com/store (https://doingitnaturallyusa.com/store) Notice the body wash is not getting that vertical seperator. I think I found it was being applied in the products.php file at line 76 but my php skills are very weak. I also noticed that in mobile view, the layout of this page gets really odd. Is there a CSS hack I can apply with media queries to just get a 1 column category layout? : Re: Problem With Category Spacing in Storefront View : jonahh April 26, 2018, 10:46:12 AM Hello,
I'm not seeing an vertical spacing issues as you can see in my attached image. I do see the vertical spacing class is not on the 3rd item. This would be a Virtuemart issue and you would need to check with them as to why its not. For the media queries they are all located in our thirdparty.css file. Also you may need to add in the following: : .category-view .clear {clear:none !important;}so that the rows aren't clearing. Right now they clear after 3 items and that's why you get 1 item on a row in mobile view and other lower resolution views like tablets. : Re: Problem With Category Spacing in Storefront View : synthetic April 26, 2018, 12:57:21 PM Thanks for the reply. It was actually a horizontal spacing issue with the 3rd product category not getting that vertical spacing class I think. The distance between second and third category is smaller than first and second without that. I kinda regret using Virtuemart now but have so much time invested in setup and working out the kinks that I'm just going with it.
I will try to add that clear fix in to see if that helps. Thanks for the idea. : Re: Problem With Category Spacing in Storefront View : synthetic April 26, 2018, 01:16:37 PM I actually think its that vertical separator class (seems to add a horizontal margin) that might be causing the mobile layout issue too. That clear fix didn't seem to make any difference and I can see how the sizes were set correctly in media queries on the third party css :(
: Re: Problem With Category Spacing in Storefront View : synthetic April 26, 2018, 01:35:46 PM To avoid digging into the VM php... I targeted the 3rd child in category-view and added the needed margins which seems to have fixed it. The mobile now shows one column but it appears to be still showing each element at 48% width and not the 98% width. I am wondering if this something to do with ppi of retina on my iPhone 7+?
: Re: Problem With Category Spacing in Storefront View : jonahh April 30, 2018, 10:33:08 AM Ah I see the VM CSS is overwriting this. Just add an important declaration to the thirdparty.css file like follows:
: @media screen and (max-width: 750px) : Re: Problem With Category Spacing in Storefront View : synthetic May 02, 2018, 08:01:25 AM Ah I see the VM CSS is overwriting this. Just add an important declaration to the thirdparty.css file like follows: : @media screen and (max-width: 750px) Thank you for your find and reply. That did seem to fix the problem! :) |