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
No description
49 Replies
MD
MD10mo ago
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
MD
MD10mo ago
No description
No description
No description
MD
MD10mo ago
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
clevermissfox
clevermissfox10mo ago
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 body
MD
MD10mo ago
What will those do? The details and summary for the tables are picocss builds for accordions Why does the hourly push the whole thing down?
b1mind
b1mind10mo ago
html {
height: 100%;
}

body {
height: 100%;
}

.container {
min-height: 100%;
....
html {
height: 100%;
}

body {
height: 100%;
}

.container {
min-height: 100%;
....
😉
b1mind
b1mind10mo ago
No description
b1mind
b1mind10mo ago
Yea what missfox is saying is correct and you would see if you use inspector
b1mind
b1mind10mo ago
No description
MD
MD10mo ago
I'll give it a try 🙂 what if I wanted to add a scroll bar for the hourly table?
clevermissfox
clevermissfox10mo ago
You’ll need to give that container a max-height and tell it you want the overflow to scroll
MD
MD10mo ago
interesting is there a reason for the max-height?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/styles/pico-1.5.9/css/pico.min.css">
<link rel="stylesheet" type="text/css" href="/styles/styles.css">
<title>{{.Location.Name}} Forecast</title>
</head>
<body>
<div class="container">
<section class="header">
<p class="selectedCity">{{.Location.Name}}</p>
</section>
<section class="weather">
<details>
<summary>Current</summary>
<table>
<tr>
<th>Temperature</th>
<th>Condition</th>
</tr>
<tr>
<td>{{.Current.TempF}} / {{.Current.TempC}}</td>
<td>
{{.Current.Condition.Text}} <img alt="condition" src="{{.Current.Condition.Icon}}" />
</td>
</tr>
</table>
</details>
<details class="hour">
<summary class="hourly">Hourly</summary>
<table>
<tr>
<th>Time</th>
<th>Temperature</th>
<th>Condition</th>
</tr>
{{range $forecast := .Forecast.ForecastDay}}
{{range $hourly := $forecast.Hour}}
<tr>
<td>{{$hourly.Time}}</td>
<td>{{$hourly.TempF}} / {{$hourly.TempC}}</td>
<td>{{$hourly.Condition.Text}} <img src="{{$hourly.Condition.Icon}}" alt="{{$hourly.Condition.Text}}" /></td>
</tr>
{{end}}
{{end}}
</table>
</details>
</section>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/styles/pico-1.5.9/css/pico.min.css">
<link rel="stylesheet" type="text/css" href="/styles/styles.css">
<title>{{.Location.Name}} Forecast</title>
</head>
<body>
<div class="container">
<section class="header">
<p class="selectedCity">{{.Location.Name}}</p>
</section>
<section class="weather">
<details>
<summary>Current</summary>
<table>
<tr>
<th>Temperature</th>
<th>Condition</th>
</tr>
<tr>
<td>{{.Current.TempF}} / {{.Current.TempC}}</td>
<td>
{{.Current.Condition.Text}} <img alt="condition" src="{{.Current.Condition.Icon}}" />
</td>
</tr>
</table>
</details>
<details class="hour">
<summary class="hourly">Hourly</summary>
<table>
<tr>
<th>Time</th>
<th>Temperature</th>
<th>Condition</th>
</tr>
{{range $forecast := .Forecast.ForecastDay}}
{{range $hourly := $forecast.Hour}}
<tr>
<td>{{$hourly.Time}}</td>
<td>{{$hourly.TempF}} / {{$hourly.TempC}}</td>
<td>{{$hourly.Condition.Text}} <img src="{{$hourly.Condition.Icon}}" alt="{{$hourly.Condition.Text}}" /></td>
</tr>
{{end}}
{{end}}
</table>
</details>
</section>
</div>
</body>
</html>
hour details or hourly summary or container div? my guess is .container
clevermissfox
clevermissfox10mo ago
A max-height so it can scroll Instead of just growing with the content
MD
MD10mo ago
if I want a constant scroll set a low max-height?
clevermissfox
clevermissfox10mo ago
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
MD
MD10mo ago
nah those are tables inside "accordions" the way pico css does them I wanted the hourly table to have a scroll being so big
clevermissfox
clevermissfox10mo ago
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
MD
MD10mo ago
on .hour or .hourly?
MD
MD10mo ago
No description
MD
MD10mo ago
see hourly is too big it covers near 3 full days of time I think I got it
clevermissfox
clevermissfox10mo ago
Whichever you like.
MD
MD10mo ago
No description
MD
MD10mo ago
I used a max-height of 500px then overflow-y scroll
clevermissfox
clevermissfox10mo ago
Awesome !
MD
MD10mo ago
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
b1mind
b1mind10mo ago
Small question though? why have the container scroll vs the page?
clevermissfox
clevermissfox10mo ago
Had the same question
MD
MD10mo ago
just looks way too big when scrolling down
clevermissfox
clevermissfox10mo ago
This was their answer
MD
MD10mo ago
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
clevermissfox
clevermissfox10mo ago
I think they are asking why go to the trouble of putting on container when body is one level up
b1mind
b1mind10mo ago
Ok but are you saying you are solving one issue with a solution for another?
MD
MD10mo ago
honestly idk what im doing 😄 it's css!
b1mind
b1mind10mo ago
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
MD
MD10mo ago
there wont be a demo 😄 im just glad it's over
b1mind
b1mind10mo ago
Oh you gotta put it online xD thats half the fun!
MD
MD10mo ago
I can't handle the api costs
b1mind
b1mind10mo ago
oooo gotcha 👍
MD
MD10mo ago
having 0 income idk why the table got that big though it's like the accordion setup gets massive from the table data
b1mind
b1mind10mo ago
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
MD
MD10mo ago
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
b1mind
b1mind10mo ago
Honestly this is where using Pico with limited CSS knowhow might get you in trouble.
MD
MD10mo ago
the next project will require even more work and better layouts which ill suck at
b1mind
b1mind10mo ago
Any CSS framework but kinda it too cause its just like better defaults for semantic html 😄
MD
MD10mo ago
it's gonna be a full stack
b1mind
b1mind10mo ago
aight sry to derail
MD
MD10mo ago
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 ?
b1mind
b1mind10mo ago
design is #ui-ux turning that design into something is #front-end xD
MD
MD10mo ago
thank you 🙂
Want results from more Discord servers?
Add your server