How to prevent div overlapping into other div on mobile device?

Question

The recent searches section on this page: http://8f0e7bb5189c42ab98b040051e3d2c65.cloudapp.net/

works fine on a pc but overlaps onto the footer when viewed with an iphone 6. How can I prevent this?

Answer 1

I see you are using media queries to float the recent search div right on full screen and left on mobile.

If you just remove the float on mobile screens that should sort your issue

Answer 2

Remove float left from that section:

@import only screen and (max-device-width: 1024px) and (orientation: portrait), only screen and (max-width: 1024px) and (orientation: portrait)
.home-page .recent-search {
    width: 100%;
    /* float: left; */
    clear: both; /* you don't need this either */
}

Answer 3

You're currently using float's on your recent searches. This is fine, but you should clear it on the end. This can be done adding the class on the main div of the "recent searches":

css:

.clearfix:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
 }

Now your div should be:

<section class="s-content home-page clearfix">

Floating makes your divs "float" on the page. The browser doesn't know when the div stops as they're floating. This means that it can happen that another div starts inside your "floating" section.

Using the "clearfix" you let the browser know where the div stops. This makes it clear where to start the div below. There are other ways to fix it but not in your current layout. Here is a nice post with information about what a clearfix is.

Answer 4

Here is the solution- For mobile devices do this-

@media (max-width:767px){.recent-search{ height:auto;}}