Goal: reduce the desktop-only height of the homepage “Text with Image” hero block (Shopify, woodhousespas.com). Mobile layout should remain unchanged.
Initial solution: a CSS snippet was added in theme.liquid under the tag, with an adjustable numeric value (e.g., 94) to tune height. This worked but unintentionally affected all Image with Text sections on the homepage.
Refinement: a new, scoped CSS selector was provided to target only the header/hero block (by section ID), preventing changes to the other Image with Text blocks.
Testing issue: on the preview/test site, the hero section had a different ID, so the scoped CSS initially didn’t apply. After updating the selector to match the test site’s section ID, the change worked as intended.
Outcome: resolved. The hero block height is condensed on desktop without impacting other sections. No further actions noted.
Notes: Code snippets and a screenshot are central to implementation; exact CSS is not included here. “theme.liquid” is the main theme template; the is where custom CSS can be added.
Hey @glorykwilliams ,
Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.
Change the value 94 to your liking, before you change it, try it out and see if it fits your needs.
Screenshot is for reference only, the correct code to paste is the one shown above.
