Responsivity in WooCommerce and Virtue Image Menu Item for smaller screens

[Rolf Espen]

Rolf Espen

August 7, 2015 at 3:42 am

Hi,

Thank you for a wonderful theme.

So I have a few questions about responsivity for mobile and ipad/tablet screens. I have created an online shop using WooCommerce with the Virtue Theme. Everything looks fine when working on my computer screen, but as soon as I log in on my mobilephone there are a lot of issues. I’m a new beginner at this, so I really need some help sorting this out.

1.
I am using the primary navigation and mobile navigation for the Main Menu. When I visiting the page on my mobilephone I see a large Menu button – when pushing it I get the whole menu listed downwards with bulletpoints. My costumer has a lot of categories and subcategories. How can I “hide” the subcategories, and only show the categories by first click? For example – She has “Brands” as a category, and a lot of brandnames as subcategories. I want the costumers to be able to click the menu, see Brands – and then click Brands to see the list – if they want.

Picture 1

2.
Like I said I’m using WooCommerce and have been experiencing a few problems when viewing on a smaller screen. It is set up to show a revolution slider (with a simple text – shortcode put in product category) right under the menu and 4 product in each row. On the mobile screen the revolution slider is eihter hidden, placed on the far left halfway off the screen or in some cases it works fine.
Also, the products are placed to the far right, almost out of the screen, 1 in each row, and sometimes on top of each other. Sometimes you can see the feature image, and sometimes not.
In other words – nothing works like it should here. When you enter a product everything seems to work fine, but the problem lies in the view of several products in a category.

I want the products to be displayd at least 2 in a row when on a smaller screen, and aligned centered and not pushed to one side.

Picture 2
Picture 3
Picture 4
Picture 5
Picture 6
Picture 7 – computer screen

3.
On my shop page – I’m not using the shop page built in for WooCommerce displaying categories, but a page called Shop – I have listed the categories up by using the Virtue: Image Menu Item. This looks neet and tidy on my computerscreen, but again it looks off on the smaller screens.
It is once again shoved off to the far right of the screen, and only displays one image in a row. Here I would like to at least have it centered aligned.

Picture 8 – computer screen
Picture 9
Picture 10
Picture 11

My Costum CSS box in Theme Options looks like this:

.page-header {
display: none;
}

html, body {padding:0; margin:0; height:100%;}
#wrapper {position: relative; min-height:100%;}
#containerfooter {position: absolute; bottom: 0; left: 0; right: 0;}
.contentclass {padding-bottom:160px;}

#nav-main ul.sf-menu li ul.sf-dropdown-menu li a:hover {color:#f2a79d;}

#content .main {float:right;}

@media (min-width: 992px) {
#nav-second ul.sf-menu {
display: none;
}
.page-id-34 #nav-second ul.sf-menu {
display: block;
}
}

.sf-menu ul, .sf-menu li:hover ul, .sf-menu li.sfHover ul {width: 140px;}

a:focus {
outline: none;
}

@media (min-width: 992px){
#nav-second ul.sf-menu>li {
width: auto;
padding-right: 15px;
padding-left: 15px;
}
}

@media (min-width: 1200px) {
#nav-second ul.sf-menu>li {
width: auto;
padding-right: 30px;
padding-left: 30px;
}
}

.products div.product {
border:none;
}

#nav-main ul.sf-menu {
margin-top: 50px;
margin-bottom: 0px;
}

[class*=”post”] { border:none !important; }
#kad-blog-grid .blog_item {
border: 0;
}

I really hope you will be able to help me with this. Like I said I’m a new beginner and haven’t got too much experiece with WordPress, coding and all the rest of it. Hope to hear from someone soon.

Thank you!

Ida