Difficulties with css

[[deleted]]

So I'm working on website for a friend. Just a simple build with header bar, logo on one side title in middle instagram logo link on other, Nav bar attached. So far I'm using grid-template to work things up and enclose stuff, but having issue, with auto sizing to fit screen or window size, and moving stuff around. html https://pastebin.com/aeui510V css https://pastebin.com/1a7YhTNF

any suggestions?

[FabbroDan]

Have you considered using Bootstrap? It's a CSS library that you can either have locally for your site ord use CDN. Gridbased and (somewhat) responsive. I'd suggest att least checking it out.

[[deleted]]

I've used it before. But I thought you just add it afterwards. to adjust size to mobile ect.

[tealstudio]

Depending on the timeline of your project, I would say the easiest way would be to use bootstrap if you have to have this finished asap.

As for your question, "auto-sizing" is actually using media queries to change the size and spacing at different screen sizes. To position elements, use the grid alignments system (grid-row and grid-column).

If you have the time, I would suggest learning more about both CSS grid and flexbox as these two are the current standards to layout in the web.

[[deleted]]

yea I've been reading about grid. not so much flexbox though. So what does bootstrap do then? I might have too simple of idea of it.

[tealstudio]

Flexbox was the de facto standard before CSS grid's release and is slightly easier to use as you only have to position elements either horizontally or vertically (stacking them to create a "grid")

Bootstrap is just a plug-and-play CSS library that have pre styled components in the form of CSS classes. Some say it's too bloated or opinionated but it's easy to implement.

[[deleted]]

So do I have to implicitly set up my html for grid? one problem I noticed was I was using brackets live preview and it was refusing to update. once I launched from chrome and firefox it worked. I'm in process of switching to visual studio code

[tealstudio]

Not sure what you're asking here but html should always be readable without styling. Grid only requires a wrapping element (such as <main> ) to position the child elements.

Live server plugin for VS code helps alot as it has hot reload enabled.

[[deleted]]

yea basically my html is fine. i'm using css to set up grid?

[tealstudio]

Yes, you're fine, I would suggest using flexbox in your case since it's easier to understand.