Getting content more centered layout
im trying to get this layout more centered with some gap between city text and the tables of weather data (pico css styled tables). My goal is some space between the two tables and the city text to be more separated and pronounced to the user. below is a screenshot of the current resulting layout and code. Please let me know what I can do to improve things to reach the goal. I'm terrible at css and can't seem to figure out and my goal is more backend
49 Replies
here's a pen I was able to make below. the content is api generated so it will be missing in the pen.
https://codepen.io/MD-2016/pen/rNRwLJq
so update
I changed the layout a bit but when I get the hourly table filled with data it changes
as you can see from the images, the hourly pushes the whole thing further down the screen
when activated
any tips on how to prevent that
code is updated in the pen
even more weird stuff happening
Your body min-height :100% isn’t doing anything because there is no height set on its parent the html element. So it looks centered because the body is only as tall as the content within it then when you add more it gets taller.
If you put
body{outline:3px solid red}
you’ll see the space your body is taking up. To make the body the full viewport , put both min-height: 100svh; min-height:100vh;
on the bodyWhat will those do?
The details and summary for the tables are picocss builds for accordions
Why does the hourly push the whole thing down?
😉
Yea what missfox is saying is correct and you would see if you use inspector
I'll give it a try 🙂
what if I wanted to add a scroll bar for the hourly table?
You’ll need to give that container a max-height and tell it you want the overflow to scroll
interesting is there a reason for the max-height?
hour details or hourly summary or container div?
my guess is
.container
A max-height so it can scroll
Instead of just growing with the content
if I want a constant scroll set a low max-height?
If you want a div* that has a scroll you set the max-height or height that is smaller than the content inside . If you’re putting it on .container though I’m not sure why you wouldn’t just go one level up and let the content grow long enough to let the body get scrollbars. I was thinking you had some div inside with a table where you just wanted the table data to scroll . Like your .weather class
Your container has all your content in it anyway so that feels kind of unnecessary to me
nah those are tables inside "accordions" the way pico css does them
I wanted the hourly table to have a scroll being so big
Okay , it’s just hard to tell from this how much content you have so yeah just throw a height and overflow y scroll and you’ll be in biz
on
.hour
or .hourly
?see hourly is too big
it covers near 3 full days of time
I think I got it
Whichever you like.
I used a
max-height
of 500px then overflow-y
scrollAwesome !
yes it looks like crap but I think I need to just avoid CSS and Design stuff at all costs lol im not good with picking colors and layouts and getting them to work right
seems like im only good at logins and databases
Small question though? why have the container scroll vs the page?
Had the same question
just looks way too big when scrolling down
This was their answer
hourly when expanded because of the table inside the "accordion", the table expands big then takes up the whole screen because the api hours are about 3 days worth of weather data hour by hour
I think they are asking why go to the trouble of putting on container when body is one level up
Ok but are you saying you are solving one issue with a solution for another?
honestly idk what im doing 😄
it's css!
because you don't (imo) want the width change/shift in the details/summary
so it should be the container width and never change when you click it. Then have the page scroll? I mean I could get if you want the both accordians to always be on the screen or something 😄 I was just curious
idk maybe your demo works different
there wont be a demo 😄
im just glad it's over
Oh you gotta put it online xD
thats half the fun!
I can't handle the api costs
oooo gotcha 👍
having 0 income
idk why the table got that big though
it's like the accordion setup gets massive from the table data
Also good work 👍 this is the most complete project I've seen out of you. 🥲
Now make a some API endpoints for a project mr BE ;D
I actually had to remove some grid code otherwise the hourly pulls the two accordions down creating that weird gap between the label and the tables
Honestly this is where using Pico with limited CSS knowhow might get you in trouble.
the next project will require even more work and better layouts
which ill suck at
Any CSS framework but kinda it too cause its just like better defaults for semantic html 😄
it's gonna be a full stack
aight sry to derail
i might make a post on what stuff can help me with design and layout and colors and such and most of the css stuff so I can focus on the functionality, BE, and some FE
would that be a #ui-ux post or still #front-end ?
design is #ui-ux
turning that design into something is #front-end xD
thank you 🙂