Gini gan ane lagi ada permasalahan wakaka maklum newbie gan
ane buat button diukuran layar kurang lebih 1300px an .saat ane kecilin layar monitor eh buttonnya gak responsive
malah buttoonnya nyasar kmna2
...
ane udah coba pake rumus @media ttp gakada hasil mohon suhu bantuannya...
Spoiler for html :
<div id="get-lavu-new__banner">
<img src="images/Home Page.jpg" alt="Restaurant iPad POS" id="home-banner__bg">
<div class="banner-content">
<div class="wrapper grid" style="height:100%;">
<div class="col-3" id="home-banner__aligner">
</div>
<div id="banner-content-container" class="center col-6">
<a href="/live-demo" class="rounded-button" style="background-color:#99cc00;">
<strong>TRY IT NOW! <span class="icon-terminal"></span></strong>
</a>
</div>
</div>
</div>
</div>
Spoiler for css suhu :
.rounded-button, .rounded-button-phone {
background-color: #AECD37;
border-radius: 30px;
display: inline-block;
font-size: 20px;
font-weight: bold;
margin: 0;
color: white;
text-transform: uppercase;
text-decoration: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
vertical-align: middle;
border: none;
font-family: 'din', Arial, Helvetica, sans-serif !important;
}
.rounded-button {
line-height: 2.5em;
padding: 0 1em;
float:right;
margin-right:295px;
}
#get-lavu-new__banner{
position:relative;
overflow:hidden !important;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
-webkit-border-box:border-box;
-moz-border-box:border-box;
max-height: -webkit-calc(100vh - 70px);
max-height: calc(100vh - 70px);
}
#home-banner__bg{
min-height:241px !important;
min-width:391px;
}
.banner-content{
color:white;
white-space:nowrap;
overflow-y:hidden;
text-shadow:0 0 1px black;
position:inherit;
top:-265px;
left:0;
forbidden1;
width:100%;
height:100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
-webkit-border-box:border-box;
-moz-border-box:border-box;
}
#banner-content-title{
font-size:1.75em;
letter-spacing:2px;
text-align:center;
margin:0;
}
#banner-content-l1{
text-transform:uppercase;
margin:0 0 5px;
font-size:14px;
}
#banner-content-l3{
text-transform:uppercase;
margin:8px 0 0 0;
font-size:13px;
}
#banner-content-title2{
margin:0.25em 0 0 0;
font-size:38px;
font-weight:normal;
letter-spacing:2px;
text-align:center;
text-transform:uppercase;
}
#banner-content-subtitle{
text-transform:uppercase;
font-size:10px;
margin-top:0;
}
#banner-content-container{
-webkit-align-self:center;
-ms-flex-item-align:center;
align-self:center;
}
#banner-content-container #banner-signup{
position:relative;
top:0;
left:0;
margin-top:1em;
padding-top:1px;
padding-bottom:2em;
}
#banner-content-container input{
font-size:16px;
}
#banner-content-l2{
margin:0 auto;
padding:0;
border:none;
border-bottom:1px solid #AECD37;
max-width:75%;
}
#banner-container-l5{
margin:10px 0 0 0;
font-size:17px;
text-transform:uppercase;
font-weight:bold;
}
#banner-container-arrow {
-ms-transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
transform:rotate(-90deg);
vertical-align:top;
}
Spoiler for ilustrasi suhu :
semoga suhu2 dapat membantu