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&.......