I’ve recently completed all of the required items for the product landing page, but it looks really bad. Can anyone give me any direction on how to move the product list to the top of the page and separate the video and company logo? Everything over laps. I’ve put my link below.
Let’s take the problem one at a time. Let’s start with fixing the logo. What you can do is to divide the header inSeeto two sections.
- For the logo
- For the navigation links
Make the header a flex box.
You can give the logo a width of about 20 percent of the header and the tag that contains the links a width of about 80percent of the view port.
You can make the container that contains the navigation links a display of flex and justify it’s content as space evenly.
As per keeping the header at the top of the view port give it a position of fixed and sets it’s top and left to 0px that will keep it at the very top.
You will notice that this makes the next element overlap it. You can give the next element adjust it’s margin top to fix the issue.
My project
If you have any issues after let me hear it
Thank you! It was a big help.
Another option is to create a class in the css. You can place each section in it’s own <div> and give each div it’s own css class:
<div class="class_name">content goes here </div>
Then you can position it, color it, control it’s size and layer position with z-index so they don’t intrude on each other (unless you have their positioning overlapped) - everything by setting element properties for those classes.
Example CSS:
/* place a 20px high header at the top of the page with a green background and black text */
.header {
height: 20px;
width: 100%;
background-color: green;
color: black;
position: absolute;
z-index: 0; /* can also use auto. auto or zero as value = bottom layer. */
}
/* the navigation menu */
.nav {
width: 300px;
position: absolute;
top: 20px;
left: 0px;
z-index: 1;
}
/* the main section of the page. */
.main-section {
position: relative;
top: 20px;
left: 300px;
z-index: 2;
}
No problem, I would also advice that you keep revisiting the project whenever you learn something new and try to add them to it.
When you earn a certificate on free code camp. They always include the links to the projects you worked on and honestly you don’t want a potential employer in the future to take a look at your projects and see an unprofessional site.
I showed a senior friend my certificate after i earned it and that was the advice he gave me.
I guess that’s another way of doing it.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.