In the process of creating a product information page, I am facing an issue where clicking on a product should display the product image, description, and recommended products below. However, for some products, the layout gets disrupted as the product image overlaps the recommended products section.
Here is what it should ideally look like: image. Some products work perfectly with this layout, while others overlap and change the UI as shown in this image.
The product information consists of 3 components integrated together for display. I attempted to move the recommended products section below, but it impacted the styling of the main home page's recommended products section.
I have tried adjusting the margin-top using margin-top: 0.005rem;, increasing it to 40. However, this affected the overall styling of the main home page which is not desirable. Additionally, resizing the product image resulted in loss of quality and did not look good for mobile products.
Below are the CSS codes used for the carousel border and product image:
export const CarouselBorder = styled(Heading)`
border-bottom: 2px solid var(--secondary-color);
margin-top: 0.005rem;
margin-bottom: 0.3rem;
padding-bottom: 3px;
`export const ImageGrid = styled.div`
box-shadow: 0 1px 3px rgba(50, 50, 50, 0.4);
padding: 10px;
width: 78%;
`