htmlcssresponsive-designcss-multicolumn-layout
CSS multicolumn layout overlaps in mobile view
I have used a 12 column format. (refer the web view image) there are two divs marked in yellow and red each has a width of 50% each.
I have coded it in such a way that when the device width has reduced the width of each divs will be set to 100% so that the content in each of the div sections are placed one below the other when viewed from a mobile or any device with lesser width. But as seen in the screenshot of the mobile view(1 & 2) that is not the case. the second div has moved out of the screen.
I have not used any bootstrap. My HTML and CSS codes are as follows
/********DEFAULTS*******/
nav,header,footer
{
display:block;
}
body
{
line-height: 1;
margin :0;
}
/********NAV BAR*******/
nav
{
width:100%;
margin:0;
}
nav ul
{
background-color: #eee;
overflow: hidden;
margin:0;
padding:0;
}
ul.topnav li
{
list-style: none;
float : left;
margin:0;
padding:0;
}
ul.topnav li.topnav-right
{
float : right;
}
ul.topnav li a
{
display : block;
text-decoration : none;
min-height:16px;
text-align:centre;
padding:14px;
text-transform: uppercase;
color:#665;
}
ul.topnav li a:hover
{
background-color: #0000ff;
color:#fff;
}
ul.topnav li.dropdownicon
{
display: none;
}
.container
{
width : 100%;
margins: auto;
padding-top: 4%;
padding-bottom: 4%;
background:
}
/********custom style*******/
#section-1-gradient
{
background:#076DFF;
background-image: -webkit-linear-gradient(#076DFF, #65A5FF);
background-image: -o-linear-gradient(#076DFF, #65A5FF);
background-image: -moz-linear-gradient(#076DFF, #65A5FF);
background-image: linear-gradient(#076DFF, #65A5FF);
}
h1.large
{
color:#fff;
font-size: 56px;
margin:0;
line-height: 70px;
}
div.leftside-col
{
margin-left:30%;
}
div.rightside-col
{
margin-left:15%;
}
input[type="text"]
{
font-size: 20px;
width:400px;
min-width: 100px;
padding:5px;
}
input[type="password"] /* added by shamil*/
{
font-size: 20px;
width:400px;
min-width: 100px;
padding:5px;
}
form h2
{
color:white;
}
.row
{
width:100%;
display:flex;
flex:wrap;
align-items:center;
}
.row::after
{
display:table;
clear: both;
content:"";
}
.col-1{width:8.33%;}
.col-2{width:16.66%;}
.col-3{width:25%;}
.col-4{width:33.33%;}
.col-5{width:41.66%;}
.col-6{width:50%;}
.col-7{width:58.33%;}
.col-8{width:66.66%;}
.col-9{width:75%;}
.col-10{width:83.33%;}
.col-11{width:91.66%;}
.col-12{width:100%;}
/********MOBILE*******/
@media screen and (max-width : 680px)
{
ul.topnav li:not(:nth-child(1))
{
display: none;
}
ul.topnav li.dropdownicon
{
display:block;
float: right;
}
ul.topnav.responsive li.dropdownicon{
position: absolute;
top:0;
right:0;
}
ul.topnav.responsive{
position: relative;
}
ul.topnav.responsive li{
display:inline;
float : none;
}
ul.topnav.responsive li a
{
display: block;
text-align: left;
text-transform: uppercase;
}
.col-6
{
width:100%;
margin:0;
}
div.rightside-col,
div.leftside-col
{
width:15%;
}
}<! DOCTYPE html>
<html>
<head>
<title>
Anime Shop
</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul class="topnav" id="dropdownClick">
<li><a href="#Home">Home</a></li>
<li><a href="#News">News</a></li>
<li><a href="#Contact">Contact</a></li>
<li><a href="#About">About</a></li>
<li class="topnav-right"><a href="#Signup">Sign up</a></li>
<li class="topnav-right"><a href="#Signin">Sign in</a></li>
<li class="dropdownicon"><a href="javascript:void(0);" onclick = "dropdownMenu()">☰</a></li>
</ul>
</nav>
<div class="container" id="section-1-gradient">
<div class="row">
<div class= "col-6">
<div class= "leftside-col">
<h1 class="large">
Crazy radness
</h1>
<h1 class="large">
Made for Otaku
</h1>
<form>
<div class= "leftside-col">
<h2>Username</h2>
<input class="inputbox" type="text" name="Username "placeholder="Username">
<h2>Password</h2>
<input class="inputbox" type="password" name="Password "placeholder="Password">
</div>
</form>
</div>
</div>
<div class= "col-6">
<div class= "rightside-col">
<iframe width="560" height="315" src="https://www.youtube.com/embed/uC_SgMzlr6U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<script>
function dropdownMenu()
{
var x= document.getElementById("dropdownClick");
if(x.className === "topnav")
{
x.className = "topnav responsive";
/*change topnav to topnav.responsive*/
}
else
{
x.className = "topnav";
}
}
</script>
</body>
</html>Can someone please point out where I am going wrong?
Solution
you can add below code to your media query
.row {
flex-direction: column;
}
then just fix your margin and paddings