Hello. I am working on the capstone project and am having difficulty with there being extra horizontal space out side of the border of my page. i would like for the page to fit to screen. Can anyone please point me in the direction of what I need to adjust. A clue…
here is the page
https://vernonsyncere.github.io/Capstone_Project/
If there’s anything that I’m missing, please let me know.
Thank you for your help,
Vernon
Has to do with the width of your div with class learning-words. 75% is too wide making it go over the screen width and causing overflow.
Btw I noticed there is only one element with class learning-words, a class implies there are multiple elements that require the same styling. If there is only one instance, use and id tag instead.
Are you sure this is true ? I have learned to only use classes unless i am for certain a element can only be used once.
Also a class does not implie that there are multiple elements with that styling. It only implies that there could be multiple elements with that styling.
Changing something to id because it is only used once at “that” moment is risky cause later you might need to change it back. Gets even worse when there is also javascript attached to the id.
Beside’s other developers that work with your product can’t use that styling since it would be an id and not a class.
Thank you for the help. It worked!
you mentioned that I was only using one element under the class learning-words. Are you saying that since I only used that way of styling once throughout the styling page that I should use an ID vs class instead?
Well there seem to be different opinions on the matter, read @biirra’s post above.
Whether you use a class or an id tag doesn’t really matter since the result is the same. However with a class you can style multiple elements and with an id tag only 1.
Therefore I personally use id tags for those items where I need to specifically style it. And I use classes if I know a certain styling will be applied to multiple elements. But that’s my personal taste and ‘style’ I guess. BTW That doesn’t mean you can’t use both on a single element.
That makes sense. I see a logic in the way you described it. I have two other question regarding this project.
In my heading section the cyan boxes do no reach the top of the page. Why is that?
and on the practice section my border is not extending all the way down. Again why is that?
This is because your body has a set default margin. If you want to maintain the white space left and right of your grey border but want the top to be flush with the screen give your body a margin-top of 0.
Your border is not running all the way down due to your h1 text in the start-container. It has a default margin-top. Once again give that particular element a margin-top of 0 and you are good to go.
Thank you for offering you insight. I appreciate the different perspective.
Thank you. That makes sense now. I was trying margin-top in all the other elements and boxes but didn’t think to do those. Happy to know I wasn’t too far off. Thanks again
Are you familiar with the inspector? When viewing the page in pretty much any browser you can do right-click -> inspect element, which opens the inspector. You can scroll through each element and see the margins and padding visualized on screen.
I used it a bit but I’m seeing now to it’s truest potential