Issues with notices like .woocommerce-info class

Hello,

I have found that in mobile view any notice on top or bottom of page is cut off, all content/text is positioned and stacked to the left of the notice like ie. .woocommerce-info class

I have noticed this issue on add to cart success notices, add to wishlist success and most others.

Then when checking the CSS for ie. “.woocommerce-info” i find a padding-right: 80px, and this will ofcourse mess the content in smaller screens.

Brgds
Rune

Hello,

Are you checking on the real device on the browser? Please check the issue on the Storefront theme to find out if our theme causes the problem.

Best Regards

This is from your CSS, see the padding-right which is 80px, padding-left is 65 but thats ok because you have an icon in the left. And yes works great with other themes.

#yith-wcwl-popup-message,.dokan-alert,.dokan-error,.dokan-info,.dokan-message,.dokan-store-contact .alert-success,.mc4wp-alert,.woocommerce-error,.woocommerce-info,.woocommerce-message,.yith_ywraq_add_item_product_message,div.wpcf7-response-output{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:20px;padding-top:10px;padding-bottom:10px;padding-right:80px;padding-left:65px;min-height:60px;border:none;color:#fff;line-height:1.3}

I belive there is a typing error, should be padding-right 8px

Rune

After further checking these notices for all actions i found that they are very bad on smaller devices and the reason is your complicated CSS based on “display: flex”.

When using “display: flex” text which include a url/link will get stacked. A message like the below where “login” and “register” contains a url/link will get stacked:

Please “login” or if you do not have an account you can “register”.

And if “display: flex” is used:

Please
“login”
or if you do not have an account you can
“register”.

I have fixed all notices using the below CSS which means that they do now show up perfectly fine on any browsers or screen size, even if text contains links or buttons.

div.wpcf7-response-output > *, .mc4wp-alert > *, .woocommerce-error > *, 
.woocommerce-message > *, .woocommerce-info > *, #yith-wcwl-popup-message > * {
    margin-right: unset;
    margin-left: unset;
}
div.wpcf7-response-output, .mc4wp-alert, .woocommerce-error, .woocommerce-message, 
.woocommerce-info, #yith-wcwl-popup-message {
    display: inline-block;
    padding-right: 10px !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    width: 100%;
    min-height: auto;
}

You should really check this and make a fix for it.

Brgds
Rune

Please, provide us a screenshot of this problem for better understanding. Also, send us a link where we can see this problem live.

Hello,

See the attached screenshots and you can see the issues in your demos. You will see it in the product added to cart message, button has margin 10px to left and right and on mobile view text is moved below button.

See the attached images.

Another question, i just found that my test/staging site does not have the “productname was removed from cart Undo?” notice. Is there any settings to enable/disable this notice? Otherwise i need to see if conflict with any plugins. But it works in my live site using another theme.

But more important – I see that cart and checkout pages does not have breadcrumbs when viewed in mobile, and also contact page for both mobile and desktop. This is important for the ease of use and specifically in mobile as there often is limited with navigation.

Rune

Attachments:

You must be logged in to view attached files.

Hello,

1. If a notice has close button it has padding-right: 80px to preventing text overlapping on button (https://prnt.sc/nraahx). If there is not a close button, notice has default padding-right: 30px (https://prnt.sc/nra8sg).

You can change this padding on mobile by adding the following code snippet to the Mobile Custom CSS area in Theme Settings.

.mfp-content .mc4wp-alert, 
.search-no-results.woocommerce .woocommerce-info, 
.woocommerce-checkout .woocommerce [role=alert], 
.woocommerce-form-coupon-toggle > .woocommerce-info, 
.woocommerce-form-login-toggle > .woocommerce-info, 
.woocommerce-cart .woocommerce-notices-wrapper [role=alert], 
.woocommerce-MyAccount-content .woocommerce-message[role=alert] {
padding-right: 20px;
}

2. Styles display: flex and margin-left/margin-right:20px is added to vertically centre content of the notice and add spacing to multiple inline buttons. Following styles are optimized for supporting most Woocommerce plugins and cannot be removed.

If you want remove spacing from VIEW CART and UNDO buttons try to add the following code snippet to the Mobile Custom CSS area in Theme Settings.

#yith-wcwl-popup-message>*, 
.mc4wp-alert>*, 
.woocommerce-error>*, 
.woocommerce-info>*, 
.woocommerce-message>*, 
div.wpcf7-response-output>* {
 margin-left: 0;
}

3. Cart/Checkout breadcrumbs were replaced by steps purchase titles in top of the page for better usability.

4. Our theme didn’t have the option to disable “productname was removed from cart Undo?” notice. It’s working only like on our demo site. Try to disable additional plugins.

Regards

Hello,

1. Well, the 80px padding also appear if no close button. Anyway i have fixed the notices with some custom css and tested with 60 of my clients most used plugins, and now it works perfectly fine.

2. When using “display: inline-block” there is no need to use margin left/right and you get a perfect distance between inline buttons. Also this fixed with custom css.

3. Yes, and the checkout steps is nice and works great on desktop, but for some wierd reason it is disabled in mobile where it is most important. I have also fixed this issue with the below custom css:

@media all and (max-width: 768px) {
.woodmart-checkout-steps ul li:not(.step-active) {
    display: inline-block;
}
.page-title .woodmart-checkout-steps ul li {
    font-size: 16px;
}
.woodmart-checkout-steps ul li:after {
    margin: 0 5px;
    font-weight: bold;
    font-size: 85%;
    opacity: .7;
    content: "\f118";
    font-family: "woodmart-font";
}
}

So we can just close this ticket 🙂

Brgds
Rune

[Author]

Posts