Reduce huge margin on footer? (Dawn)

Shopify Discussion
1

The footer appears to be “sticking” to the bottom of the last section on each page rather than remaining stuck at the bottom as a thin bar, creating a huge margin of white space. See screenshots

Screen Shot 2023-01-05 at 1.06.56 PM.png
Screen Shot 2023-01-05 at 1.06.56 PM.png1313×791 35.9 KB

Screen Shot 2023-01-05 at 1.07.08 PM.png
Screen Shot 2023-01-05 at 1.07.08 PM.png1224×911 155 KB

2

Hi! Try this on a duplicate theme:

Add the following to base.css

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#shopify-section-footer {
  margin-top: auto;
  width: 100%;
}

Let me know if it works!

1 Like
3

@Ryoshin thank you for the help! That worked to keep the text of the footer at the bottom of the screen, however the huge white space above the text is still present (see photo)

Screen Shot 2023-01-05 at 2.24.34 PM.png
Screen Shot 2023-01-05 at 2.24.34 PM.png1194×937 197 KB

4

In the case of the last image, it’s probably because the image is smaller than your screen height, right? try changing min-height: 100vh; to height: 100%; see If anything changes.

1 Like
5

@Ryoshin I tried changing from 100vh to 100% in the code you gave for base.css and it still wasn’t working. I think you are right about the image being smaller than the screen height causing the problem, but do you have any other ideas how to fix it? Maybe I changed the wrong line of code?

6

No, if the image is smaller than the screen there’s nothing wrong with the code. The code makes the body of the page have 100% of the screen height and positions the footer at the very bottom. If it’s not that and the image is close to the size of the screen there might be something wrong with spacing somewhere. Can you give me the URL to your store?

1 Like
7

Hello @blake1798

To provide you with the most precise solution in this case, could you please share your page URL ( with pass if your store password is enabled )?

Thank you and hope to hear from you.
Best regards,
GemPages Support Team

1 Like
8

@Ryoshin @GemPages sorry, I forgot to put the site in the post. The site is au-ther.com and password is “password123”

9

It looks fine here. Is your monitor vertical?

10

@Ryoshin No, it’s a pretty standard monitor. I think it’s a 30 inch so maybe on the larger side, but nothing out of the ordinary. The website looks fine on my 13 inch laptop, though.

11

The problem is probably the height of your screen. If the height is much bigger than the content it will have a big gap between the footer and the content, but if you change it, then the footer will be right under the content and there’ll be a huge white space underneath it like before.

I think your options are:

  • Write custom CSS that applies only to specific pages where the content is shorter than the screen’s height.

  • Leave it as it is. Most monitors won’t be that big I think

  • Choose if you prefer it to be on the very bottom or right after the content.

Maybe someone can have another opinion, but I think those are your options.

12

@Ryoshin I think the width of the image is the constraint, as the top and bottom of the image are being cropped while the left and right are fully shown. Either way, is there some way to force the image to scale to fit the entire view and automatically crop or stretch as needed?

Also, just wanted to thank you again for the help! I really appreciate it

13

You can set the min-height to 100vh of the div with this id Banner-template–17453628391723__35d413ee-08e4-4b94-8f8a-989448514045 in your CSS file.

You can also do it using the classes:

.banner.banner–content-align-center.banner–content-align-mobile-center.banner–large banner–mobile-bottom.banner–desktop-transparent {

min-height:100vh;

}

Let me know how it goes!

1 Like
14

@Ryoshin that worked, thank you!

1 Like