-
My page contains a grid with 3 rows in the content, and each container has a box shadow and a top border. The page also has an element added to it positioned using the before_footer_content hook.
The issue is the grid containers on the page (the top border and box shadow) are also being applied to the first row of the element positioned at before_footer_content. That element appears correctly on all other pages.
The element appears correctly on all other pages.
I have cleared caches many times but it hasn’t fixed the issue.
-
Hi there,
To fix this, edit the All Products element. Duplicate the Grid block that contains all the containers, then delete the original one.
This issue happens because the top three containers inside the grid share the same unique ID as the three rows above, causing a styling conflict.
-
Thank you, this fixed the issue. I just don’t understand why the top three rows in the All Products element would share the same unique ID as the three rows above it. Is there something I need to do differently?
-
This issue usually occurs when replicating blocks using the copy-and-paste function instead of the duplicate option. Copying and pasting retains the block’s unique ID, whereas duplicating generates a new one.
To avoid this, always use the duplicate option when replicating blocks.
-
Very good to know. I didn’t realize that. Thanks very much for your help!
-
You’re welcome!
- You must be logged in to reply to this topic.