body content goes of out of container - html

Question

I am trying to create a responsive layout and hence faced an issue. Issue is that body content exceeds the the layout on minimizing below 250px; however i know below 320px it doesn't matter if it loses responsivity still it looks unprofessional. i hope experts will help me in this regard.
[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/NjMWV.png
function toggleMobileMenu(menu){
menu.classList.toggle('open');
}
function toggleSidebar(menu){
menu.classList.toggle('open');
}
html{
height: 100%;
box-sizing: border-box;
}
*,*:after,*:before{
box-sizing: inherit;
}
body{
position: relative;
min-height: 100%;
min-width: 100%;
box-sizing: border-box;
margin: 0;
padding-bottom:12rem;
font-family: 'Roboto', sans-serif !important;
background: #f2f2f2;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.body-content{
padding-bottom: 0.5rem;
width: 100%;
}
/*Main ends here*/
/*Global*/
h2{
color: #007bff;
font-size: 20px;
}
li,a{
list-style: none;
text-decoration: none;
}
.button{
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
color: #fff;
}
/*Global*/
header{
padding:0 20px;
background: #007991; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #78ffd6, #007991); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #78ffd6, #007991); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.75);
height: 50px;
width: 100%;
min-width: 100%;
display:flex;
justify-content:space-between;
z-index: 1001;
position: -moz-sticky;
position: -webkit-sticky;
position: sticky;
top: 0;
}
.logo{
width: 30px;
height: 30px;
justify-self: start;
margin: 10px 20px;
cursor: pointer;
}
header nav {
overflow: hidden;
margin-right: auto;
}
header nav ul{
list-style: none;
}
header nav ul li{
display: inline-block;
padding-left: 20px;
}
.active a{
color: #fff;
}
header nav ul li:hover{
transform: scale(1.1);
transition: all 0.3s ease 0s;
}
header nav ul li a{
color: #f2f3f5;
padding: 10px;
text-decoration: none;
font-weight:400 !important;
}
header nav ul li a:hover{
color: #fff;
font-weight: 400 !important;
}
.access{
margin: 9px;
list-style: none;
display: block;
position: relative;
z-index: 100;
}
.access button{
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
color: #fff;
}
.access button:hover{
background: rgba(0, 136, 169, 0.8);
transform: scale(1.1);
transition: all 0.3s ease 0s;
}
.access li{
list-style: none;
cursor: pointer;
}
.access li a{
text-decoration: none;
}
.access li ul{
background-color: rgba(0, 136, 169, 1);
display: none; /*submenu dissappears when set to none*/
text-align: center;
padding: 10px 25px;
margin-top: 8px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.access li:hover ul{
display : block;
}
.access-menu li a{
color: #fff !important;
font-weight: 400!important;
}
.access-menu.reveal{
display: block;
}
.access li ul li{
padding: 5px;
color: #fff;
display: block;
font-weight:500;
}
.access li ul li:hover{
transform: scale(1.1);
transition: all 0.3s ease 0s;
}
/*mobile-menu*/
#hamburger-icon{
margin: auto 0;
display: none;
cursor: grab;
background: rgba(0, 136, 169, 1);
border-radius: 5px;
padding: 3px 10px;
}
#hamburger-icon div{
width: 25px;
height:3px;
background-color: #fff;
margin: 5px 0;
transition: all 0.3s ease 0s;
}
.open .bar1{
-webkit-transform: rotate(-45deg) translate(-6px, 5px);
transform: rotate(-45deg) translate(-6px, 5px);
}
.open .bar2{
opacity: 0;
}
.open .bar3{
-webkit-transform: rotate(45deg) translate(-6px,-6px);
transform: rotate(45deg) translate(-6px,-6px);
}
.open .mobile-menu{
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
position: absolute;
}
.mobile-menu{
display: none;
position: fixed;
top: 24px;
left: 0;
width: 100%;
height: calc(100vh - 50px);
overflow: hidden;
height: auto;
text-align: center;
background: #007991; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #78ffd6, #007991); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #78ffd6, #007991); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color: #fff;
z-index:100;
}
.mobile-menu li{
padding : 10px;
font-weight: 400 !important;
}
.mobile-menu li a{
color: #fff;
}
.mobile-menu li:hover{
transform: scale(1.1);
transition: all 0.3s ease 0s;
}
#media(max-width: 768px){
header{
height: 40px;
}
.logo{
height: 25px;
width: 25px;
margin: 8px 10px;
}
header nav,header .access{
display: none;
}
#hamburger-icon{
display: block;
padding: 2px 7px;
margin-right: 5px;
}
#hamburger-icon div{
width: 20px;
height:3px;
}
.mobile-menu li{
margin-right: 15px;
}
}
media(min-width: 769px) and (max-width: 1020px){
.logo{
margin: 10px;
}
nav ul li{
padding-left: 10px;
font-size: 16px;
}
nav ul li a{
padding: 5px;
}
}
#media(min-width: 250px) and (max-width: 281px){
.logo{
margin-left: -10px;
}
#hamburger-icon{
margin-right: -10px;
}
}
#media(min-width: 282px) and (max-width: 320px){
.logo{
margin-left: -10px;
}
#hamburger-icon{
margin-right: -10px;
}
}
/*Card*/
.card{
min-width: 15rem;
flex: 1;
-webkit-box-flex: 1;
-ms-flex: 1;
height: 100%;
width: 100%;
border: 1px solid #ccc;
background: #fff;
font-weight: 300 !important;
position: relative;
}
.card .category{
position: absolute;
top: -10px;
left: 0;
background: #FF7F50;
color: #fff;
font-weight: 300 !important;
padding: 5px 9px;
font-size: 10px;
text-transform: uppercase;
}
.card .flag{
top:0;
right: -15px;
position: absolute;
}
.card .flag button{
position: absolute;
top: -10px;
right: 0;
background: 0;
color: #fff;
font-size: 20px;
}
.flag #report{
display:none;
float: left;
padding:0;
margin-top: 22px;
margin-right: 22px;
background: #fff;
color: #007bff;
}
#report p{
padding: 2px 5px;
top:-10px;
font-size:10px;
line-height:0.1rem;
cursor:pointer;
}
.card img{
flex-wrap: wrap;
pointer-events: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
width: 100%;
float: none;
display:block;z
object-fit: fill;
height: 180px;
}
.card-panel{
display: flex;
align-items: center;
justify-content: center;
margin-top: -10px;
}
.card-panel .icon{
cursor: pointer;
display: flex;
/*flex-direction: row;*/
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
}
.card-panel .icon img{
height: 60px;
width: 60px;
border: 5px solid #FFF;
border-radius: 50%;
background-color: #007bff;
text-align: center;
color: #fff;
margin: -25px 10px 0 10px;
pointer-events: none;
cursor: pointer;
}
.card-panel .icon i{
font-size: 15px;
line-height: 30px;
height: 40px;
width: 40px;
border: 5px solid #fff;
border-radius: 50%;
background-color: #007bff;
text-align: center;
color: #fff;
margin: -20px 5px 0 5px;
}
.card-panel .icon .tooltip,
.card-panel .icon .tooltip1{
text-align: center;
position: absolute;
top: 0;
background: #fff;
color: #007bff;
font-size: 10px;
padding: 10px 10px;
border-radius: 25px;
box-shadow: 0 10px 10px rgba(0,0,0,0.1);
opacity: 0;
pointer-events: none;
z-index: 1;
transition: all 0.2s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.card-panel .icon .tooltip:before,
.card-panel .icon .tooltip1:before{
position: absolute;
content: "";
height: 7px;
width: 7px;
background:#fff;
bottom: -3px;
left: 50%;
transform: translate(-50%) rotate(45deg);
transition: all 0.2s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.card-panel .icon:hover .tooltip,
.card-panel .icon:focus .tooltip{
position: absolute;
top: -60px;
opacity: 1;
pointer-events: auto;
}
.card-panel .icon:hover .tooltip1,
.card-panel .icon:focus .tooltip1{
top: -92px;
opacity: 1;
pointer-events: auto;
text-align: center;
}
.card-panel .icon:hover i,
.card-panel .icon:active i,
.card-panel .icon:hover .tooltip,
.card-panel .icon:focus .tooltip,
.card-panel .icon .tooltip1:before{
text-shadow: 0px -1px 0px rgba(0,0,0,0.4);
}
.card-panel .tooltip1 i{
font-size: 8px;
line-height:13px;
height: 20px;
width: 20px;
border: 3px solid #fff;
border-radius: 50%;
background-color: #007bff;
text-align: center;
color: #fff;
margin: -20px 5px 0 5px;
}
.card .text {
padding: 10px 10px;
}
.card .text h3{
margin-top: 0;
text-align: justify;
text-justify: inter-word;
font-weight: 500 !important;
}
.card button{
background-color: #007bff;
border-radius: 10px;
color:#fff;
padding: 10px 20px;
border: none;
cursor: pointer;
position: relative;
margin: 0 auto;
display: block;
}
.card button:hover{
opacity: 0.8;
}
.card .see-more{
top: 40%;
text-align: center;
position: relative;
}
.card .see-more i{
font-size: 60px;
color:#007bff;
}
.container-a,
.container-b{
margin:10px auto;
padding:0;
width: calc(100% - 100px);
position:relative;
}
.wrapper{
height:100%;
display:grid;
grid-template-columns:repeat(5, 1fr);
grid-template-areas: "blog-container blog-container blog-container blog-container blog-sidebar";
grid-gap:10px;
}
.wrapper .blog-container{
grid-area: blog-container;
}
.wrapper .blog-sidebar{
grid-area: blog-sidebar;
}
.wrapper .blog-container span,
.wrapper .blog-sidebar span{
background-color: #007bff;
padding: 5px 10px;
position:relative;
color: #fff;
z-index: -1;
background-blend-mode: multiply;
font-family: 'Roboto', sans-serif !important;
}
.blog-container hr,
.blog-sidebar hr{
width: 100%;
color:#007bff;
margin-top: 3.5px;
position: relative;
z-index: -2;
}
.blog-container .blog-cards{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(270px,1fr));
grid-gap: 10px;
}
.widgets{
background: #fff;
border: 1px solid #ccc;
margin-bottom: 10px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(270px,1fr));
grid-gap: 10px;
padding: 5px;
}
.widgets img{
width: 100%;
float: none;
display:block;
object-fit: fill;
}
.container-a .widgets,.container-b .widgets{
margin-bottom: 10px;
}
.load-more{
text-align: center;
grid-column: 1/-1;
margin-bottom: 10px;
}
.load-more button{
padding: 9px 150px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
color: #fff;
font-size: 13px;
}
.load-more button:hover{
background: rgba(0, 136, 169, 0.8);
transform: scale(1.1);
transition: all 0.3s ease 0s;
}
/*--MEDIA QUERIES--*/
#media(max-width: 768px){
.carousel{
width: calc(100% - 60px);
margin: 10px auto;
}
.carousel span,
.wrapper .blog-container span,
.wrapper .blog-sidebar span{
font-size: 12px;
}
.carousel hr{
margin-top: 3px;
}
.horizontal-scroll .btn-scroll{
padding: 0 5px;
font-size: 30px;
}
.horizontal-scroll #btn-scroll-left{
top: calc(430px/2);
}
.horizontal-scroll #btn-scroll-right{
top: calc(430px/2);
}
.container-a,
.container-b{
width: 99%;
padding: 5px;
}
.wrapper{
grid-template-rows: auto;
grid-template-columns: 1fr;
grid-template-areas: "blog-container"
"blog-sidebar";
}
.card{
min-width: 14.8rem;
}
.card .category{
font-size: 8px;
padding: 4px 7px;
top: -8px;
}
.card img{
height: 150px;
}
.card .flag{
right: -7px;0
}
.card .flag button{
font-size: 15px;
top: -5px;
}
.flag #report{
margin-top: 17px;
margin-right: 12px;
}
#report p{
padding: 1px 4px;
font-size:9px;
}
.card-panel .icon i{
font-size: 10px;
line-height: 22px;
height: 30px;
width: 30px;
margin: -12px 4px 0 4px;
border: 4px solid #FFF;
}
.card-panel .icon img{
width: 50px;
height: 50px;
border: 4px solid #FFF;
margin: -20px 10px 0 10px;
}
.card-panel .icon .tooltip,
.card-panel .icon .tooltip1{
padding: 8px 8px;
font-size: 8px;
}
.card-panel .icon .tooltip:before,
.card-panel .icon .tooltip1:before{
width: 5px;
height: 5px;
bottom: -2px;
}
.card-panel .icon:hover .tooltip{
top: -45px;
}
.card-panel .icon:hover .tooltip1{
top: -75px;
}
.card-panel .tooltip1 i{
font-size: 8px;
line-height:14px;
height: 18px;
width: 18px;
border: 2px solid #fff;
}
.card .text h3{
font-size: 15px;
}
.card button{
padding: 5px 10px;
font-size: 12px;
}
.widgets{
grid-template-columns: repeat(auto-fill, minmax(244px,1fr));
}
.card .see-more{
top: 40%;
}
.card .see-more i{
font-size: 50px;
}
.load-more button{
padding: 5px 30px;
font-size: 12px;
}
}
#media(max-width: 281px) {
.wrapper .blog-container {
padding-right: 0;
}
.blog-container .blog-cards {
grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
}
.widgets {
grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
}
}
<section class="body-content">
<header>
<img src="img/Logo.jpg" class="logo" alt="Logo">
<nav>
<ul>
<li class="active"><i class="fas fa-home"></i> Home</li>
<li><i class="fas fa-pen-nib"></i> Blogs</li>
<li><i class="far fa-images"></i> product</li>
</ul>
</nav>
<ul class="access">
<li><button class="accessBtn"><i class="fas fa-sign-in-alt"></i> Access <i class="fas fa-caret-down"></i></button>
<ul class ="access-menu">
<li id="signup">Signup</li>
<li id="signin">Signin</li>
</ul>
</li>
</ul>
<div id="hamburger-icon" onclick="toggleMobileMenu(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<ul class="mobile-menu">
<li class="active"><i class="fas fa-home"></i> Home</li>
<li><i class="fas fa-pen-nib"></i> contact</li>
<li><i class="far fa-images"></i> Product</li>
<li>Signup</li>
<li>Signin</li>
</ul>
</div>
</header>
<section class="container-a" aria-label="blog-content">
<div class="wrapper">
<div class="blog-container">
<span>Blogs</span><hr>
<div class="blog-cards">
<div class="card">
<img src="images/1.jpg">
<p class="category">Fashion</p>
<div class="flag">
<button onclick=myFunction()>&#8942</button>
<div id="report">
<p>Report</p>
<p>Not-interested</p>
</div>
</div><!--flag-->
<div class="card-panel">
<div class="icon">
<div class="tooltip">14.1k</div>
<i class="fas fa-star"></i>
</div>
<div class="icon">
<div class="tooltip">14.1k</div>
<i class="fas fa-comment"></i>
</div>
<div class="icon">
<div class="tooltip1"><i class="fas fa-crown"></i>Umananda goswami
</div>
<img src="images/4.jpeg">
</div>
<div class="icon">
<div class="tooltip">14.1k</div>
<i class="fas fa-user-plus"></i>
</div>
<div class="icon">
<div class="tooltip">14.1k</div>
<i class="fas fa-share"></i>
</div>
</div><!--card-panel-->
<div class="text">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3>
<button>Read it</button>
</div>
</div><!--card-->
<div class="card">
<img src="images/1.jpg">
<p class="category">Fashion</p>
<div class="flag">
<button onclick=myFunction()>&#8942</button>
<div id="report">
<p>Report</p>
<p>Not-interested</p>
</div>
</div><!--flag-->
<div class="card-panel">
<div class="icon">
<div class="tooltip">14.1k</div>
<i class="fas fa-star"></i>
</div>
<div class="icon">
<div class="tooltip">14.1k</div>
<i class="fas fa-comment"></i>
</div>
<div class="icon">
<div class="tooltip1"><i class="fas fa-crown"></i>Umananda goswami
</div>
<img src="images/4.jpeg">
</div>
<div class="icon">
<div class="tooltip">14.1k</div>
<i class="fas fa-user-plus"></i>
</div>
<div class="icon">
<div class="tooltip">14.1k</div>
<i class="fas fa-share"></i>
</div>
</div><!--card-panel-->
<div class="text">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3>
<button>Read it</button>
</div>
</div><!--card-->
<div class="card">
<img src="images/1.jpg">
<p class="category">Fashion</p>
<div class="flag">
<button onclick=myFunction()>&#8942</button>
<div id="report">
<p>Report</p>
<p>Not-interested</p>
</div>
</div><!--flag-->
<div class="card-panel">
<div class="icon">
<div class="tooltip">14.1k</div>
<i class="fas fa-star"></i>
</div>
<div class="icon">
<div class="tooltip">14.1k</div>
<i class="fas fa-comment"></i>
</div>
<div class="icon">
<div class="tooltip1"><i class="fas fa-crown"></i>Umananda goswami
</div>
<img src="images/4.jpeg">
</div>
<div class="icon">
<div class="tooltip">14.1k</div>
<i class="fas fa-user-plus"></i>
</div>
<div class="icon">
<div class="tooltip">14.1k</div>
<i class="fas fa-share"></i>
</div>
</div><!--card-panel-->
<div class="text">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3>
<button>Read it</button>
</div>
</div><!--card-->
<div class="card">
<img src="images/1.jpg">
<p class="category">Fashion</p>
<div class="flag">
<button onclick=myFunction()>&#8942</button>
<div id="report">
<p>Report</p>
<p>Not-interested</p>
</div>
</div><!--flag-->
<div class="card-panel">
<div class="icon">
<div class="tooltip">14.1k</div>
<i class="fas fa-star"></i>
</div>
<div class="icon">
<div class="tooltip">14.1k</div>
<i class="fas fa-comment"></i>
</div>
<div class="icon">
<div class="tooltip1"><i class="fas fa-crown"></i>Umananda goswami
</div>
<img src="images/4.jpeg">
</div>
<div class="icon">
<div class="tooltip">14.1k</div>
<i class="fas fa-user-plus"></i>
</div>
<div class="icon">
<div class="tooltip">14.1k</div>
<i class="fas fa-share"></i>
</div>
</div><!--card-panel-->
<div class="text">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3>
<button>Read it</button>
</div>
</div><!--card-->
<div class="card">Card5</div>
<div class="load-more">
<button>Load More</button>
</div>
</div><!--cards-->
</div>
<div class="blog-sidebar">
<span>Sidebar</span><hr>
<div class="widgets">
<img src="images/5.jpg">
<img src="images/4.jpeg">
</div>
</div>
</div>
</section>

