Kevin Powell - Community•11mo ago

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

MDOP•11mo 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

MDOP•11mo 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•11mo 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

MDOP•11mo 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•11mo ago

html {
  height: 100%;
}

body {
  height: 100%;
}

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

html {
  height: 100%;
}

body {
  height: 100%;
}

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

😉

b1mind•11mo ago

Yea what missfox is saying is correct and you would see if you use inspector

b1mind•11mo ago

MDOP•11mo ago

I'll give it a try 🙂 what if I wanted to add a scroll bar for the hourly table?

clevermissfox•11mo ago

You’ll need to give that container a max-height and tell it you want the overflow to scroll

MDOP•11mo 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•11mo ago

A max-height so it can scroll Instead of just growing with the content

MDOP•11mo ago

if I want a constant scroll set a low max-height?

clevermissfox•11mo 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

MDOP•11mo 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•11mo 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

MDOP•11mo ago

on .hour or .hourly?

MDOP•11mo ago

see hourly is too big it covers near 3 full days of time I think I got it

clevermissfox•11mo ago

Whichever you like.

MDOP•11mo ago

I used a max-height of 500px then overflow-y scroll

clevermissfox•11mo ago

Awesome !

MDOP•11mo 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•11mo ago

Small question though? why have the container scroll vs the page?

clevermissfox•11mo ago

Had the same question

MDOP•11mo ago

just looks way too big when scrolling down

clevermissfox•11mo ago

This was their answer

MDOP•11mo 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•11mo ago

I think they are asking why go to the trouble of putting on container when body is one level up

b1mind•11mo ago

Ok but are you saying you are solving one issue with a solution for another?

MDOP•11mo ago

honestly idk what im doing 😄 it's css!

b1mind•11mo 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

MDOP•11mo ago

there wont be a demo 😄 im just glad it's over

b1mind•11mo ago

Oh you gotta put it online xD thats half the fun!

MDOP•11mo ago

I can't handle the api costs

b1mind•11mo ago

oooo gotcha 👍

MDOP•11mo 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•11mo 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

MDOP•11mo 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•11mo ago

Honestly this is where using Pico with limited CSS knowhow might get you in trouble.

MDOP•11mo ago

the next project will require even more work and better layouts which ill suck at

b1mind•11mo ago

Any CSS framework but kinda it too cause its just like better defaults for semantic html 😄

MDOP•11mo ago

it's gonna be a full stack

b1mind•11mo ago

aight sry to derail

MDOP•11mo 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•11mo ago

design is #ui-ux turning that design into something is #front-end xD

MDOP•11mo ago

thank you 🙂

Gaming

Programming

Getting content more centered layout