website: gatewaymidera.com
password: GatewayMidera45
when something is in my cart it goes away though
Topic summary
A Shopify store owner is experiencing an unwanted white rectangle appearing when their shopping cart is empty. The site uses a custom wavy SVG footer design, and the white space appears to be caused by the footer moving up when the cart content is absent.
Attempted Solutions:
- A PageFly support representative provided custom CSS targeting the cart items container with a minimum height of 350px, but this did not resolve the issue.
- Another user suggested using browser inspect tools to identify the specific HTML element and add display:none CSS.
Root Cause Identified:
The issue stems from custom SVG code used to create the wavy black footer background. The store owner suspects it’s related to a divider rather than an actual white rectangle element.
Current Status:
PageFly support indicated they identified the issue and can fix it if needed. The discussion remains open with one participant asking how the problem was ultimately resolved, but no final solution has been shared yet.
Hi @GatewayMidera ,
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at the bottom of the file → Save
#MainContent:has([id*="cart-items"]){
min-height:350px
}
Hope my solution works perfectly for you!
Best regards,
Oliver | PageFly
It did not work
How did you create the wavy black footer background? When the cart is empty the footer moves up a bit creating the white space in the black BG.
Right-click on the white rectangle and select “Inspect”. identify the HTML element that corresponds to the white rectangle. Look for any classes or IDs that are associated with it. Once you’ve identified the element, you can try adding custom CSS to your theme to remove it. Use the specific class or ID you found in the previous step, e.g.:
/* Replace ".white-rectangle-class" with the actual class or ID */
.white-rectangle-class {
display: none;
}
I don’t think its actually a white rectangle, I think its a divider, I used this code to make the wave
i think if i increase the top margin of the footer it will work, but i dont know how, please help
I checked and I see the issue is fixed. let me know if you nedđ
