Hello, I am currently Working on the Tea Cozy project and have run into a couple of issues listed below. Any help is greatly appreciated!
Code:
Hi, there!
You mention that the website does not fit horizontally, but looking at it from my screen it appears to do so. If you mean by comparison to the spec sheet, take into consideration that the screenshot is from a smaller screen. A max-width of 1200px will look different on a laptop than it does on a larger desktop monitor. If there is a different problem you are having, could you go into more detail?
This problem is occurring because of the styling applied to the * selector. If we go back in our lessons, we learn that the * selector selects all elements and applied styling to them. In this case you have:
* {
font-family: 'Helvetica', sans-serif;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
text-align: center;
margin: 0;
}
And this is your locations HTML
<div id="locations">
<h2>Locations</h2>
<div id="boxes">
<div class="box">
<h3>Downtown</h3>
<p>384 West 4th St</p>
<p>Suite 108</p>
<p>Portland, Maine</p>
</div>
<div class="box">
<h3>East Bayside</h3>
<p>3433 Phisherman's Avenue</p>
<p>(Northwest Corner)</p>
<p>Portland, Maine</p>
</div>
<div class="box">
<h3>Oakdale</h3>
<p>515 Crescent Avenue</p>
<p>Second Floor</p>
<p>Portland, Maine</p>
</div>
</div>
</div>
Because of the * selector, each element is receiving the same style unless an override is applied to the element itself. In fact, the problem you are having is caused by something you already fixed on another element.
#locations h2 {
background-color: transparent;
padding-bottom: 15px;
}
Can you see where the issue is coming from?
Thank you so much for your help! I see the error I have made with problem #2 and have fixed it.
As for #1, my screen scrolls horizontally about 10px per side which mostly affects the spacing on the ends of the nav.
One more question: In github, how do I view the website? All I can see is the code.
Ah, okay. I did see the horizontal scrollbar, but was not sure if that was what you were referring to.
So, let’s look at your nav.
Most, if not all block-level elements will automatically have a width of 100%. This changes when certain styles are applied (though we do not need to talk about that as of now because it’s not relevant) I just want you to know that even without the width 100%, the nav will stretch across the screen. As shown in this screenshot after removing width 100%:
Now, let us go back to the lesson on the box model. We know that padding is used to create space between the element and its border and that margin creates space between different elements. You currently have a right and left margin of 10px on your nav which is creating 10px of space outside your to the left and right. So, when you see this:
You think to put the width 100%, but that is what is creating the overflow. Instead, give padding a try.
Now, to see the page on GitHub, you will need to launch a GitHub Page. To do so, from your project repository, go to settings → pages
I would suggest using deploy from branch. Then in branch, it should have something like main and root.
Then you would just save and wait for GitHub pages to create the build.
Thank you so much for your help!
