Product Labels Resize

Hello
thanks again for great support after this great update 👍
Please help me with:
1.In single products, Both Labels shape (rectangle or circle ) and verbs “new” ,“sold out” , “Hot” is not resize properly at smaller devices as you can see in attached screenshot .
It seems, their size is fixed by px which make issue. The Circle or rectangle will take too much space or cover product image in smaller phone and at the other hand the translate for “sold out” will break in 2 line at wrong character position.
2. Search icon in form as seen in attached screenshot overlap with text area boarder in different phones.

Thanks in advance.

Attachments:

You must be logged in to view attached files.

Hi,

1. Please describe the problem with labels in a little bit more detail what you want to do with product labels.

– Do you want to use squared or round labels?
– Do you want to change font size or width?

2. Could you please send us a link to your website where we can see this issue?

Kind Regards

[ninja]

Well.
Sorry for my bad eng
1- no matter in use of circle or rectangle, the problem is that they don’t reduce their size same as product image in different devices. In small screen phone these shape cover the product image.
2- pelkat.com has a sticky search form and you see no problem in pc simulators but in real phone the search icon hover the border. In my case iphone 7 has this issue but iphone 8+ has not.

• This reply was modified 2 years, 9 months ago by ninja.

Hi,

1. Labels cant have 100% proportional size to the product image because in that case, they will become unreadable on small screen devices. If you want labels to take up less space you need to use rectangular labels. To control labels size on mobile devices try to add the following code to the Global Custom CSS area in theme settings and adjust its values to your needs.

@media (max-width: 575px) {  /* screen width where following code is start to work */
	body .labels-rectangular .product-label {
		padding-right: 2px; /* space beetwen right edge and text */
                padding-left: 2px; /* space beetwen left edge and text */
                font-size: 8px; /* font size of lable text */
		line-height: 12px; /* height of text line, can also control general height of the lable  */
		min-width: 30px; /* minimum width of the label. value "auto" will disable this option  */
	}
}

2. We have checked your mobile search on iOS devices and it’s looking normal on it:

Chrome – https://prnt.sc/zCe-BSqogRbf
Safari – https://prnt.sc/pobvaKBQKkn0

Kind Regards

thanks for answer 🙂

You are welcome!

[Author]

Posts