Answer 1

The problem here is, that you set the .card class a min-width: 14.8rem, so it would be bigger than the actual body with at a certian point. You can resolve this by remove the absolute min-width.
Working code:
function toggleMobileMenu(menu) {
menu.classList.toggle('open');
}
function toggleSidebar(menu) {
menu.classList.toggle('open');
}
html {
height: 100%;
box-sizing: border-box;
}
*,
*:after,
*:before {
box-sizing: inherit;
}
body {
position: relative;
min-height: 100%;
min-width: 100%;
box-sizing: border-box;
margin: 0;
padding-bottom: 12rem;
font-family: 'Roboto', sans-serif !important;
background: #f2f2f2;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.body-content {
padding-bottom: 0.5rem;
width: 100%;
}
/*Main ends here*/
/*Global*/
h2 {
color: #007bff;
font-size: 20px;
}
li,
a {
list-style: none;
text-decoration: none;
}
.button {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
color: #fff;
}
/*Global*/
header {
padding: 0 20px;
background: #007991;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #78ffd6, #007991);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #78ffd6, #007991);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
height: 50px;
width: 100%;
min-width: 100%;
display: flex;
justify-content: space-between;
z-index: 1001;
position: -moz-sticky;
position: -webkit-sticky;
position: sticky;
top: 0;
}
.logo {
width: 30px;
height: 30px;
justify-self: start;
margin: 10px 20px;
cursor: pointer;
}
header nav {
overflow: hidden;
margin-right: auto;
}
header nav ul {
list-style: none;
}
header nav ul li {
display: inline-block;
padding-left: 20px;
}
.active a {
color: #fff;
}
header nav ul li:hover {
transform: scale(1.1);
transition: all 0.3s ease 0s;
}
header nav ul li a {
color: #f2f3f5;
padding: 10px;
text-decoration: none;
font-weight: 400 !important;
}
header nav ul li a:hover {
color: #fff;
font-weight: 400 !important;
}
.access {
margin: 9px;
list-style: none;
display: block;
position: relative;
z-index: 100;
}
.access button {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
color: #fff;
}
.access button:hover {
background: rgba(0, 136, 169, 0.8);
transform: scale(1.1);
transition: all 0.3s ease 0s;
}
.access li {
list-style: none;
cursor: pointer;
}
.access li a {
text-decoration: none;
}
.access li ul {
background-color: rgba(0, 136, 169, 1);
display: none;
/*submenu dissappears when set to none*/
text-align: center;
padding: 10px 25px;
margin-top: 8px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.access li:hover ul {
display: block;
}
.access-menu li a {
color: #fff !important;
font-weight: 400!important;
}
.access-menu.reveal {
display: block;
}
.access li ul li {
padding: 5px;
color: #fff;
display: block;
font-weight: 500;
}
.access li ul li:hover {
transform: scale(1.1);
transition: all 0.3s ease 0s;
}
/*mobile-menu*/
#hamburger-icon {
margin: auto 0;
display: none;
cursor: grab;
background: rgba(0, 136, 169, 1);
border-radius: 5px;
padding: 3px 10px;
}
#hamburger-icon div {
width: 25px;
height: 3px;
background-color: #fff;
margin: 5px 0;
transition: all 0.3s ease 0s;
}
.open .bar1 {
-webkit-transform: rotate(-45deg) translate(-6px, 5px);
transform: rotate(-45deg) translate(-6px, 5px);
}
.open .bar2 {
opacity: 0;
}
.open .bar3 {
-webkit-transform: rotate(45deg) translate(-6px, -6px);
transform: rotate(45deg) translate(-6px, -6px);
}
.open .mobile-menu {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
position: absolute;
}
.mobile-menu {
display: none;
position: fixed;
top: 24px;
left: 0;
width: 100%;
height: calc(100vh - 50px);
overflow: hidden;
height: auto;
text-align: center;
background: #007991;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #78ffd6, #007991);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #78ffd6, #007991);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color: #fff;
z-index: 100;
}
.mobile-menu li {
padding: 10px;
font-weight: 400 !important;
}
.mobile-menu li a {
color: #fff;
}
.mobile-menu li:hover {
transform: scale(1.1);
transition: all 0.3s ease 0s;
}
#media(max-width: 768px) {
header {
height: 40px;
}
.logo {
height: 25px;
width: 25px;
margin: 8px 10px;
}
header nav,
header .access {
display: none;
}
#hamburger-icon {
display: block;
padding: 2px 7px;
margin-right: 5px;
}
#hamburger-icon div {
width: 20px;
height: 3px;
}
.mobile-menu li {
margin-right: 15px;
}
}
media(min-width: 769px) and (max-width: 1020px) {
.logo {
margin: 10px;
}
nav ul li {
padding-left: 10px;
font-size: 16px;
}
nav ul li a {
padding: 5px;
}
}
#media(min-width: 250px) and (max-width: 281px) {
.logo {
margin-left: -10px;
}
#hamburger-icon {
margin-right: -10px;
}
}
#media(min-width: 282px) and (max-width: 320px) {
.logo {
margin-left: -10px;
}
#hamburger-icon {
margin-right: -10px;
}
}
/*Card*/
.card {
min-width: 15rem;
flex: 1;
-webkit-box-flex: 1;
-ms-flex: 1;
height: 100%;
width: 100%;
border: 1px solid #ccc;
background: #fff;
font-weight: 300 !important;
position: relative;
}
.card .category {
position: absolute;
top: -10px;
left: 0;
background: #FF7F50;
color: #fff;
font-weight: 300 !important;
padding: 5px 9px;
font-size: 10px;
text-transform: uppercase;
}
.card .flag {
top: 0;
right: -15px;
position: absolute;
}
.card .flag button {
position: absolute;
top: -10px;
right: 0;
background: 0;
color: #fff;
font-size: 20px;
}
.flag #report {
display: none;
float: left;
padding: 0;
margin-top: 22px;
margin-right: 22px;
background: #fff;
color: #007bff;
}
#report p {
padding: 2px 5px;
top: -10px;
font-size: 10px;
line-height: 0.1rem;
cursor: pointer;
}
.card img {
flex-wrap: wrap;
pointer-events: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
width: 100%;
float: none;
display: block;
z object-fit: fill;
height: 180px;
}
.card-panel {
display: flex;
align-items: center;
justify-content: center;
margin-top: -10px;
}
.card-panel .icon {
cursor: pointer;
display: flex;
/*flex-direction: row;*/
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
}
.card-panel .icon img {
height: 60px;
width: 60px;
border: 5px solid #FFF;
border-radius: 50%;
background-color: #007bff;
text-align: center;
color: #fff;
margin: -25px 10px 0 10px;
pointer-events: none;
cursor: pointer;
}
.card-panel .icon i {
font-size: 15px;
line-height: 30px;
height: 40px;
width: 40px;
border: 5px solid #fff;
border-radius: 50%;
background-color: #007bff;
text-align: center;
color: #fff;
margin: -20px 5px 0 5px;
}
.card-panel .icon .tooltip,
.card-panel .icon .tooltip1 {
text-align: center;
position: absolute;
top: 0;
background: #fff;
color: #007bff;
font-size: 10px;
padding: 10px 10px;
border-radius: 25px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
opacity: 0;
pointer-events: none;
z-index: 1;
transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.card-panel .icon .tooltip:before,
.card-panel .icon .tooltip1:before {
position: absolute;
content: "";
height: 7px;
width: 7px;
background: #fff;
bottom: -3px;
left: 50%;
transform: translate(-50%) rotate(45deg);
transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.card-panel .icon:hover .tooltip,
.card-panel .icon:focus .tooltip {
position: absolute;
top: -60px;
opacity: 1;
pointer-events: auto;
}
.card-panel .icon:hover .tooltip1,
.card-panel .icon:focus .tooltip1 {
top: -92px;
opacity: 1;
pointer-events: auto;
text-align: center;
}
.card-panel .icon:hover i,
.card-panel .icon:active i,
.card-panel .icon:hover .tooltip,
.card-panel .icon:focus .tooltip,
.card-panel .icon .tooltip1:before {
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4);
}
.card-panel .tooltip1 i {
font-size: 8px;
line-height: 13px;
height: 20px;
width: 20px;
border: 3px solid #fff;
border-radius: 50%;
background-color: #007bff;
text-align: center;
color: #fff;
margin: -20px 5px 0 5px;
}
.card .text {
padding: 10px 10px;
}
.card .text h3 {
margin-top: 0;
text-align: justify;
text-justify: inter-word;
font-weight: 500 !important;
}
.card button {
background-color: #007bff;
border-radius: 10px;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
position: relative;
margin: 0 auto;
display: block;
}
.card button:hover {
opacity: 0.8;
}
.card .see-more {
top: 40%;
text-align: center;
position: relative;
}
.card .see-more i {
font-size: 60px;
color: #007bff;
}
.container-a,
.container-b {
margin: 10px auto;
padding: 0;
width: calc(100% - 100px);
position: relative;
}
.wrapper {
height: 100%;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-areas: "blog-container blog-container blog-container blog-container blog-sidebar";
grid-gap: 10px;
}
.wrapper .blog-container {
grid-area: blog-container;
}
.wrapper .blog-sidebar {
grid-area: blog-sidebar;
}
.wrapper .blog-container span,
.wrapper .blog-sidebar span {
background-color: #007bff;
padding: 5px 10px;
position: relative;
color: #fff;
z-index: -1;
background-blend-mode: multiply;
font-family: 'Roboto', sans-serif !important;
}
.blog-container hr,
.blog-sidebar hr {
width: 100%;
color: #007bff;
margin-top: 3.5px;
position: relative;
z-index: -2;
}
.blog-container .blog-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
grid-gap: 10px;
}
.widgets {
background: #fff;
border: 1px solid #ccc;
margin-bottom: 10px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
grid-gap: 10px;
padding: 5px;
}
.widgets img {
width: 100%;
float: none;
display: block;
object-fit: fill;
}
.container-a .widgets,
.container-b .widgets {
margin-bottom: 10px;
}
.load-more {
text-align: center;
grid-column: 1/-1;
margin-bottom: 10px;
}
.load-more button {
padding: 9px 150px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
color: #fff;
font-size: 13px;
}
.load-more button:hover {
background: rgba(0, 136, 169, 0.8);
transform: scale(1.1);
transition: all 0.3s ease 0s;
}
/*--MEDIA QUERIES--*/
#media(max-width: 768px) {
.carousel {
width: calc(100% - 60px);
margin: 10px auto;
}
.carousel span,
.wrapper .blog-container span,
.wrapper .blog-sidebar span {
font-size: 12px;
}
.carousel hr {
margin-top: 3px;
}
.horizontal-scroll .btn-scroll {
padding: 0 5px;
font-size: 30px;
}
.horizontal-scroll #btn-scroll-left {
top: calc(430px/2);
}
.horizontal-scroll #btn-scroll-right {
top: calc(430px/2);
}
.container-a,
.container-b {
width: 99%;
padding: 5px;
}
.wrapper {
grid-template-rows: auto;
grid-template-columns: 1fr;
grid-template-areas: "blog-container" "blog-sidebar";
}
.card {
min-width: 100%;
}
.card .category {
font-size: 8px;
padding: 4px 7px;
top: -8px;
}
.card img {
height: 150px;
}
.card .flag {
right: -7px;
0
}
.card .flag button {
font-size: 15px;
top: -5px;
}
.flag #report {
margin-top: 17px;
margin-right: 12px;
}
#report p {
padding: 1px 4px;
font-size: 9px;
}
.card-panel .icon i {
font-size: 10px;
line-height: 22px;
height: 30px;
width: 30px;
margin: -12px 4px 0 4px;
border: 4px solid #FFF;
}
.card-panel .icon img {
width: 50px;
height: 50px;
border: 4px solid #FFF;
margin: -20px 10px 0 10px;
}
.card-panel .icon .tooltip,
.card-panel .icon .tooltip1 {
padding: 8px 8px;
font-size: 8px;
}
.card-panel .icon .tooltip:before,
.card-panel .icon .tooltip1:before {
width: 5px;
height: 5px;
bottom: -2px;
}
.card-panel .icon:hover .tooltip {
top: -45px;
}
.card-panel .icon:hover .tooltip1 {
top: -75px;
}
.card-panel .tooltip1 i {
font-size: 8px;
line-height: 14px;
height: 18px;
width: 18px;
border: 2px solid #fff;
}
.card .text h3 {
font-size: 15px;
}
.card button {
padding: 5px 10px;
font-size: 12px;
}
.widgets {
grid-template-columns: repeat(auto-fill, minmax(244px, 1fr));
}
.card .see-more {
top: 40%;
}
.card .see-more i {
font-size: 50px;
}
.load-more button {
padding: 5px 30px;
font-size: 12px;
}
}
#media(max-width: 281px) {
.wrapper .blog-container {
padding-right: 0;
}
.blog-container .blog-cards {
grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
}
.widgets {
grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
}
}
<section class="body-content">
<header>
<img src="img/Logo.jpg" class="logo" alt="Logo">
<nav>
<ul>
<li class="active"><i class="fas fa-home"></i> Home</li>
<li><i class="fas fa-pen-nib"></i> Blogs</li>
<li><i class="far fa-images"></i> product</li>
</ul>
</nav>
<ul class="access">
<li><button class="accessBtn"><i class="fas fa-sign-in-alt"></i> Access <i class="fas fa-caret-down"></i></button>
<ul class="access-menu">
<li id="signup">Signup</li>
<li id="signin">Signin</li>
</ul>
</li>
</ul>
<div id="hamburger-icon" onclick="toggleMobileMenu(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<ul class="mobile-menu">
<li class="active"><i class="fas fa-home"></i> Home</li>
<li><i class="fas fa-pen-nib"></i> contact</li>
<li><i class="far fa-images"></i> Product</li>
<li>Signup</li>
<li>Signin</li>
</ul>
</div>
</header>
<section class="container-a" aria-label="blog-content">
<div class="wrapper">
<div class="blog-container">
<span>Blogs</span>
<hr>
<div class="blog-cards">
<div class="card">
<img src="images/1.jpg">
<p class="category">Fashion</p>
<div class="flag">
<button onclick=myFunction()>&#8942</button>
<div id="report">
<p>Report</p>
<p>Not-interested</p>
</div>
</div>
<!--flag-->
<div class="card-panel">
<div class="icon">
<div class="tooltip">14.1k</div>
<i class="fas fa-star"></i>
</div>
<div class="icon">
<div class="tooltip">14.1k</div>
<i class="fas fa-comment"></i>
</div>
<div class="icon">
<div class="tooltip1"><i class="fas fa-crown"></i>Umananda goswami
</div>
<img src="images/4.jpeg">
</div>
<div class="icon">
<div class="tooltip">14.1k</div>
<i class="fas fa-user-plus"></i>
</div>
<div class="icon">
<div class="tooltip">14.1k</div>
<i class="fas fa-share"></i>
</div>
</div>
<!--card-panel-->
<div class="text">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3>
<button>Read it</button>
</div>
</div>
<!--card-->
<div class="card">
<img src="images/1.jpg">
<p class="category">Fashion</p>
<div class="flag">
<button onclick=myFunction()>&#8942</button>
<div id="report">
<p>Report</p>
<p>Not-interested</p>
</div>
</div>
<!--flag-->
<div class="card-panel">
<div class="icon">
<div class="tooltip">14.1k</div>
<i class="fas fa-star"></i>
</div>
<div class="icon">
<div class="tooltip">14.1k</div>
<i class="fas fa-comment"></i>
</div>
<div class="icon">
<div class="tooltip1"><i class="fas fa-crown"></i>Umananda goswami
</div>
<img src="images/4.jpeg">
</div>
<div class="icon">
<div class="tooltip">14.1k</div>
<i class="fas fa-user-plus"></i>
</div>
<div class="icon">
<div class="tooltip">14.1k</div>
<i class="fas fa-share"></i>
</div>
</div>
<!--card-panel-->
<div class="text">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3>
<button>Read it</button>
</div>
</div>
<!--card-->
<div class="card">
<img src="images/1.jpg">
<p class="category">Fashion</p>
<div class="flag">
<button onclick=myFunction()>&#8942</button>
<div id="report">
<p>Report</p>
<p>Not-interested</p>
</div>
</div>
<!--flag-->
<div class="card-panel">
<div class="icon">
<div class="tooltip">14.1k</div>
<i class="fas fa-star"></i>
</div>
<div class="icon">
<div class="tooltip">14.1k</div>
<i class="fas fa-comment"></i>
</div>
<div class="icon">
<div class="tooltip1"><i class="fas fa-crown"></i>Umananda goswami
</div>
<img src="images/4.jpeg">
</div>
<div class="icon">
<div class="tooltip">14.1k</div>
<i class="fas fa-user-plus"></i>
</div>
<div class="icon">
<div class="tooltip">14.1k</div>
<i class="fas fa-share"></i>
</div>
</div>
<!--card-panel-->
<div class="text">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3>
<button>Read it</button>
</div>
</div>
<!--card-->
<div class="card">
<img src="images/1.jpg">
<p class="category">Fashion</p>
<div class="flag">
<button onclick=myFunction()>&#8942</button>
<div id="report">
<p>Report</p>
<p>Not-interested</p>
</div>
</div>
<!--flag-->
<div class="card-panel">
<div class="icon">
<div class="tooltip">14.1k</div>
<i class="fas fa-star"></i>
</div>
<div class="icon">
<div class="tooltip">14.1k</div>
<i class="fas fa-comment"></i>
</div>
<div class="icon">
<div class="tooltip1"><i class="fas fa-crown"></i>Umananda goswami
</div>
<img src="images/4.jpeg">
</div>
<div class="icon">
<div class="tooltip">14.1k</div>
<i class="fas fa-user-plus"></i>
</div>
<div class="icon">
<div class="tooltip">14.1k</div>
<i class="fas fa-share"></i>
</div>
</div>
<!--card-panel-->
<div class="text">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3>
<button>Read it</button>
</div>
</div>
<!--card-->
<div class="card">Card5</div>
<div class="load-more">
<button>Load More</button>
</div>
</div>
<!--cards-->
</div>
<div class="blog-sidebar">
<span>Sidebar</span>
<hr>
<div class="widgets">
<img src="images/5.jpg">
<img src="images/4.jpeg">
</div>
</div>
</div>
</section>
So the problem was fixed by changing min-width to 100% insted of a absolute value in line 601 at your css file.