Craft Theme Layout Issues

Store Design
,

Topic summary

A user is experiencing layout problems with the Craft theme and needs help with two specific issues:

Problems identified:

  • Video banner text appears too close to the header on mobile devices
  • Excessive spacing exists between footer menus and copyright information on desktop

Solution provided:
A community member shared custom CSS code to address both issues, instructing the user to add it via Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS.

Current status:
Partially resolved. The video banner fix worked successfully, but the footer code had an unintended side effect—it completely removed the newsletter section instead of just adjusting spacing. The user has requested additional assistance to correct the footer issue while preserving the newsletter functionality.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I am currently working on a website that is using the Craft theme, and I am having a couple of issues:

  1. I would like to adjust the video banner height on mobile so that the text isn’t so close to the header (photo 1 attached)

  2. I would like to remove the extra spacing in the footer on desktop view between the menus and the copyright info (photo 2 attached)

The preview link is: https://c9697fcvatbr7ouc-65874886903.shopifypreview.com

Thanks so much!

Screen Shot 2024-11-10 at 11.29.49 pm.png
Screen Shot 2024-11-10 at 11.29.49 pm.png1004×1098 213 KB

Screen Shot 2024-11-09 at 2.11.21 pm.png
Screen Shot 2024-11-09 at 2.11.21 pm.png2796×1076 135 KB

2

Hi @BellesandBells

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS
  2. Paste the code provided into the Custom CSS section.
@media screen and (max-width: 768px) {
   .banner__box.content-container {
      padding: 12rem 1.5rem !important;
   }
}

.footer-block--newsletter {
   display: none !important
}

I hope it will help you!

3

Hi @BellesandBells

To complete your requests, please follow these steps:
Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS > Paste the code below

@media screen and (max-width: 768px) {
    .banner__box.content-container {
        padding: 12rem 1.5rem !important;
    }
}

.footer-block--newsletter {
    display: none !important
}

I hope it will help you :slightly_smiling_face:

1 Like
4

Thank you so much @Beae_Cass

The code for the video worked perfectly, however, the code for the footer has removed the newsletter altogether. Can you please assist?