New Button, and Product Brand Showing too Small on site

Hey so the mobile is fine with the logo on the product page

But on PC its too small.

This listing clearly shows the problem: https://elementearthcbd.com/product/myriams-hope-750-mg-1500mg-full-spectrum-cbd-oil-30ml-bottle-tincture-vanilla/

It seems like there must be a better way to do this, but anyway, I want the New button off and I need to have the logo tags at a larger size to proportionality fit, just larger, as you can see. Thank you, also my login is below, I have had CSS issues with these product screen attributes so you have helped before but now this is showing.

Thank you.

James

Attachments:

You must be logged in to view attached files.

Hello,

I saw the screenshots you attached and visited your website. Please try and add the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

For the text size too small:

body .product-label.attribute-label:not(.label-with-img) {
width: 65px;
font-size: 12px;
}

For the brand image:

.labels-rounded .label-with-img {
max-width: 70px;
}

Best Regards.

Thank you, I put these in the General CSS or specific to PC?

Still, the same size, might have to do with prior CSS that was provided by Xtemos a few months back, I don’t know why this is so hard to do, I need them to one size on PC, smaller on mobile, can you please help us out, it looks very unprofessional in regards to them being mobile-friendly as advertised, please help.

Login below, please, but please be careful with the code, I know you will be. I have it backed up as well.

James

Attachments:

You must be logged in to view attached files.

Hello,

I have logged into your website and increased the size of the labels. Please clear cache and check back.

Screenshot for Clarification: https://ibb.co/3fKPM8w

Regard’s.
Xtemos Studio.

Thank you, I will resize it. As the per/dose is not even and cutoff, both on mobile and PC as you can see from the screenshot, its supposed to say 25MG/DOSE not 25MGD/OSE, so how I can figure this out? Make that container a few pixels wider so it can read properly?

James

Hello,

You are Most Welcome.

Please try and add the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

body .product-label.attribute-label:not(.label-with-img) {
	width: 97px !important;
}

Best Regards.

Hey thank you but it did not work, please look at the attached, thank you so much for helping!

James

Attachments:

You must be logged in to view attached files.

Hello,

I have logged into your website and changed the width of the label. Please clear cache and check back.

Screenshot for Clarification: https://ibb.co/nm7p0MC

Best Regards.

Wonderful! Now on mobile is there a way to make it smaller or responsive? As the size on the mobile is quite large, if not I can, if I have to, deactivate it on mobile but I really don’t want to, you have any advice for mobile? CSS exclusive for mobile?

I really appreciate this, Aziz, as its been months of trying to get this right, please if you can help let me know. Please.

James

Hello,

You have asked to increase the width of the container that’s why I have increased the width of the label to display the label text in one line.

As it’s working fine. If now we try to reduce the width then it will be displayed as it was before on mobile.

If you still want the CSS then try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

body .product-label.attribute-label:not(.label-with-img) {
width: 60px;
font-size: 12px;
}

You can set the width and font-size according to your need on mobile.

Regard’s.
Xtemos Studio.

I dont get it, I cant make it smaller on the mobile?

How do I disable them then on Mobile 🙁 This sucks, it good to have but I cant have it the way it looks now unless there is a specific CSS just for mobile?

How to disable until we figure it out? Thank you

James

Hello,

As I mentioned in my previous reply you can set the width and font-size by adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

body .product-label.attribute-label:not(.label-with-img) {
width: 60px;
font-size: 12px;
}

If you want to hide it for mobile then try adding the following Custom CSS in the Custom CSS for Mobile area.

body .product-label.attribute-label:not(.label-with-img) {
display: none;
}

Best Regards.

[Author]

Posts