Senff - a11n

Hi @roberthedlund

You can do this with a little bit of custom CSS code.

Go into your site’s admin Dashboard and select Appearance → Customize → Additional CSS. In the CSS textbox on the left, add the following code:

.storefront-breadcrumb {
   display: none;
}

Select “Save Changes” from the top, and your changes will be applied to your site.

Hey @martak333

I’m not seeing any images that are particularly small, to be honest. Could you send a screenshot of what you mean perhaps?

Hey @uniquiadm

Which bar are you referring to exactly? There’s a few in the screenshot you added so I’m not entirely sure which one you mean.

Hey @kindfamily

You can do this with the following CSS code:

body.woocommerce-checkout {
  padding: 20px;
}

Hey @wpjakarta

Try adding this:

@media screen and (max-width: 767px) {
  #site-navigation {
    text-align: center;
    clear: both;
  }

  #site-navigation button {
    float: none;
    margin-top: 15px;
  }

  #site-navigation .handheld-navigation {
    text-align: left;
  }
}

Hey @techstacy

The reason why it’s doing that is because of this code (either from a plugin or something you’ve added yourself):

.wc-block-grid__products .wc-block-grid__product, .wc-block-grid__products li.product, ul.products .wc-block-grid__product, ul.products li.product {
    clear: none;
    width: 100%;
    float: left;
    font-size: .875em;
}

If you know where this code is coming from, then you can either remove the “width: 100%” from there, or you can add some additional code:

@media screen and (min-width: 768px) {
  ul.products li.product {
   width: 23%;
   margin-right: 2%;
  }
}

• This reply was modified 5 years, 5 months ago by Senff - a11n.