Store Issue - Mobile

[garyachristenson]

Hi there, I manage a site I built with ThemeX ( http://blackearthgrills.com ). The issue we’re having is when we view the STORE on a mobile device ( http://blackearthgrills.com/store/ ), it’s not really functional and I can’t find any WooCommerce settings or ThemeX Customizer settings to tweak to get better results.

On mobile, you can’t see the store item, or the text. It’s just a dark box and it’s not helpful at all. What are my options to resolve this? Is there a way to change the way the title is? Possibly instead of an overlay, maybe it can just be under the product image? And then a button under that? B/c right now it’s trying to show ALL three of those things in one little square and it’s not even functioning on mobile. See the issue? I’m happy to try anything for a solution Just so long as it doesn’t completely destroy anything we’ve done or created, but alternate layouts or displaying of Store info would be just fine with me. Thoughts on solutions? Is it just a “Ethos” thing that I can’t customize?

[ruenel]

Hello There,

Thanks for writing in! You are experiencing this issue because you have inserted a custom css which has affected the mobile screens as well. To resolve this, please update your custom css and make use of this code instead:

@media(min-width: 980px){
  .woocommerce li.product .entry-header h3, .woocommerce-page li.product .entry-header h3 {color: #fff;}
  .woocommerce li.product.first {
    clear: none;
  }

  .woocommerce li.product.last {
    margin-right: 4%;
  }

  .woocommerce .cols-4 li.product, .woocommerce.columns-4 li.product {
    width: 21%;
  }
}

This will make sure that your custom css will only be applied to screen sizes greater than 980 pixels.

We would loved to know if this has work for you. Thank you.

[garyachristenson]

Thanks so much, that seems to have done the trick! I’ll keep testing it out to make sure.

[thai]

You’re welcome.