@pikapikamart
Posted
Good work on this one. Though there are some suggestions.
- There seems to be an unwanted scrollbar at the body, upon checking your css, it looks like the
widthdeclaration in your body tag is the one causing it. Instead of usingwidth: 100vwusewidth: 100%or you could just omit the width property. - Adding a
gapin yourmaintag, so that if a user resizes it, there will be space between the hero and the header text beside it. Maybe just agap: 0 1remis enough or tweak into your preference, after all it is just a suggestion. - Removing the
position: absolutein the footer tag will make it not float, since right now, it is located in the middle of screen which we do not want right. Removing it will be awesome.
Beside those, great work, your layout seems resizes well^^
@Kakamotobi
Posted
Thanks for your feedback!
-
I'm working on a macbook pro, chrome browser but I don't appear to have any unwanted scrollbar. But since I want the best experience for every user and device, I'll go ahead and apply your feedback! **Quick Question: If I could just omit the width property, in what situations would I need to use it?
-
I haven't used gap before. Thanks for letting me know.
-
I set position: absolute and bottom: 0 in the footer tag to stick it to the bottom of the page. It works fine on my laptop and phone. I'm not sure why it appears to float in the middle of your screen. Do you have any insight on this?
P.S. Sorry for bombarding you with questions^^ It seems a difficult and strenuous task to deliver a consistent web page experience for all devices and browsers.
@pikapikamart
Posted
@Kakamotobi Hey, regarding your queries
-
Well, of course to limit sizes right. Or to make something, especially child of parent selector to take some width of the parent if you make the width's unit relative to parent or to the viewport.
-
Your welcome, gap is very helpful you will know :>
-
Well, the reason is that is the
positionabsolute first. Since when declared in absolute, it goes out of flow, and wills stick depending on what parent container have theposition: relative. But I can see right now that you removed theposition: absolutewhich is good. Because we typically not add that, especially if the component that we want to absolute, is an important part of the markup or the structure of our website.
Don't worry if you ask many questions hahaha feel free to drop those okay^
@Kakamotobi
Posted
@pikamart
Thanks for the help!
- Say, for example I have a web page with not much content on the main portion. I don't want my footer to crawl up the empty space and be in the middle of the body. I want it to remain at the bottom of the page. How do I do this without using position: absolute and bottom: 0?
@pikapikamart
Posted
@Kakamotobi Well for this one, I suggest that you just add a margin-top to the footer, so that it will be pushed down the bottom. But there are also other ways and it depends on the build of your structure really^^
@Kakamotobi
Posted
@pikamart
Thanks a lot!
