Forum Support

Shape 5
March 29, 2024, 02:14:33 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Problem With Category Spacing in Storefront View  (Read 1092 times)
synthetic
Jr. Member
**
Offline Offline

Posts: 21



WWW
« on: 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

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?

Logged

-Dean
aka Synthetic Tone
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #1 on: 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:

Code:
.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.

Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
synthetic
Jr. Member
**
Offline Offline

Posts: 21



WWW
« Reply #2 on: 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.
Logged

-Dean
aka Synthetic Tone
synthetic
Jr. Member
**
Offline Offline

Posts: 21



WWW
« Reply #3 on: 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  Sad
Logged

-Dean
aka Synthetic Tone
synthetic
Jr. Member
**
Offline Offline

Posts: 21



WWW
« Reply #4 on: 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+?
Logged

-Dean
aka Synthetic Tone
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #5 on: 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:

Code:
@media screen and (max-width: 750px)
.width20, .width25, .width33, .width50, .width100, .vm-col-1, .vm-col-2, .vm-col-3, .vm-col-4, .vm-col-5 {
    width: 98% !important;
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
synthetic
Jr. Member
**
Offline Offline

Posts: 21



WWW
« Reply #6 on: 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:

Code:
@media screen and (max-width: 750px)
.width20, .width25, .width33, .width50, .width100, .vm-col-1, .vm-col-2, .vm-col-3, .vm-col-4, .vm-col-5 {
    width: 98% !important;

Thank you for your find and reply. That did seem to fix the problem!  Smiley
Logged

-Dean
aka Synthetic Tone
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.