Need help with box arrangement :|: Lioden

Report 1
Posted by	Posted by	Need help with box arrangement
ShaydeWanderer [He/They/She] (#171201) Sapphic View Forum Posts Posted on 2024-06-06 11:35:46	Like the title says, I'm struggling to get my boxes to sit right on my den page. I have one medium box, a long box to sit next to the medium box, and below those two is supposed to be the large hover box. They only ever seem to want to all be side by side and push one another off the screen, and I can't seem to figure out how to fix that. This is what it looks like now (I have it set as two medium boxes at the moment, but the problem remains even when I change it to the long box) It should look more like this Whoever helps me figure it out first will be getting a yoh bark as thanks, cause this has been bothering me for a while and I have the feeling that if I keep trying to fix it myself I'm never gonna figure it out- (If you need to look at the code, use inspect element on my den page and go to the Source tab ^^) You have liked this post! 0 players like this post! Like?

L. Corporal Quiqi
☂️ ✈ (#371719)

View Forum Posts

Posted on
2024-09-10 20:11:19

L. Corporal Quiqi
☂️ ✈ (#371719)

View Forum Posts

Posted on
2024-09-10 20:11:19

#304446590673

hey! i can try to help but i cant guarantee anything.

0 players like this post! Like?

L. Corporal Quiqi
☂️ ✈ (#371719)

View Forum Posts

Posted on
2024-09-10 20:19:32

L. Corporal Quiqi
☂️ ✈ (#371719)

View Forum Posts

Posted on
2024-09-10 20:19:32

#304446590683

i made it as similar to the image as i could. (remove all @'s)
<@div class="boxcontainer"><@div class="smallbox"><@h2>header<@/h2>text<@/div><@div class="mediumbox"><@h2>header<@/h2>text<@/div><@/div>
<@div class="largehoverbox"><@h2>header<@/h2>text<@/div>
paste that in your den description!

you also have to change a few things within the css itself, you can just copy paste this in while replacing the og box code. i didnt change much, i swear!! if you see any issues, lmk asap ill see whati can do to fix it

/* BOXES */

.smallbox {
float: left;
background: rgba(1, 1, 1, 0.5);
color: #A69F98;
padding: 10px;
border: ridge #E8CEA7;
border-radius: 0px;
margin: 5px;
height: 250px;
width: 270.5px;
overflow: auto
}

.mediumbox {
float: left;
background: rgba(1, 1, 1, 0.5);
color: #A69F98;
padding: 10px;
border: ridge;
border-radius: 0px;
border-color:#E8CEA7;
margin: 5px;
margin-left: 20px;
height: 250px;
width: 500px;
overflow: auto
}

.largebox {
float: left;
background: rgba(1, 1, 1, 0.5);
color: #A69F98;
padding: 10px;
border: none;
border-radius: 0px;
margin: 10px;
height: 150px;
width: 90%;
overflow: auto
}

/* HOVER BOXES */

.smallhoverbox {
float: left;
background: rgba(1, 1, 1, 0.5);
color: #A69F98;
padding: 10px;
border: none;
border-radius: 0px;
margin: 10px;
height: 50px;
width: 28.4%;
overflow: auto;
transition: 3s
}

.smallhoverbox:hover {
height: 150px;
width: 28.4%;
}

.mediumhoverbox {
float: left;
background: rgba(1, 1, 1, 0.5);
color: #A69F98;
padding: 10px;
border: none;
border-radius: 0px;
margin: 10px;
height: 50px;
width: 43.8%;
overflow: auto;
transition: 3s
}

.mediumhoverbox:hover {
height: 150px;
width: 43.8%;
}

.largehoverbox {
float: left;
background: rgba(1, 1, 1, 0.5);
color: #A69F98;
padding: 10px;
border: ridge;
border-radius: 0px;
border-color:#E8CEA7;
margin: 45px;
margin-left: 25px;
height: 150px;
width: 797.5px;
overflow: auto;
transition: 3s
}

.largehoverbox:hover {
height: 300px;
width: 797.5px;
}

1 player likes this post! Like?

Edited on 10/09/24 @ 20:21:16 by L. Corporal Quiqi ☂️ ✈ (#371719)

ShaydeWanderer
[He/They/She] (#171201)

Sapphic
View Forum Posts

Posted on
2024-09-11 12:01:38

ShaydeWanderer
[He/They/She] (#171201)

Sapphic
View Forum Posts

Posted on
2024-09-11 12:01:38

#304446591487

Thank you so much! It's perfect actually, I haven't found anything out of place- ~~Honestly I'm surprised I even got a response to this at all rip~~

1 player likes this post! Like?

L. Corporal Quiqi
☂️ ✈ (#371719)

View Forum Posts