Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Why these divs are overlapping on mobiles?

Kaworu

Kaworu

Active Coder
Hi! I have a problem with mobile version of a website I am working on currently. It’s my first post here, I hope I did everything right… :)

On a big screen, I have two columns next to each other and a copyright note in footer below them. The normal version has nothing to change.

Big-screen-website-ok.png

When I make my browser to look like a smartphone screen, then I encounter errors. I wanted for my website to be show in a column - the first column, then second below it, then footer with copyrights at the very bottom of the page.

What I have currently is… a little chaos, I believe. The left column is shown on top of the right column before the right column ends and the footer with copyrights seems to be in middle of the page as well instead of the bottom. As result, all the three divs are shown on top of each other.

mobile-screen-website-ouch.png​

Below is the code of both HTML and CSS, so you can reproduce the website.

[CODE lang="html" title="HTML"]<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>Mobile divs are overlapping</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="style.css">

</head>

<body>
<div class="container">
<div id="main-part" class="divs-equal">
<div class="div-padding">
<h1>Header 1-1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>
</div>

<div id="additional-part" class="divs-equal">
<div class="div-padding">
<h1>Header 2-1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>


<h1>Header 2-2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>
</div>

</div>

<div class="break">

</div>

<div class="copyrights">
<p>Copyright information</p>
<p>Copyright information</p>
<p>Copyright information</p>
</div>
</body>

</html>[/CODE]

[CODE lang="css" title="CSS"].copyrights
{
border-top-style: solid;
border-top-width: 3px;
text-align: center;
font-weight: bold;
font-style: italic;
width: 100%;

}

.container
{
display: table;
border-collapse: separate;
}

.divs-equal
{
display: table-cell;
}

.div-padding
{
padding-left: 10px;
padding-right: 10px;
}

#main-part
{
width: 55vw;
border-right-style: solid;
border-right-width: 3px;
height: 100vh;
}

#additional-part
{
width: 45vw;
height: 100vh;
}

footer
{
flex: 0 0 300px;
}

.break
{
width: 100%;
bottom: 0px;

}

/*
* *****************************************
* !!! MOBILE BELOW !!!
* *****************************************
* */

@media only screen and (max-width: 800px)
{
.container
{
display: flex;
flex-direction: column;
}

#main-part
{
width: 100vw;
border-right-style: none;
}

#additional-part
{
width: 100vw;
}

.copyrights
{
position: absolute;
bottom: 0px;
width: 100%;
}
} [/CODE]

In fact, I am kind lost. I could understand that something’s wrong with the both columns, even though flex direction: column should not work like that. But as to why the footer suddenly ends somewhere in the middle of mobile website, I am totally perplexed. I tried to define the footer with copyrights for mobile version too, but it seems it is not working at all.

I would be grateful if someone would tell me how to change the website to behave the way I tried to implement.
 
Sort by date Sort by votes
In your main part CSS code in the mobile section, try setting your .container and .divs-equal to display: block;. I suspect something funky is going on with the table cell behavior once you reach a point where the content won't fit the container anymore.
 
Upvote 0 Downvote
Kawou said:
Ah! :-D It's working now :-D Thank you :-D
Click to expand...
Oh right on! That solution above is something to always remember, for good and bad times. Whenever something is overlapping like this, think of the 'absolute' value for position, and look for any non-dynamic heights, widths, positions like top, left, right, or bottom, and also look for certain types of display styles like 'fixed'. These are all things that will make a site non responsive for mobile.

Using flex, column sizes, and other responsive CSS through media queries is a great way to make sure your site loads properly. I even go as far as sometimes having completely different views for mobile, depending on how complex the computer views are. Often it is easy to use 1 view and acommodate each screen resolution or device type by hiding elements as needed, and automatically allowing things to flow vertically rather than horizontally.
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

DataCamp Advertisement
Code Academy Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom