Please help me on my first project

HTML-CSS
1

dear campers,
This is my tribute page trying to redesign it but am acing some few challenges on footer section it covers some content when i set width to 100%
``

any advice or aditional feature that i should add will help
2

So my first suggestion might be to move away from using div tags for all your containers. We have other options, with HTML5, and it makes the code much more readable.

My second suggestion is to wrap everything but the footer in a tag (I used a main tag just to keep things semantic), so you end up with something like:

<body>
  <main id="main">
    <header id="title">
      <h1>...</h1>
      <p>...</p>
      <figure id="img-div">
        <img src="...">
        <figcaption id="img-caption">...</figcaption>
      </figure>
    </header>
    <section id="tribute-info">...</section>
    <blockquote>
      ...
    </blockquote>
  </main>
  <footer>
    ...
  </footer>
</body>

Now, with THAT structure, I can give the main tag bottom padding, say something like:

#main {
  /* All the styles you already have here...*/
  padding-bottom: 10vw;
}

For the sake of consistency, you may also want to do something similar with the height of the footer:

.footer {
  /* All your current  CSS are here */
  height: 8vw;
}

This will ensure that the bottom of the main falls ABOVE the top of the footer.

3

Thank you for your reply.i will try to do that

4

Does that make sense? I tend to throw too much out there in a single post, rather than smaller parts. Hope it helps.

5

yes it realy helped though i can see nothing changes in the footer even after adding the height at 8vw

6

I see you added the main wrapper, and you’ve given it a padding-bottom… but the value of it is “vw”. You’ll want to include an actual value, like 8vw or 10vw.

You shouldn’t see any dramatic changes, all you’re doing is setting the height to a value, rather than letting the browser do whatever it wants there.

7

I think that what you need is not padding, but margin-bottom that is close to height of your footer, like this for example:

#main{
  background-color: #7d8764;
  margin: 20px;
  padding-bottom: vw;
  text-align: center;
  color: white;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);
  border-radius: 5px;
  margin-bottom: 80px;
}

While padding can solve visibility of text, that would be incorrect solution because it still leaves actual container overlapping with footer.

1 Like
8

yes i forgot to add the value on padding now it looks kinda good. and for the image its responsive though i want to center it. What is the best way to do that?

9

Given that you set #img to display: block;, you can simply give it “magic margins:”

margin: 0 auto;

The first number is top/bottom margins on the image, and the second is left/right – by setting that to auto, it will center it in the parent container.

10

corrected thank you it worked

11

i did that but it still has some gaps after i added the margin bottom

12

although it looks good on mobile and my laptop screen i still dont want that gap between the main section and the footer also their margin should be the same

13

Gaps where? Also, your <blockquote></blockquote> looks wrong – you open it with a closing tag ( </blockquote></blockquote> ).

14

yes i dint notice that. Thank you for the correction. The gap am talkin about is

07%20PM
07%20PM720Ă—1280 85 KB

i think it would look better it looks this way on my opinion
07%20PM
07%20PM720Ă—1280 91.3 KB

15

So okay. You’re choosing to use fixed units (px) rather than relative units (vw or em), which is fine. But think about the logic: setting your footer to position: fixed has removed it from the normal flow of the page, so the bottom of the main is now considered the bottom of the page.

If you want them to match, make sure the margin-bottom on the main is the same as the height of the footer. So, if you use height: 50px on the footer, then use margin-bottom: 50px on the main.

16

corrected its fine now…cheers :smiley:

17

yep, looking pretty good! :wink:

18

am kinda confused with the vw vh vmin and vmax… i will go through the curriculum before starting my survey page

19

The thing about FCC is, it really depends on your ability to google. There’s a lot of information here, but not everything. You end up having to research. So a quick breakdown:

Viewport units (vw, vh, vmin and vmax) are units based on the actual displayed window. Each is a little different:

  • vw or view width units: Take the width of the displayed area, and divide it into 100 sections. 10vw would be ten of those. 10vw = 10% of window width
  • vh or view height units: Take the height of the displayed area, and divide it into 100 sections. 10vh would be ten of those. 10vw = 10% of window height
  • vmin or view minimum units: Take the first two units, vw and vh – which one is smaller? Those are now vmin units. This will render a smaller spacing, or font size or whatever you use them to represent.
  • vmax or view maximum units: Take those same first two units, and which is greater? Those are now vmax units. This will render a larger spacing, based on a wider (or taller) display.

A great article on some fun view units magic: https://css-tricks.com/fun-viewport-units/

1 Like
20

you are such a savior maan… i will try to use and implement them in my second project tomorow God willing. thanks alot :+1: