my microblog looks fine to me but on other screens its a little ah, it leaves a white bottom section and its bugging me. i tried to put heigh:100vh; on main but that fucks it up, not sure on what to do?
do i do media queries? its the only thing i can think of but someone once told me you cannot add anything in a media query without it affecting it all, u can only change already written commands like height:100px; to height:200px;
anyways im shit at explaining ehhh, this is the page → microblog
Hi, @catra. I had a look at your stylesheet and while I’m not seeing the white on the bottom unless I try to scroll past the end of the page, I wonder if the problem might not be with your CSS linear gradient background. You’re applying it to the main element instead of to body, but body is the part of your web page that gets displayed. If there’s something after main inside body, the background won’t be applied to it.
Also, you might be trying to micromanage your layout by your use of Flexbox everywhere. I also noticed that you seem to be using grid-row and grid-column in selectors that don’t have a parent set for display: grid. Instead, you’re mainly using Flexbox. That might be causing some of your problems, too.
Also, it looks like you’re using rem units to set the font size in your headers and paragraphs without setting the font size of your root element.
Adding the following should make your rem sizing work as intended, because <html> is the root element of every web page. Setting that element’s font size to “medium” means it will use the browser’s default font size, and honor the user’s settings if they’ve changed it to something other than 16px.
html {
font-size: medium;
}
However, you’re also using pixel sizing for headers and paragraphs, and the way CSS works is that if you have two rules for the same selector the second one takes precedence. Here’s an example:
p {
font-size: 1.2rem;
}
p {
font-size: 16px;
}
You’re setting the font-size for the paragraph (<p>) element twice, and the second setting is an absolute size in pixels, so the font size is stuck at 16px no matter what you do with the root element’s font size or what relative size you use earlier in the stylesheet.
Worse still, you’re using rem units, em units, and pixels to size various elements in your stylesheet. My advice to you is to pick a unit and use it consistently. Use rem, em, or px, but don’t mix them.
PS: You’re welcome to take a look at my stylesheet and see if there’s anything in there you can use. I’ve put a fair amount of work into my site’s typography because my site is extremely text-heavy and I want it to be readable. Some of the stuff I did for font stacks and font sizing might work for you, too. If you have further questions, feel free to ask them in this thread. I’ll answer them if I can, time and knowledge permitting.
Hello again, @catra. I don’t know if this will help you, but I used Firefox’s developer tools to tinker with your stylesheet and clean it up a bit. Among other things I removed the vendor prefixes since you’re using them for stuff that’s been fully supported for a while now. I also made font sizing consistent and removed uses of grid-row and grid-column outside display: grid.
html {
font-size: medium;
}
body {
font-family:helvetica;
color:black;
margin: 0;
padding: 0;
width:100%;
cursor: url('https://64.media.tumblr.com/de272014b0750450ed000541b4f6d1e6/7cf915f60095705b-14/s75x75_c1/8cdf6ba329cf80d438099bbd2b76c02f43914fe8.gifv'), auto;
background: linear-gradient(135deg, #aac877 0%, #aac877 5%,transparent 5%, transparent 10%, #aac877 10%, #aac877 15%,transparent 15%,transparent 20%, #aac877 20%, #aac877 25%,transparent 25%,transparent 30%, #aac877 30%, #aac877 35%,transparent 35%,transparent 40%, #aac877 40%, #aac877 45%,transparent 45%,transparent 50%, #aac877 50%, #aac877 55%,transparent 55%,transparent 60%, #aac877 60%, #aac877 65%,transparent 65%,transparent 70%, #aac877 70%, #aac877 75%,transparent 70%,transparent 80%, #aac877 80%, #aac877 85%,transparent 85%,transparent 90%, #aac877 90%, #aac877 95%,transparent 95%);
background-size: 2rem 2rem;
background-color: #aab352;
opacity: 1;
}
.wrapper{
display: flex;
flex-flow: row wrap;
}
#front{
display:flex;
flex-direction:column;
min-height:3rem;
gap: 2rem;
}
.dashboard {
padding-bottom:2rem;
justify-content: space-evenly;
flex: 1;
margin-left:30px;
margin-right:30px;
outline: black 1px solid;
background-color:#abb368;
}
.pagecontent {
flex-direction: row;
flex-wrap: wrap;
gap: 2rem;
}
h1,h3 {
color:black;
font-size: 5rem;
text-align:center;
font-family: 'Dzodong', sans-serif;
}
p {
color: black;
opacity: 1;
line-height: 3;
font-size: 1.5rem;
white-space: wrap;
}
.gifs{
line-height:1;
margin-top:3rem;
}
.container,
.p2{
color: black;
font-size: 1rem;
line-height:1.8;
}
.container{
display:flex;
outline: black 1px solid;
flex-direction:column;
}
p{
color: black;
font-size: 18px;
opacity: 1;
font-size:16px;
white-space: wrap;
padding-left:10px;
outline: black 1px solid;
line-height:2rem;
}
.p2 {
padding-left:10px;
padding-right:10px;
line-height:3rem;
color: white;
font-size: 18px;
}
.button{
width: 88px;
font-size: 1rem;
background-color: black;
color: black;
height: 21px;
margin-bottom: 10px;
}
.img{
margin: 1rem auto;
text-align:center;
}
.link{
align-items: center;
list-style: none;
font-family: helvetica;
line-height: 2rem;
font-size: 1.2rem;
padding: 0px 15px 0px 15px;
}
#scroll-container {
border: 1px solid black;
border-radius: 2px;
overflow: hidden;
height:29px;
display:flex;
flex-direction:row;
box-shadow: 0px 0px 10px 3px #000;
position: fixed;
}
#scroll-text {
text-align: right;
/* animation properties */
transform: translateX(-100%);
animation: my-animation 15s linear infinite;
}
@keyframes my-animation {
from {
transform: translateX(-100%);
}
to {
transform: translateX(100%);
}
}
This:
main {
height: 100vh;
}
worked fine for me on your site, what issue were you seeing when you tried it ?
oh godddd… im laughing sm, my css is actually ridiculous. i knew there was some stuff i had forgotten to delete from previous versions but i didnt know it was this messy, geeeee. anyways, thanks fr i never knew the rem thing, or that mixing shit together was bad. but it does make sense. i dont really get the rem thing fully yet but its fine honestly, i’ll just use px for now until i feel energy to make it better than that. OH. also, i neeeeeeeever knew backgrounds had to go on body??? everything background is on main, super helpful - thanks!
it worked for other screens but on my own screen size it didnt work
oh thank u sm??? just saw this after correcting my css welp
Ah, do you have a smaller screen height than the height of your page? In that case setting the height explicitly would cause issues, you’d want min-height: 100vh instead, I should have suggested that from the beginning.
It’s OK. You’ve got to start somewhere, and I had to learn all of this too. I’m just further along than you are, but nowhere near mastery. If you want to see a serious CSS guru, take a look at the stuff @frills is doing on her website. I haven’t gotten around to using CSS Grid on my site yet; just a bit of Flexbox here and there.
Maybe I can help you understand rem units better. My understanding is that rem is a multiplier based on the root element’s font size. If you had set font-size on the html element to 16px, but set the font-size on h1 to 5rem, you’re effectively setting the font size to be five times that of the html element’s font size, so h1 would be sized at 80px.
Also, backgrounds don’t have to go on body. You can apply backgrounds to just about any element. However, the solution to your particular problem was to apply the background to the outermost container. In the case of main, that would be body or even html.
If you take a look at my stylesheet you’ll see that I’m applying a background color to body by default, but for desktops and laptops (using a @media only screen and (pointer: fine) media query) I also apply a background to the html element. I also apply backgrounds to other elements as well, like callout boxes for notes and content warnings.
aaaahhh ok ok i get rem now yeah, makes sense. idk what i thought it did, i just saw it places and used it lol but i understand now ;) THANKS AGAIN!!!
I’m glad I could help. If you’ll pardon the unsolicited advice, I’d suggest reading through Mozilla’s CSS tutorial if you can spare a few hours.
You don’t have to memorize it; MDN is searchable, so if you don’t know what a particular HTML element or CSS rule does you can look it up.
Don’t feel bad about looking stuff up online, either. I’ve been in this trade over twenty-five years and I still look things up. Sites like MDN are to us what grimoires are to magicians. ⛦
moved this to the Help forum and marked @starbreaker’s solution as Solution!
just FYI: there’s no need for a [SOLVED] tag - you have the ability to mark a reply to your thread as a Solution, which will also give that member credit for being helpful and solving the problem :) then it is given a solved icon in the topics, and the solution reply is highlighted.