Product Landing Page - Build a Product Landing Page

HTML-CSS
1

hello good day. my .info section keeps overlapping on my header section cause the position is fixed. what can I do to rectify it?? thanks.

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

#header-img {
  width: 30%
}

#nav-bar {
  display: flex;
  float: right;
}

#nav-bar a {
  text-decoration: none;
  margin-left: 30px;
  color: black;
  margin-right: 30px;
}

header {
  margin-bottom: 30px;
  position: fixed;
  top: 0;
  min-height: 75px;
}

.info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

form {
  display: grid;
  margin-top: 20px;
  row-gap: 15px;
  margin-bottom: 50px;
}

form #email {
  border: 1px solid ash;
  height: 25px;
  background-color: #fff;
  width: 250px;
}

form #submit {
  background-color: #f1c40f;
  height: 28px;
  width: 120px;
  margin: auto;
  font-weight: bold;
  font-size: 15px;
  border: 2px solid white;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.1 Safari/605.1.15

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

can you share a codepen with all your code so we can see what you are talking about?

3
4

one option is to set the background-color of the header to white like in this example:

5

yeah but it just covers the text and input element. and making the ’ .info’ section position relative or absolute either takes it back to square one or completely alters the positioning.

can it be solved with js??

6

Why don’t you move these elements down?

7

with empty DIVs?

won’t that affect responsiveness?

8

Every layout question has multiple answers. For eg. If you are trying to keep it responsive then use relative units or a media query. (Or both).

9

yeah yeah. not good with media query(more I like know what it does but don’t know to how formulate code with it). but I have added margin-top to the .info section and it moved it down while maintaining responsiveness. thanks.

10

take a look at the codepen I sent earlier. I just added a main element, then set its margin-top value and that moved everything down.

You can find examples of media queries for different devices online.

11

thanks. any corrections or best used practices for the whole code?

12

if you would like feedback of this type, please open a new topic under the Project Feedback sub-forum.

13

OK. how do I do that? can’t find the option.

14

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.