Right Menu Buttons get cut off on smaller screen

[Annie_zaz]

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/ingle...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);}
}

[picaflor-azul]

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/ingle...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);}
}

Normally, on a mobile phone screen you will want to remove any floats on divs and set the widths at 100%. You should also remove the overflow:hidden; on your #defineMainRight


Thanks,

Anne

[Annie_zaz]

I'll give it a try, thanks. I'm actually using your Responsive sheffield blue template :)

[Annie_zaz]

Normally, on a mobile phone screen you will want to remove any floats on divs and set the widths at 100%. You should also remove the overflow:hidden; on your #defineMainRight


Thanks,

Anne

I took all the floats off and gave the divs 100% and this is what I get. Looks good on a mobile but looks like this on pc.


How can I get each div to have 50% each of the #defineDiv and site side by side without float?
If I give #defineMainLeft and #defineMainLeft a width of 49% each they seem to be the right size but then sit underneath each other I would like them side by side.
This is my changed css below.
Thanks

#defineDiv{width:100%;
	    background-color:#109876;}
#defineMainLeft {
    
    width:100%;
    margin-left:10px;	
    }

#defineMainRight {
  min-height:170px;
  margin-top:10px;
  width:100%;
    }
@media screen and (max-width: 400px) {
   #defineMainLeft { 
    width:100%
    margin-right:0;
    width:auto;
    border:0;  
  }
}

[Annie_zaz]

Is anyone able to help out on this please?

[Annie_zaz]

I found the solution to my problem here: http://www.webdesignerdepot.com/2014...ut-css-floats/

I hope this helps someone else.