How to modify the position of the text: "Out of stock"

[monicaamb]

I would like to modify the position of the "Out of Stock" text so that it can be read. For example, put it above the little stars. I have done it with CSS and it is okay, the problem is that I don't know how to put it in the different mobile resolutions.

Another problem is that any change you make with CSS is also reflected on the product page:

Edited November 9, 2022 by monicaamb (see edit history)

[QuickUpdate.net]

don't know your situation exactly but you should use a CSS class specifically for the product page as for mobile resolutions there are probably @media rules for specific mobile widths that you need to modify

[monicaamb]

3 hours ago, QuickUpdate.net said:

don't know your situation exactly but you should use a CSS class specifically for the product page as for mobile resolutions there are probably @media rules for specific mobile widths that you need to modify

Thank you for the reply.

I am customing in that way. Do you know how to indicate a specif width in media query? I mean, for example, a css class for Iphone and other for Iphone 4. 

[QuickUpdate.net]

The definition for media query width is:

@media (min-width: 576px) { css rules here }

But you need to know the specific width of the devices you want to define and insert media query for each width.