Product Landing Page layout issue/ stuck with CSS

Curriculum Help Certification Projects
#1

Tell us what’s happening:

I have tried to align the items with different approaches but i can seem to figure out the way. at the start i wanted to put the subscribe before the footer but it didn’t work and now even with it same as the landing page, i still cannot get the design right. Pleaaaaaase help

Your code so far

https://codepen.io/ottowoolf/pen/qBEYodr

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.117 Safari/537.36.

Challenge: Build a Product Landing Page

Link to the challenge:
https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page

#2

  1. You forgot to put the subscribe section inside the container. You also have to push down the section using margin or padding top. Otherwise, it will be behind the header. When you add position: fixed to an element it is taken out of normal document flow and will not push the content below it, you have to do that manually.

  2. Line 33: You didn’t close the icon div in the first grid div.

  3. Line 42: You closed the grid too early.

#3

You need to add margin to the section element contains id="subscribe" i.e.

#subscribe{
     margin-top:150px; 
}

you can add margin more than 150px or less than 150px as your requirement.
Hope you find this helpful.

#4

Thanks a lot!! That was very helpful :slight_smile: