Kaushik S. a11n

Hi there,

I see those files actually exist. So, if you see https://xsmart.ro/wp-content/plugins/woocommerce/assets/js/photoswipe/photoswipe-ui-default.min.js-wc.6.1.1 there is a string -wc.6.1.1 at the end which is supposed to be like photoswipe-ui-default.min.js?ver=4.1.1-wc.6.1.1. The part ?ver=4.1.1 is getting removed which I suspect is due to a plugin.

If you open that URL without the -wc.6.1.1 https://xsmart.ro/wp-content/plugins/woocommerce/assets/js/photoswipe/photoswipe-ui-default.min.js it works.

I suggest performing a conflict test as described here: https://woocommerce.com/document/how-to-test-for-conflicts/

Please let us know how it goes.

Hi there,

> The iframe that houses the CC number input field has a font size that is too large on mobile. Because of the size, the last 4 digits are hidden behind the credit company logo.

The credit card icon that appears on the input field for the CC number is applied using CSS from the WooCommerce Square plugin. On mobile, the CSS hides this icon by default.

If that’s not the case for you, you could try hiding the CC icon by applying:

.woocommerce #payment div.payment_method_square_credit_card .wc-square-credit-card-hosted-field-card-number{
background-image: none;
}

However, it is not possible to change the font size of the input field, as that comes from an iframe having Square URL, so all of the form’s content comes from the Square server.

Hope that helps!

Hi there,

In that case, we’ll just need to remove the “padding: 10px;” on the menu. Here is the updated code:

ul.products li.product {
  width: 46.411765%;
  float: left;
  margin-right: 5.8823529412%;
}

ul.products li.product:nth-of-type( 2n ) {
  margin-right: 0;
}

@media ( min-width: 768px ) {
  ul.products li.product:nth-of-type( 2n ) {
    margin-right: 5.8823529412%;
  }
}
.home.blog .site-header, .home.page:not(.page-template-template-homepage) .site-header, .home.post-type-archive-product .site-header {
    margin-bottom: .25em;
}
@media screen and (max-width:768px) {
    .site-search {
        display: block !important;
    }
}
@media screen and (max-width: 767px) {
  .storefront-primary-navigation {
        position: absolute;
        top: 40px;
        right: 10px;
    }
    .storefront-primary-navigation .menu-item {
      background-color: #ffffff;
      padding-left: 15px;
    }
    #masthead .site-search {
        padding-top: 20px;
    }
  .storefront-primary-navigation .menu {
      background: #fff;
      box-shadow: 0 0 7px #ccc;
  }
}

Cheers,
Kaushik S.
Happiness Engineer

Hi there,

The CSS code you shared has a missing close ‘}’ bracket.

I have fixed the CSS code and added a few more lines to fix the transparent menu on mobile.

Let us know if this works for you:

ul.products li.product {
  width: 46.411765%;
  float: left;
  margin-right: 5.8823529412%;
}

ul.products li.product:nth-of-type( 2n ) {
  margin-right: 0;
}

@media ( min-width: 768px ) {
  ul.products li.product:nth-of-type( 2n ) {
    margin-right: 5.8823529412%;
  }
}
.home.blog .site-header, .home.page:not(.page-template-template-homepage) .site-header, .home.post-type-archive-product .site-header {
    margin-bottom: .25em;
}
@media screen and (max-width:768px) {
    .site-search {
        display: block !important;
    }
}
@media screen and (max-width: 767px) {
  .storefront-primary-navigation {
        position: absolute;
        top: 40px;
        right: 10px;
    }
    .storefront-primary-navigation .menu-item {
      background-color: #ffffff;
      padding-left: 15px;
    }
    #masthead .site-search {
        padding-top: 20px;
    }
  .storefront-primary-navigation .menu {
      background: #fff;
      padding: 10px;
      box-shadow: 0 0 7px #ccc;
  }
}