Hi there!
how can i move the follwing error message to a new line, that it is not hidden by the button?
How it not should look like:
Where error message should be placed:
URL: Pokémon s6H Silver Lance 30er Display - Japanisch – JamoCards
Topic summary
A user is experiencing an issue where an error message on their Shopify product page is being hidden behind the “Add to Cart” button. They shared a screenshot showing the problem.
Proposed Solution:
Another user suggested adding CSS code to the base.css file to reposition the error message. The solution involves:
- Setting the product form to
position: relative - Adjusting the error message wrapper positioning to prevent overlap
The CSS targets .product-form__error-message-wrapper and .product-form elements to ensure the error message displays on a new line above the button rather than being obscured by it.
Status: A technical solution has been provided but not yet confirmed as implemented or tested.
Add This css in your edit Code > base.css file
.product-form__error-message-wrapper[hidden] ~ form {
position: relative;
}
product-form.product-form {
position: relative;
}
product-form.product-form form{
position: absolute;
top: 0;
width:100%;
}