Why does white space appear after hiding header and footer?

Technical Q&A
1

Hey, I tried to use a unless command to hide the header, announcment bar and footer. It worked but above the content is a huge white space. What did I wrong and how can I fix it so that the content just fills the blank space?

I used this command

{% unless template == ‘product.DAS TEMPLATE WAS ICH VERWENDE’ %}

{% endunless %}

The first content is a rich text.

Bildschirmfoto_2023-05-21_um_18_16_29.png
Bildschirmfoto_2023-05-21_um_18_16_29.png2880×1612 180 KB

2

  1. Locate the code where the {% unless %} statement is placed. Make sure it’s positioned in the correct location within the template.

  2. Check if there are any unnecessary <div> or other HTML elements surrounding the content. These elements may be contributing to the white space. Remove any unnecessary elements or adjust their styling as needed.

  3. If the white space persists, you can use CSS to control the spacing and height of the content area. In your theme’s CSS file, add the following code:

/* Adjust the CSS selector based on the container element of your content */
.container-selector {
  margin-top: 0; /* Remove top margin */
  padding-top: 0; /* Remove top padding */
  height: auto; /* Allow the height to adjust dynamically */
}