How to edit the Inventory product status block

[INKLY]

Hi, I would like to edit the Inventory product status block, as you can see on the screenshot below, because of the text's length it hides the orange radio 'circle'. I would like the text to be moved on the right, underline the 'Quantité limité" and also put the quantity in BOLD. Does anyone know how I can achieve this? Thank you for your help. 

Best regards,

Store URL: https://inkly.fr/?_ab=0&_fd=0&_sc=1&preview_theme_id=163175923977

[aBox_Agency]

Hello @INKLY 

As seen your orange circle is inside the <p> tag. and the <p> tag contains the display: flex; property, which is why its overlaps.

If you know, You need to make one new div and Place both <p> and <svg> inside and give flex CSS and give Title to underline and qunatity to <strong>.

Thank you

[Moeed · Accepted solution]

Hey @INKLY 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.product__inventory svg {
    width: 40px !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[INKLY]

Thank you !

[Rahul_dhiman]

Hello @INKLY 
1) the text's length it hides the orange radio 'circle'.
Go to online store ---------> themes --------------> actions ------> edit code------->Theme.css/base.css

p.product__inventory.no-js-hidden svg {
overflow: visible;
}

and the result will be

2)  underline the 'Quantité limité" and also put the quantity in BOLD.
please check your inbox


If this was helpful, hit the like button and mark the job as completed.
Thanks