Footer code confusion – HTML & CSS – SitePoint

Npressfetimg 12138.png

ok

for my footer, please

please see

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

see the content shifted to the left

You closed the section container after the footer instead of before it. That means the footer is a flex-item and only as wide as its content. Put the footer element in the correct place.

i am trying

my apologies if this was the key! couldnt get it

i tried PaulOB’s advice and removed a <div>

same problem

so sorry, but i am lost

i kindly ask some one to provide the correct code that will work, as have done for me before, please leave a comment so i can learn and follow

please let me know where my problem is and how to fix it

i have tweaked and took some time away, no go

i honestly dont see any difference between https://forallthetime.com/DEMO/index.html

and

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

i have validated the HTML, 2 errors i couldnt follow, could this be my issue?

i have validated the CSS… a whole bunch of

undefined

seriously, I thank you!


PaulOB

January 23, 2023, 8:34am
#2

Just open the devtools window in chrome and look at the html. The error sticks out like a sore thumb.

You have this html structure.


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

Source: https://news.google.com/__i/rss/rd/articles/CBMiQ2h0dHBzOi8vd3d3LnNpdGVwb2ludC5jb20vY29tbXVuaXR5L3QvZm9vdGVyLWNvZGUtY29uZnVzaW9uLzQwNjM2Ny_SAQA?oc=5

Leave a comment

Your email address will not be published. Required fields are marked *