Shop page tweaks

[micheal_w]

Hi Team,

Can you please help to solve the following:

1. I would like to hide the sidebar completely on tablets & mobiles (under 992px) – see link above
2. I would like to hide that black stripe and icon from the bottom of product pictures. It should appear on hover only, but under 1024px it appears as default. (see image1)
3. I would like to make the sidebar reduced if possible (the settings in Theme Options > General is on)
4. My base setup is 4 columns. I know that on mobile starting at 767 it becomes 2 columns. Is it possible to have 3 columns in between these two sizes (767 – 1280)

Thanks!
M.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

1) Please use this:

@media only screen and (max-width: 997px)  {
	.sidebar {
	    display: none;
	}
	.inner-page-wrap.woocommerce-shop-page section.col-sm-9.col-sm-push-3 {
	    width: 100%;
	    left: auto;
	}
}

2) It appears you have already done this? It needs to be there on small screens, as there is not a hover state as such on mobiles.

3) I’ve supplied this for you already: http://www.swiftideas.com/forums/topic/shop-sidebar-questions/#post-301291

4) Please use this:

/* No greater than 1280px and no less than 767px */
@media (max-width:1280px) and (min-width:767px) {
    .woocommerce ul.products li.product.col-sm-4 {
        width: 33.33333333%;
    }
}​

[micheal_w]

This reply has been marked as private.

[David Martin – Support]

1) I’ve adjusted the CSS to use !important. That yields this result:

2) I see, in that case this should fix it:

.product figure .cart-overlay {
  opacity: 0 !important;
}

.product figure:hover .cart-overlay {
  opacity: 1 !important;
}

3) This could have been from the previous CSS error with the missing bracket. I have added this back, and it looks to be in use:

[micheal_w]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

For 2 can you try this one

@media (max-width:1280px) and (min-width:767px) {
.product figure .cart-overlay .add-to-cart-wrap, .product figure .cart-overlay .jckqvBtn{
display: none!important;
}
}

-Rui

[micheal_w]

2) works great thank you!

[David Martin – Support]

Thanks Rui! Glad that helped you.