Footer Design Issues

My footer has a few issues.

  1. When I publisher, the image background leaves the design and im left with just a solid blue. I have used a blue overlay over a black image to create a blue textiled image. Not sure why the image is disappearing?

  2. I have recently learned how to make content respond to changing screen size, but can’t figure out how to design the content inside my footer to respond correctly? Does anyone have any footer design tips for it to respond correctly?

Link to my site is below:

Thanks!

Here is my site Read-Only:
https://preview.webflow.com/preview/website-recreate?preview=2eec30ad9a4e841f5c095b1d24c30820

I’m by no means an expert, but one thing I can tell you from experience is that you have to be careful using set heights. You have your footer height set at 35VH, but the content spills because it takes up more space.

I honestly don’t use set heights much because of this issue. A work around is to let the contents of that “box” define the height, and use padding as needed. In other words, create a section called “footer”. Inside that put your divs with associated content (see my note on flexbox below). Define sizes of those as needed. Use padding/margin to add space above your text content. You can then adjust the flexbox to vertical in mobile view so you don’t try to squeeze all that text onto one horizontal line, so to speak.

I don’t see the issue with the background- it looks OK to me.

I noticed you use a lot of percentages to have your content in certain arrangements. Have you tried flexbox? They have great tutorials on it, and once you get the hang of it, it’s very useful.

Does that help?

Hi, sorry to jump in.

But there’s a simple way to solve the layer structure. I’ll do a short video, then post it here and you can follow the steps to fix the issue… give me a min…

You can see there are some style inherited from the “Paragraph 6” that I didn’t want to mess with, but you get the gist on how to structure for responsiveness. Here ya go:

https://www.screencast.com/t/bjkxSuK1YLS

1 Like

This has been insanely informative and is has shown me how over my head I am in regards to responsive design…

As I have been designing I haven’t even been checking the other views as I thought it would all carry over (no design background) and I must admit I am now completely overwhelmed by how terrible my design is in all other views…

Do you have any other advice or tutorial anywhere on how I can fix this on other views? I was supposed to launch this website on Friday and I am lost.

Thank you so much for this information however. Very very much appreciated!

Oh no don’t feel that way, we’ve all started at the same point :hugs:

Honestly, the only method is to do what you’re doing - dive in head first and start building.

1st:
I suggest you literally take the University tutorials, and watch them all in a row. Don’t watch one, then stop, and start up again later. The information doesn’t hit as well. I recommend in this specific order. If you get it all in consecutively, it’ll work better. If you can’t, watch the first two, then grab the second two links.

2nd:
Remember, there will always be tweaks and adjustments needed when moving from desktop to tablet, and mobile. Nothing is going to be exact when it comes to responsiveness. Remember, the more “blue styles” (the settings you apply) on desktop; the more complicated it is for the browser to render on smaller devices. Minimizing the work for a browser on desktop, makes it easier for it to render for each break point. That being said, try to set as few “Individual” css settings on desktop. Your other views will be easy to manage.

Hope this helps. And you can message me on my profile anytime if you need further assistance. Have Fun!