Content overlaps existing product details

Hi @garethjohnvaughan,

Thank you for your message.

It appears that the HTML that the hook for displaying variation pricing is absolute positioned which is causing this challenge. One fix may be to set a larger margin-bottom on the ring-sizes class. The final CSS might look like:

.ring-sizes {
    margin-bottom: 95px;
}

This should be simple for the website team to implement as well as optimise for theme compatibility. Additional CSS may be needed to get it looking just right at different screen resolutions.

Thank you.

Thank you – I tried the css code, but it made no difference: https://staging.letsbuygold.com/shop/rings/ladies-rings-rings/gold-rings-ladies-rings-rings/solid-white-gold-cubic-zirconia-opal-s-ring/

Hi @garethjohnvaughan,

Thank you for your message.

It appears that the CSS is placed before the margin-bottom: 50px and is not taking precedence. There are a number of ways to address this (in order of recommendation):

1. If the margin-bottom: 50px value is not part of the theme, it can be removed.
2. Move the newly added CSS further down so that it takes precedence.
3. Increase the specificity of the selector. I.e.: Replace .ring-sizes with .variations_button .ring-sizes.
4. Add !important to the value so that it becomes margin-bottom: 95px !important.

Using only one of the above methods should resolve this challenge.

Thank you.

Thank you, seems to work.