Single post in A Somewhat Extensive Guide to BBCodes
Forum Index > PokéFarm > Guides > A Somewhat Extensive Guide to BBCodes >
I'm working on a few different templates, and this is one of them. It looks good on PC and stuff, but on mobile the text is higher than I want it to :/
No matter what I do it just stays above the white box?
So yeah does anyone know how I can get the text lower without making it too low on pc?
mobile pic
pc pic
code
[css=background:url('https://img06.deviantart.net/6747/i/2012/345/f/1/white_and_baby_pink_dot_texture_by_gran22-d5nr0mg.jpg'); background-repeat:repeat; background-size: cover; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; padding: 2% 0px 5px 0px;][font=candara][
][styleclass=vaporeontext][/styleclass][styleclass=clouds][/styleclass][styleclass=vaporeonsprite][/styleclass][styleclass=vaporeonsprite2][/styleclass][br][br][br][styleclass=main]
[styleclass=tabbed_interface horizontal][
][ul][
][li]Tab 1[/li][
][li]Tab 1[/li][
][li]Tab 1[/li][
][li]Tab 1[/li][
][/ul][
][styleclass=tab-active]Hello this is some text!
[b]bold[/b]
[i]italic[/i]
[u]underline[/u]
[url=https://pokefarm.com/]link[/url][/styleclass][
][styleclass=tab][table][
][tr][th=2x1]Table[/th][th=2x1]Cool[/th][/tr][
][tr][td=2x1]Nice[/td][td=2x1][tip=Fennekin][pkmn=fennekin][/tip][/td][/tr][/table][/styleclass][
][styleclass=tab][hide=Hidebox]Look at this boi:
[tip=Fennekin][pkmn=fennekin][/tip][/hide][/styleclass][
][styleclass=tab]Template by [url=https://pokefarm.com/user/Birdo]Birdo[/url].
Pics: [url=https://pldh.net/dex/sprites/vaporeon]x[/url] [url=https://pixabay.com/sv/moln-sky-bl%C3%A5-cumulus-white-34027/]x[/url]
Background: [url=http://gran22.deviantart.com/art/White-and-baby-pink-dot-texture-342222568]x[/url]
Font: [url=http://www.dafont.com/sweet-november.font]x[/url][/styleclass][styleclass=tab][/styleclass][/styleclass]
[/styleclass][
][styleclass=credit]Template by [url=https://pokefarm.com/user/Birdo]Birdo[/url][/styleclass][
][style]
.main {
color:#000;
position: relative;
z-index: 5;
height: relative;
margin-left: 7%;
margin-bottom: 10px;
width: 85%;
text-align: center;
background-color: #fff;
border: 2px solid #621041;
box-shadow: 0px 5px 20px #621041;
border-top-left-radius: 30px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 30px;
}
.vaporeontext{
top: 15px;
z-index: 7;
width: 31%;
height: 120px;
background: url('https://pokefarm.com/upload/Birdo/vaporeon.png');
background-size: 100%;
position: absolute;
background-repeat: no-repeat;
position: absolute;
left: 0;
right:0;
margin: auto;
}
.vaporeonsprite{
top:25px;
z-index: 6;
width: 8.3%;
height: 20%;
position: absolute;
background: url('https://pldh.net/media/pokemon/gen5/blackwhite_animated_shiny/134.gif');
background-size: 100%;
background-repeat: no-repeat;
left: 60%;
right:0;
margin: auto;
}
.vaporeonsprite2{
top: 25px;
z-index: 6;
left: 20%;
width: 13.3%;
height: 20%;
position: absolute;
background: url('https://pokefarm.com/upload/Birdo/vap.png');
background-size: 100%;
background-repeat: no-repeat;
left: 0;
right: 60%;
margin: auto;
}
.clouds{
top: 4px;
z-index: 1;
width: 98.7%;
height: 100%;
position: absolute;
background: url('https://pokefarm.com/upload/Birdo/cloud2.png');
background-size: 100%;
background-repeat: no-repeat;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.tabbed_interface{
z-index: 10;
margin: 0;
position: static;
>ul {
margin-top: 4%;
margin-left: 5%;
width: 90%;
background: none;
//For the tabs//
>li {
z-index: 10;
color: black;
font-size: 13px;
width: 10%;
height: 16px;
cursor: pointer;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
text-align: center;
position: relative;
padding: 3px;
line-height: 16px;
background: #ffbdff;
border: 2px solid #621041;
margin: 5px;
border-top-left-radius: 15px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 15px;
&.tab-active {
color: white;
background: #621041; -webkit-transition: all 0.4s ease-in-out;
border: 2px solid #ffbdff;
>li:hover {
text-shadow: 1px 1px 10px #ffbdff; -webkit-transition: all 0.3s ease-in-out;}
}
}
}
}
li:hover {
text-shadow: 1px 1px 10px #621041; -webkit-transition: all 0.3s ease-in-out;
}
//For the text from the buttons//
.tab,.tab-active{
z-index: 7;
color: black;
font-size: 14px;
text-align: center;
width: 100%;
min-height: 16px;
box-shadow: none;
background: none;
border: 1px solid transparent;
}
li.tab-active{
top: initial;
font-size: initial;
}
//Link colors//
a {
color: #9c0b62;
}
a:hover {
color: #ffbdff; -webkit-transition: all 0.3s ease-in-out;
}
.tooltip_content {
background-color: #ffbdff;
color: black;
text-align: center;
min-width: 60px;
border:1px solid black;
margin: 0px 30px 10px 50%;
}
.credit {
z-index: 9;
position: relative;
text-align: center;
color: #000;
font-size: 11px;
text-shadow: 1px 1px 10px white;
}
//Table things//
Table {
margin: 0 auto;
border: 1px solid black;
}
th {
background-color: #621041;
color: white;
border:1px solid black;
}
td {
background-color: #ffbdff;
color: black;
border:1px solid black;
}
//Hidebox things//
.panel {
box-shadow: none;
border: 1px solid black;
margin: 0px 10%;
&>h3 {
text-align: center;
&>a {
background: #621041;
color: white;
}
}
&>div {
border-top: 1px solid black;
color: black;
background: #ffbdff;
}
}
[/style]
[/font][/css]
