[OUTDATED] ★ Tetra's CSS Guide ★

@KatyaWolf

body /* The HTML body of the page. Great place to put a background/font rule. */ {

    background: url('https://i.imgur.com/V7rCaIL.jpg');

    background-size: cover!important;

}

Add this highlighted line, and the background image should fit the width of the viewport.

@Tetra;

Thanks so much for the help! I managed to fix the issue (still not sure what caused it tbh) but I am 100% going to have to re-write my code so that it's a more streamline and less jumbled. I somehow managed to have the Nav tabs for Den/Profile twice and got them confused with the den/crossroads so they were also huge text too lol 

I will definitely be trying that red border hack, thank you! Should help me figure out what I have duplicate codes of 🤦‍♀️

I do have one other question though; 

The floating den boxes I have on my profile are a real pain on mobile, but I'm not entirely sure how to code them to not float when on mobile?

@Kaliyana

Glad you could fix it!

So to write different styles between desktop and mobile view, you'd need to use the @media rule. It's a tad complex to explain here, so I'd suggest reading up on it through that link. But in basics, you open a single block where you write even more blocks in, and those block's styles are only activated if the viewport fits the 'media rule' (which would dictate the max or minimum viewport width) of the main block.

You can use the @media rule to make your boxes float only when the screen is wide enough, and to fit inline on the page only when the screen is narrow enough. For example, your desktop vs mobile configuration may resemble this:

.boxleft {

   /* styling/positioning for all screen views */

}

@media only screen and (min-width: 992px) {

   .boxleft {

      /* styling/positioning for DESKTOP view */

   }

}

@media only screen and (max-width:991px) {

   .boxleft {

      /* styling/positioning for MOBILE view */

   }

}

@Tetra

That fixed it! Thank you!

Ohmygod that fixed it, thanks so much! <3

i'm sure this is a VERY stupid question, but like what would be the process be if you literally just want to customize your page to have a different background? i used the template you provided and just edited the background section but nothing happened. does every section have to have a piece of code in it for it to work?

(hopefully this makes sense! i am not very good at explaining myself haha)

@gayfeatherstar

It would work fine if you simply edited the background section and left everything else alone! The rest of the template being left empty should have no effect; blank blocks do not break the code.

You mentioned it didn't work - mind sharing your code? Some unrelated error might have gotten in the way.

cdn.discordapp.com

i'm pretty sure the only thing i changed was the background code bit but i've never done much css so its super possible i messed with something or saved the css file incorrectly. i really appreciate the help!

@gayfeatherstar

This is oddly nitpicky, but the error in your code happened to be extra spaces between the phrases. This should be the functional code:

body {

background:url(https://static.wolvden.com/images/backgrounds/grassland_USA_Maryland_CalvertCliffs.png) fixed;

background-size: cover!important;

}

yup that was it! thank you so much! ^^

edit- ahh nvm, it works perfectly in stylus but when i actually copy the full code and save as a .css and put it on the den page(with the proper linking code, it doesn't update ;;