Hello! I've been working on Gandalf's profile recently from a free premade profile (credits on the page ^_^), and I'm definitely not a CSS/HTML expert so I've messed up something and I was hoping for some help ^^;
So originally, the column was in the middle of the page but it totally blocked the art, so I moved it to the left. However, this caused a second scrollbar to appear in the middle of the page because I probably moved it not in the most optimal way.
Can someone help me figure out what the issue is? Any help is appreciated <3
here is the code
<style>
/* seul @ subeta */
url('https://fonts.googleapis.com/css?family=Open+Sans');
/* Reset----------------------------------------- */
,
,
,
,
,
,
{display: none;}
/* Prototip------------------------------------- */.ui a, .ui message {font-size:11px!important; letter-spacing:-0.5px!important}
.eight.column.wide img, .eight.column.wide h3, .tpd-shift-stem-side, .tpd-stem-border, .tpd-backgrounds, div.ui.grid_div.eight.column.wide {display: none;}
/* Tooltip-------------------------------------- */.tpd-tooltip {opacity: 0.9!important;}
.tpd-content {background:
!important; width: 160px!important; height: 80px!important; position:relative!important;;
}
.tpd-tooltip { opacity:0;
transition-property: all;transition-duration: .5s;transition-timing-function: cubic-bezier(0, 1, 0.5, 1)}
.tpd-tooltip:hover {opacity:1;transition-property: all;transition-duration: .5s;transition-timing-function: cubic-bezier(0, 1, 0.5, 1);}
.tpd-loading-icon { background:
!important;}
.tpd-stem-triangle {border-left-width: 0px!important;border-right-width: 10px!important;border-top-color:
!important; border-bottom-color:
!important; border-top-width: 8px!important;bottom: auto!important;}
/* Tooltip Content------------------------------ */.eight.column.wide h3 {margin: 4px 0px!important; font-weight: inherit!important;}
.eight.column.wide {color:
; display: block!important; font: 10px/14px 'Open Sans', sans-serif!important;height: 80px!important; width: 100px!important;margin: 0!important; padding: 2px 6px;position: absolute!important; word-wrap:break-word!important;z-index: 2;}
.hover_user_pet {position: absolute!important; margin-bottom:0px!important; margin-left:97px!important; margin-top:-3px!important; padding-left:0px!important; top:0px!important; width:60px!important;}
.ui.circular.image {width: 50px!important; height: 50px!important;}
* {font-family: 'Open Sans', Calibri, sans-serif; font-weight: normal; font-size: 9px ; letter-spacing: .2px; word-spacing: .5px; color:
}
body {background-image: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/intermediary/f/18be06c1-f14f-4605-bc12-c2d334ae96d9/d5gjs4j-7ebe98a1-8990-4d20-b0f3-d6659d344892.png/v1/fill/w_1600,h_960,q_80,strp/you_shall_not_pass_by_entroz_d5gjs4j-fullview.jpg");
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover !important; }
{margin: 0; background-image: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/intermediary/f/18be06c1-f14f-4605-bc12-c2d334ae96d9/d5gjs4j-7ebe98a1-8990-4d20-b0f3-d6659d344892.png/v1/fill/w_1600,h_960,q_80,strp/you_shall_not_pass_by_entroz_d5gjs4j-fullview.jpg");
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover !important;}
{width: 45%; margin: 0; position: absolute;}
,
,
{float: none; text-align: left;}
.statbar {margin: 0; margin-top: -12px; margin-left: -210px; width: 200px;height: 5px; border-radius: 5px}
.stat {float: right;}
li {margin-left: 220px; height: 20px;}
.container-fluid {margin: 0 auto; }
html {overflow-x: hidden;}
/* column2 pets */
/*
{float: left; background-size: cover; width: 50px; height: 50px; margin: 10px; margin-top: 25px; margin-bottom: 50px; } */
{
float: left;
background-size: cover;
background-repeat: no-repeat;
width: 45px;
height: 45px;
border: 5px solid
;
margin: 10px;
margin-top: 30px;
border-radius: 50%;
margin-bottom: 50px;
box-shadow: 0 0 0 1px
;
}
,
,
{display: inline-block; margin-left: 0 !important; margin: 0 10px; height: 0;}
,
~ * {display: none;}
{min-width: 310px; width: 310px; position: relative; margin-top: 80px;}
> div {background: white; padding:0 0 10px 0; margin: 20px 0; border: 1px solid
; border-radius: 5px;width: 100%; }
> br {display: none;}
{margin: 0 auto; width: 300px; margin-top: -3px;}
h1 span {font-size: 11px;}
.pet_like {position: absolute; right: 0; top: 0; padding: 5px 10px}
.friend_div {float: none; display: inline-block; height: auto; width: 50px; margin: 0;}
.friend_div img {height: 50px;}
.treasure_item {width: 40px; padding: 5px 0 0 0; margin-left: 10px;}
h1, h2 {padding: 10px 15px; border-bottom: 1px solid
; text-transform: uppercase; letter-spacing: .7px; color:
; font-size: 8px;}
span.pet_name {color:
;}
div:nth-child(2) {margin-left: 10px;}
{margin-left: 40px !important;}
.pet_spotlight {margin: 10px;}
.statbar div.stat {height: 5px;}
img {opacity: .87;}
.desc {padding:15px 5px}
{
visibility: hidden;
position: absolute;
width: 0;
height: 0;
}
{
z-index: 2;
position: absolute;
width: 75px;
line-height: 1;
height: 75px;
border: 1px solid
;
padding: 5px 0;
background:
;
border-radius: 5px;
right: 10px;
margin-top: -20px;
/* right: -8px;
margin-top: 3px; */
display: inline-block;
}
{display: none;}
div#pet_minion img {
width: 50%;
}
{visibility: visible}
</style>
You shall not pass!
"Through fire... and water... From the lowest dungeon to the highest peak, I fought him, the Balrog of Morgoth. Until at last, I threw down my enemy and smote his ruin upon the mountainside. Darkness took me. And I strayed out of thought and time. Stars wheeled overhead and everyday was as long as a life-age of the earth. But it was not the end. I felt life in me again. I have been sent back, until my task is done.
Gandalf? Yes... that's what they used to call me. Gandalf the Grey. That was my name.
I am Gandalf the White!" - The Lord of the Rings, The Two Towers
Custom color by me :) under construction!
Profile by
Background image by: Entroz
