Portfolio Page Body Color And About Link

HTML-CSS
1

So, I’ve been working on my portfolio page. I’m having trouble understanding why my welcome section doesn’t take up full section. If I want a color on all of that section, I have to set a color on the body. Why is this? I saw this when testing mobile view in Google Chrome to inspect the page and set page width to 320px. Trying for a mobile-first approach. Also, when I click the about link, it doesn’t take it all the way to the top of the about section like I thought it would. Any help guys? Below is my codepen for reference.

2

your <main id="welcome-section"> is a child of a <div class="page-container">
the parent page-container has these values in css

.page-container {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
}

which effect its children. changing the width should do the trick. :+1:

oh btw I like your diligence in adding <head> </head> to your html, but codepen got you cover you don’t need it in your code.

3

So doing that does fix it taking up whole width. However, there is a small gap between navbar and page-container. How do I fix that? Also, I thought I could overwrite the parent element? I wanted the full page to have that default page container css, but able to override it with my own. So full page would have that width of 80%, max-width of 1200px, and margin is 0 auto. Then child elements be able to override that when neccessary.

4

About the small gap between nav and page-container, it’s margin in h1.
adding your your h1 to

body,
html,
h1{
    margin: 0;
    padding: 0;
}

should fix it.

here is a link about devtools this is how I found out about the margins: Learn How to Use the Chrome DevTools to Troubleshoot Websites

I thought I could overwrite the parent element? I wanted the full page to have that default page container css, but able to override it with my own. So full page would have that width of 80%, max-width of 1200px, and margin is 0 auto. Then child elements be able to override that when neccessary.

this is hard for me to understand, it’s more issue that I couldn’t picture what you mean. but if you have a plan stick to it and if you get stuck again you can ask for help again. i will be tracking this topic

5

Ok I think I’ve gotten this to a good point. Let me know what you think of my final solution so far.

1 Like
6

looks good. :+1:
I would add comments for your future self, about the features you wanted to add, and resources that helped you; so when you move the code to editor, at least you don’t have do research again. :pushpin:

about style I would change Text shadow color value to be the same as font color, because it’s slightly hard on the eyes, and reduce the hover transform scale effect to something small, a subtle movement is all you need.

7

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