Footer code confusion – HTML & CSS – SitePoint Boards

okay

for my footer, please

please see

https://forallthetime.com/DEMO/visit_drp2.html

see the content material shifted to the left

i’m attempting

my apologies if this was the important thing! couldnt get it

i attempted PaulOB’s recommendation and eliminated a <div>

identical drawback

so sorry, however i’m misplaced

i kindly ask some one to supply the right code that can work, as have completed for me earlier than, please go away a remark so i can study and observe

please let me know the place my drawback is and how you can repair it

i’ve tweaked and took a while away, no go

i actually dont see any distinction between https://forallthetime.com/DEMO/index.html

and

https://forallthetime.com/DEMO/visit_drp2.html

i’ve validated the HTML, 2 errors i couldnt observe, may this be my problem?

i’ve validated the CSS… a complete bunch of

undefined

significantly, I thanks!

Simply open the devtools window in chrome and take a look at the html. The error stands out like a sore thumb.

You have got this html construction.

<part class="flex-container">
  <part class="flex-item">
    <img src="https://through.placeholder.com/500x350" alt="">
    <div class="caption">
      <h1>Merchandise 1</h1>
      <p>Lorem ipsum dolor sit amet, consecetur adipiscing elit. Cras pharetra metus vitae pellentesque.</p>
    </div>
  </part>
  <part class="flex-item">
    <img src="https://through.placeholder.com/500x350" alt="">
    <div class="caption">
      <h1>Merchandise 2</h1>
      <p>Lorem ipsum dolor sit amet, consecetur adipiscing elit. Cras pharetra metus vitae pellentesque.</p>
    </div>
  </part>
  <part class="flex-item">
    <img src="https://through.placeholder.com/500x350" alt="">
    <div class="caption">
      <h1>Merchandise 3</h1>
      <p>Lorem ipsum dolor sit amet, consecetur adipiscing elit. Cras pharetra metus vitae pellentesque.</p>
    </div>
  </part>
  <part class="flex-item">
    <img src="https://through.placeholder.com/500x350" alt="">
    <h1>Merchandise 4</h1>
    <p>Lorem ipsum dolor sit amet, consecetur adipiscing elit. Cras pharetra metus vitae pellentesque.</p>
  </part>
  <part class="flex-item">
    <img src="https://through.placeholder.com/500x350" alt="">
    <div class="caption">
      <h1>Merchandise 5</h1>
      <p>Lorem ipsum dolor sit amet, consecetur adipiscing elit. Cras pharetra metus vitae pellentesque.</p>
    </div>
  </part>
  <part class="flex-item">
    <img src="https://through.placeholder.com/500x350" alt="">
    <div class="caption">
      <h1>Merchandise 6</h1>
      <p>Lorem ipsum dolor sit amet, consecetur adipiscing elit. Cras pharetra metus vitae pellentesque.</p>
    </div>
  </part>

  <!-- structure ends-->
  <footer>
    <div class="grid-container">
      <div class="item1">
        PO Field 7531<br>
        Any City USA<br>
        ZIP 1357
      </div>
      <div class="item2">252 555 7531</div>

      <div class="item4">
        <a href="#"><img src="ICONS/black_(17).png" alt="media"></a>
        <a href="#"><img src="ICONS/black_(20).png" alt="media"></a>
        <a href="#"><img src="ICONS/black_(14).png" alt="media"></a>
        <a href="#"><img src="ICONS/black_(23).png" alt="media"></a>
        <a href="#"><img src="ICONS/black_(12).png" alt="media"></a>
        <a href="#"><img src="ICONS/black_(83).png" alt="media"></a>
        <a href="#"><img src="ICONS/black_(19).png" alt="media"></a>
      </div>
    </div>
  </footer>
</part>

Discover the final closing part tag after the footer closes.

It shouldn’t be there. It must be shut earlier than the footer begins.

e.g.

<p>Lorem ipsum dolor sit amet, consecetur adipiscing elit. Cras pharetra metus vitae pellentesque.</p>
    </div>
  </part>
</part><!-- it's moved to right here -->
<!-- structure ends-->
<footer>
  <div class="grid-container">
    <div class="item1">
      PO Field 7531<br>
      Any City USA<br>
      ZIP 1357
    </div>
    <div class="item2">252 555 7531</div>

    <div class="item4">
      <a href="#"><img src="ICONS/black_(17).png" alt="media"></a>
      <a href="#"><img src="ICONS/black_(20).png" alt="media"></a>
      <a href="#"><img src="ICONS/black_(14).png" alt="media"></a>
      <a href="#"><img src="ICONS/black_(23).png" alt="media"></a>
      <a href="#"><img src="ICONS/black_(12).png" alt="media"></a>
      <a href="#"><img src="ICONS/black_(83).png" alt="media"></a>
      <a href="#"><img src="ICONS/black_(19).png" alt="media"></a>
    </div>
  </div>
</footer>

it really works!

thanks!

the total footer is now there, however content material is off to the left and there’s a border round my media icons…

sure i’ve tried

i attempted copying and pasting from https://forallthetime.com/DEMO/index.html CSS

your complete footer… caught

Paul, please know i’m grateful! for serving to me and never making me really feel
silly

On that web page you’ve gotten arrange a rule for all pictures (a giant mistake) and it’s that rule that interferes with the picture in your footer.

You have got this rule:

img {
    width: 50%;
    float: left;
}

You’ll now need to negate the principles for the picture in your footer like this:

.grid-container .item4 img {
    width: 45px;
    peak: auto;
    margin: 2rem;
    border: none;
    float: none;
}

You have to be cautious along with your world guidelines as that defines all cases of that component and isn’t what you need. Both add a easy class (the simplest technique) to the component or fashion it with a descendant selector that targets its present context solely as within the footer.

many thanks

i feel i caught the issue

i set the img on line 309

thats the one img i discovered, i regarded greater than as soon as

may this be my rule for all pictures?

anyhow, i deleted

img {
show: block;
border: 0;
width: 100%;
peak: auto;
}

and didn’t use your

.grid-container .item4 img {
    width: 45px;
    peak: auto;
    margin: 2rem;
    border: none;
    float: none;
}

and the footer is the place i would like it precisely

your $0.02 please

i do know i preserve saying this to you… and that i dont need to sound irratating… however i thanks