Hi, currently to get to the ‘Refer a Friend’ form on our site, the user has to scroll down in the section. Is there a way to extend the height of the section so the form is visible without scrolling?
Topic summary
Issue: The “Refer a Friend” form is hidden below the fold within its section, requiring users to scroll. The goal is to increase the section height so the full form is visible without scrolling.
Context and assets:
- Public page: https://www.thegiftofoil.co.uk/pages/refer-a-friend
- Editor link shared; screenshot provided. The form appears to be embedded via an iframe (RefCandy: iframe#refcandy-candyjar).
Proposed solutions (theme.css):
- Add a CSS override to increase the iframe height:
.homepage-section–friend-referal iframe#refcandy-candyjar { height: 900px !important; } - Alternatively, remove an existing restrictive rule: find and delete “height: 216 !important;” in theme.css (screenshot guidance provided).
Notes:
- CSS (Cascading Style Sheets) controls styling; an iframe is an embedded external content frame. Increasing/removing a fixed height should reveal the full form without scrolling.
Status/outcome:
- Actionable steps provided; no confirmation yet that the change resolved the issue. Discussion appears open pending user feedback.
Thanks for your question.
Can you share with me the URL of the page has form to check on it for you?
Thank you.
Hi @TheGiftOfOil ,
Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:
.homepage-section--friend-referal iframe#refcandy-candyjar {
height: 900px !important;
}
These are two links to the page. One from the shopify editor and one from the normal site
Thanks for sharing. You can follow the instruction to resolve the issue:
-
Go to Shopify > Theme > Edit code > Navigate to theme.css file.
-
Find the code line " height: 216 !important; " > then delete it. Screenshot
I hope it helps