18 Nov 2015, 12:26 PM
Zen Follower
- Join Date:
- Mar 2013
- Location:
- Sydney, Australia
- Posts:
- 140
- Plugin Contributions:
- 0
Right Menu Buttons get cut off on smaller screen
Hi All,
I have edited the centre column via the admin/tools/define_main_page.php
It looks how I want it on a desktop screen, however when I look at it on a mobile the button seems to get cut off.
This is what it looks like on PC:
This is what it looks like on a mobile:
The link to the site is http://www.kinectwebdesign.com/ingleburncashexchange/index.php?main_page=
My code is:
<div id="defineDiv">
<div id="defineMainLeft">
Welcome to our licensed, independent, privately owned Pawnbroker and Second-hand Dealership since 1998.
We buy, sell and loan on anything that is portable and of value.<br />
Offering a variety of payment options including cash, debit cards, Visa, MasterCard, in-store lay-bys, option of paying via Pay Pal when buying online.<br />
<strong>Need Cash Fast? Use your assets as collateral!</strong><br />
Bad credit history is not an issue.
Proof of income or employment not required.
No background checks.
No credit checks.
</div>
<div id="defineMainRight">
<div class="services_block">
<a href="javascript:void(0);" class="service_item" alt="" data-animated="bounceIn">
<div class="icon_block icon1"></div>
<h4>Unique Design</h4>
</a>
<a href="javascript:void(0);" class="service_item" alt="" data-animated="bounceIn">
<div class="icon_block icon2"></div>
<h4>Responsive Layout</h4>
</a>
<a href="javascript:void(0);" class="service_item" alt="" data-animated="bounceIn">
<div class="icon_block icon3"></div>
<h4>Dedicated Support</h4>
</a>
<a href="javascript:void(0);" class="service_item" alt="" data-animated="bounceIn">
<div class="icon_block icon4"></div>
<h4>Brand & Identity</h4>
</a>
</div>
</div>
</div>
CSS is this:
#defineDiv{width:100%;
background-color:#109876;}
#defineMainLeft {
float: left;
width:59%;
/* margin-left:10px;*/
}
#defineMainRight {
overflow:hidden;
min-height:170px;
margin-top:10px;
width:39%;
}
@media screen and (max-width: 400px) {
#defineMainLeft {
float: none;
margin-right:0;
width:auto;
border:0;
}
}
/*-----------------------------------------------------------------------------------*/
/* SERVICES
/*-----------------------------------------------------------------------------------*/
.service_item {
overflow:hidden;
position:relative;
display: block;
margin-bottom:10px;
padding:30px 0 30px 125px;
background-color:#4fb4e7;
}
.service_item:hover {background-color:#ffaa31;}
.service_item .icon_block {
position:absolute;
left:0;
top:0;
display:block;
width:100px;
height:100px;
margin:-10px 0;
background-repeat:no-repeat;
-webkit-transition: all 600ms linear;
-moz-transition: all 600ms linear;
-o-transition: all 600ms linear;
-ms-transition: all 600ms linear;
transition: all 600ms linear;
}
.service_item .icon_block.icon1 {background-image:url(../images/icons/icon1.png);}
.service_item .icon_block.icon2 {background-image:url(../images/icons/icon2.png);}
.service_item .icon_block.icon3 {background-image:url(../images/icons/icon3.png);}
.service_item .icon_block.icon4 {background-image:url(../images/icons/icon4.png);}
.service_item:hover .icon_block{
-webkit-animation: moveFromBottom 300ms ease;
-moz-animation: moveFromBottom 300ms ease;
-ms-animation: moveFromBottom 300ms ease;
}
.service_item h4 {
margin:0;
color:#fff;
}
@-webkit-keyframes moveFromBottom {
from { -webkit-transform: translateY(100%) scale(2);}
to {-webkit-transform: translateY(0%) scale(1);}
}
@-moz-keyframes moveFromBottom {
from {-moz-transform: translateY(100%) scale(2);}
to {-moz-transform: translateY(0%) scale(1);}
}
@-ms-keyframes moveFromBottom {
from {-ms-transform: translateY(100%) scale(2);}
to {-ms-transform: translateY(0%) scale(1);}
}
