« Web, HTML, Tech Forum

why did the card do that ? /genq

on my profile (image below) it did a weird thing, it's supposed to be in the center covering the profile. i'm not sure why it broke like that




how it's supposed to look (-ish, i had to scroll to get it so it might be a bit off):





code for error spotting if u can (sorry for the bleed):


<!-- (c) Layout created by boykisser's bf (https://layouts.spacehey.com/layout?id=80769) -->

<div id="profile">

<ul>

<center>
<h1>Before You Enter !! / ¡¡ Antes de entrar !!</h1>

<img src="https://external-media.spacehey.net/media/sieQuEs7gDzparPUdVx6yXkQJP3hWD02ns03Hvs7wWQ8=/https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/520b7775-4dd5-4c5b-a546-15dd41dcfc59/dgf70t7-5a542af8-26c7-48bc-9f8d-d3826de46ab8.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzUyMGI3Nzc1LTRkZDUtNGM1Yi1hNTQ2LTE1ZGQ0MWRjZmM1OVwvZGdmNzB0Ny01YTU0MmFmOC0yNmM3LTQ4YmMtOWY4ZC1kMzgyNmRlNDZhYjguZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.-b7Ge0nddXKphaQ_ITt4b-t4SC6R2fQASx1Zn6UX-_Y"/>




<br/><br/><br/>I'm a minor, DNI is in my blogs. Spanish and English / Soy menor de edad, el DNI está en mis blogs. español e inglés<br/>




<a href="#profile"> Enter / Ingresar</a>
<br/><a href="https://spacehey.com/home">Go Back To The Homepage / Volver a la página de inicio</a>
<br/><br/><br/>

<center><img src="https://autumn.revolt.chat/attachments/JkSD8u9CzLzrA738S9r2fxqbWPrVyJHX-ve1ARWL07"/>
<br/>




</center></center></ul></div>


<style>

:root {
  --warning-background-image: white;
  --warning-text-color: ff95df;
}

#profile {
 position: fixed;
 background-image: url('');
 background-color: #ff95df;
 z-index: 100;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100vh;
 padding: 50px 100px;
 font-size: 150%;
 overflow-y: scroll;
 opacity: 1;
 transition: .2s;
}

#profile > * {
 width: 100%;
 max-width: 700px!important;
 margin: 20px auto;
 display: block;
}

#profile:target {
 opacity: 0;
 visibility: hidden;
}

#profile > ul {
 padding: 10px 50px;
 border: 5px double #ff95df;
 border-radius: 20px;
 Background-color: white;
}
</style>


Report Topic

5 Replies

Sort Replies:

Reply by suki

posted
updated


a bit of a hack but you can fix it with transform:



#profile {
transform: translate(-44.4%, -19%);
}


those values should work on your layout but tweak as needed - first percentage is horizontal, second is vertical.




you can also make the min-height of #profile about 105vh so there isn't white space showing on top when it bobs up and down

disregard this!


Permalink Report Reply

Reply by b0nezdecay.sys

posted

thank you !! @suki


Permalink Report Reply

Reply by b0nezdecay.sys

posted

also is there any way to make it where you can't scroll to the right ? sorry for asking 4 so much


Permalink Report Reply

Reply by suki

posted
updated

don't be sorry for asking!

so while testing I somehow didn't catch that my "solution" doesn't scale well at all. after some digging around I think I found the actual problem - the CSS animation that makes everything bob up and down.

somehow just removing that makes everything work fine. why that is though, I have no idea at all. sorry this isn't much of a solution but I can't figure out how to make them work with each other.


Permalink Report Reply

Reply by b0nezdecay.sys

posted

it's alright; thank you sm !!!


Permalink Report Reply