Make image fill entire row, put email field in footer

Hello, hope everyone has been enjoying their holidays.

I have been working on this Product Landing Page project for over a week now. I can pass all the User Stories at this point (I started over to focus on making it look good before I complete the user stories), so now my concern is just making it look more presentable and aesthetically pleasing.

To that end, I need help with two things. First, and most importantly, I need the images in the slideshow to completely fill (preferably without distorting the images) the row I have, just under the header. Right now they don’t completely fill it, and I have looked online for hours (and I do mean hours) trying to find a solution.

Also, one of the images, Slide 2, seems to have something weird going on where it doesn’t show up for some reason.

On a secondary note, it would be nice if someone could help me fit an email input field in the center of the footer. I’d like the second and third footer elements to stay where they are, and the email to be centered in the first footer element. This is another issue I have already spent a lot of time trying to resolve on my own, to no avail.

I have the code written up and ready to go here:


What Email Address Can We Contact You At?

<input type=“email” id=“email” class=“form-control” placeholder=""required>/

There are other things I am struggling with but I am trying to only ask for help when I’ve absolutely exhausted my other resources.

I hope someone could help me with these two things. I’ve spent a lot of time on this project, so it would be nice to be able to finally put it behind me (haha) so I can move on with the others.

Here’s my codepen:

I’ll owe a huge debt of gratitude to anyone that can help me out with this. I’m very motivated to learn as much as I can but I just simply need someone to explain to me how you go about fixing these issues.


P.S. For some reason the entire snippet of code related to the email input won’t show up in the actual post. Am I doing something wrong?

Hi, i used different image for slide 2 and its working.
even on my browser your old image is working as well.
for image fill entire row, u could use width:100% to image container and max-width:100% to img. i dont know this helps or not but two of your images are very small

and give equal fr to footer child div ,i mean 1 fr to all div inside footer
then on email div give margin 0 auto to center within email div and u have to re arrange the order as well. hope this helps

I did those two things and the image hasn’t changed.

As far as footer goes, if I make all columns 1 fr, that moves the two other footers out of the position I want them in (near the far right) so that doesn’t work for me either.