Google-Homepage Project Woes


#1

Hello! Thanks for stopping and reading in advance :sweat_smile:

It’s taken me about four days with the small snippets of time I’ve had to get this far with my google-homepage project. I’ve at last figured out how to correctly float my nav section on the top of the page to the left and right. I’ve even centered everything! I’m pretty proud of my very humble project so far, hahaha.

I’m learning slowly, but I have a few specific questions. I cannot figure out how to get the content or elements to take up the full width of the browser and auto adjust like the true google-homepage. I’m not too worried about the padding and positioning of everything below the image. I’m still working on that.

I’ve attempted adjusting the width of a, li, ul and played around with their margins. I just can’t quite figure out what element is correct to modify and how to make it work. This is the latest code that I have, I’ve pushed it to GitHub for convenience.

Thank you kindly,


#2

It might help to place some of your elements inside div tags and position/modify the divs in addition to the individual elements. They act as containers, so whatever’s done to them (e.g. fixing their position or altering their dimensions) has an indirect effect on whatever’s inside them.


#3

Hey @Cosmic_Noir

What you are referring to is responsive design whereby changing the page size adjusts the contents. It’s covered later in the course so I’d advise you move on for now and cross that bridge when you come to it.


#4

Thank for your help!

@DensenKG, I did attempt a different build using div tags but I think that was before I realized how to float the elements. I will retry with that structure. I went back to li tags because I found a successful example using it, but I wasn’t able to emulate it. Thanks so much for taking a look :grin:

@CouchofTomato thank you for taking a look. I will not bang my head on it too much longer then haha. I’m excited to learn moooore. Lol. Thanks for letting me know!


#5

No problem,

With regards to your query about the elements taking up the full width of the browser I notice in your css you have width: 50% set on the body element so that is why it’s not taking up the whole screen.

As I mentioned before the auto-adjust thing will be better to learn later. There are loads of techniques that can make it happen. Some newer css features like grid and flexbox are responsive on their own, as is using percentage width or heights or ones based on the view height or width. There really are so many ways now but it would be far too overwhelming to cover so early on as they are more advanced features of css. It’ll be more exciting to move on anyway and learn some more cool stuff.


#6

:sob::sob::sob:Yessss!!! Thank you!!! Funny. Such a simple thing to miss while trying to make it work.

@CouchofTomato Thanks agian!!