I'm making a website with bootstrap and I've run into a problem. When I use width: 100% on one of my divs, the background color doesn't fully expand to 100%. It only expands to 90% or so (5% of the left and 5% of the right side show the body background color). I apppriciate any help.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width = device-width, initial-scale = 1">
<title>Galaxy</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<style type="text/css">
</style>
<script>
var sound = new Audio();
sound.src = "rick.mp3";
</script>
</head>
<body>
<div id="theCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#theCarousel" data-slide-to="0" class="active"></li>
<li data-target="#theCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/galaxy3.jpg">
<div class="slide1"></div>
<div class="carousel-caption">
<div class="bannertext">
<h1>Santorodesign</h1>
<p>A website made by Michael</p>
<div class="mobileHide"> <button id="headerbutton-nederlands">Nederlands</button></div>
<div class="mobileHide"> <button id="headerbutton-english">English</button></div>
</div>
</div>
</div>
<div class="item">
<div class="slide2"></div>
<img src="images/galaxy2.jpg">
<div class="carousel-caption">
<div class="bannertext2">
<h1>Explore the galaxy<h1>
</div>
</div>
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#theCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<div id="firstrow">
<div class="planettext">
Planets
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/mercury.png"> <br>
<button type="submit" class="btn-primary btn-lg">Learn more about Mercury</button>
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/earth.png"> <br>
<button type="submit" class="btn-primary btn-lg">Learn more about the Earth</button>
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/venus.png"> <br>
<button type="submit" class="btn-primary btn-lg">Learn more about Venus</button>
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/mars.png"> <br>
<button type="submit" class="btn-primary btn-lg">Learn more about Mars</button>
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/jupiter.png"><br>
<button type="submit" class="btn-primary btn-lg">Learn more about jupiter</button>
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/saturn.png"><br>
<button type="submit" class="btn-primary btn-lg">Learn more about Saturn</button>
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/uranus.png"><br>
<button type="submit" class="btn-primary btn-lg">Learn more about Uranus</button>
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/neptune.png"><br>
<button type="submit" class="btn-primary btn-lg">Learn more about Neptune</button>
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
</div>
<div class="planet col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div id="pluto">
<div class="plutotext">
Poor Pluto
</div>
<href="##" onmousedown="sound.play()"><img src="images/pluto.png"></a> <br>
<button type="submit" class="btn-primary btn-lg">Learn more about Pluto</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS:
html {
margin: 0;
}
body {
background: #DCDCDC;
width: 100%;
margin: 0;
}
.carousel-control.left, .carousel-control.right {
background-image: none
}
#firstrow {
font-size: 2em;
padding: 0px 0 0 0;
width: 100%;
text-align: center;
color: black;
position: relative;
}
#firstrow span {
font-family: Impact, Impact5, Charcoal6, sans-serif;
font-size: 1.3em;
}
#firstrow p {
font-family: Helvetica,
}
#media all and (max-width: 2000px) {
#headerbutton-nederlands {
position: absolute;
bottom: 0px;
right: -90px;
line-height: 40px;
}
}
.planettext {
text-align: center;
font-size: 1.5em;
color: #000;
margin-top: 200px;
margin-bottom: 30px;
width: 100%;
background-color: #DCDCDC;
font-weight: bold;
}
.plutotext {
text-align: center;
font-size: 1.5em;
color: #000;
margin-top: 100px;
margin-bottom: 30px;
width: 100%;
background-color: #D3D3D3;
font-weight: bold;
margin: 00;
}
#pluto {
background-color: #D3D3D3;
height: 550px;
width: 100%;
}
#media all and (max-width: 900px) {
#headerbutton-nederlands { display: none; }
#headerbutton-english { display: none; }
}
#media all and (max-width: 2000px) {
#headerbutton-nederlands {
position: absolute;
bottom: 0px;
right: -70px;
line-height: 40px;
}
}
#media all and (max-width: 1450px) {
#headerbutton-nederlands {
position: absolute;
font-size: 14px;
line-height: 30px;
right: -55px;
}
}
#media all and (max-width: 1200px) {
#headerbutton-nederlands {
font-size: 13px;
line-height: 25px;
right: -55px;
}
}
#media all and (max-width: 1080px) {
#headerbutton-nederlands {
font-size: 10px;
line-height: 20px;
right: -40px;
}
}
#media all and (max-width: 2000px) {
#headerbutton-english {
position: absolute;
bottom: 0px;
right: 100px;
line-height: 40px;
}
}
#media all and (max-width: 1450px) {
#headerbutton-english {
position: absolute;
font-size: 14px;
right: 80px;
line-height: 30px
}
}
#media all and (max-width: 1200px) {
#headerbutton-english {
font-size: 13px;
line-height: 25px;
right: 50px;
}
}
#media all and (max-width: 1080px) {
#headerbutton-english {
font-size: 10px;
line-height: 20px;
right: 50px;
}
}
.planet {
margin-bottom: 30px;
position: relative;
}
.planet img {
height: 300px;
max-width: none;
margin-bottom: 20px;
}
.bannertext {
font-size: 1.3em;
line-height: 15px;
position: relative;
}
.bannertext h1 {
font-size: 2em;
}
.bannertext2 {
font-size: 2em;
}
.mobileShow { display: none;}
.mobileHide { display: inline;}
/* Smartphone Portrait and Landscape */
#media only screen
and (max-device-width : 480px){
.mobileShow { display: inline;}
.mobileHide { display: none;}
.planet img{
height: 200px;
}
}
#headerbutton-nederlands {
position: absolute;
font-weight: bold;
-webkit-border-radius: 5px;
color: white;
background-color: #778899;
width: 13%;
text-align: center;
border: white 2px solid ;
}
#headerbutton-english {
position: absolute;
font-weight: bold;
-webkit-border-radius: 5px;
color: white;
background-color: #778899;
width: 13%;
text-align: center;
border: white 2px solid ;
}
Thank you for your time.
Make sure to add following in your planet pluto div
<div class="row"> /* EDIT*/
<div id="pluto">
<div class="plutotext">
Poor Pluto
</div>
<href="##" onmousedown="sound.play()"><img src="images/pluto.png"></a> <br>
<button type="submit" class="btn-primary btn-lg">Learn more about Pluto</button>
</div>
</div> /* EDIT */
Here's CODEPEN answer
One thing that i noted is that though you used bootstrap grid system, you never used bootstrap row class, which is amazing. It's better you would use boostrap inbuilt row class instead of all these classes that you created. Your code looks messy because of that.
html {
margin: 0;
}
body {
background: #DCDCDC;
width: 100%;
margin: 0;
}
.carousel-control.left, .carousel-control.right {
background-image: none
}
#firstrow {
font-size: 2em;
padding: 0px 0 0 0;
width: 100%;
text-align: center;
color: black;
position: relative;
}
#firstrow span {
font-family: Impact, Impact5, Charcoal6, sans-serif;
font-size: 1.3em;
}
#firstrow p {
font-family: Helvetica,
}
#media all and (max-width: 2000px) {
#headerbutton-nederlands {
position: absolute;
bottom: 0px;
right: -90px;
line-height: 40px;
}
}
.planettext {
text-align: center;
font-size: 1.5em;
color: #000;
margin-top: 200px;
margin-bottom: 30px;
width: 100%;
background-color: #DCDCDC;
font-weight: bold;
}
.plutotext {
text-align: center;
font-size: 1.5em;
color: #000;
margin-top: 100px;
margin-bottom: 30px;
width: 100%;
background-color: #D3D3D3;
font-weight: bold;
margin: 00;
}
#pluto {
background-color: #D3D3D3;
height: 550px;
width: 100%;
}
#media all and (max-width: 900px) {
#headerbutton-nederlands { display: none; }
#headerbutton-english { display: none; }
}
#media all and (max-width: 2000px) {
#headerbutton-nederlands {
position: absolute;
bottom: 0px;
right: -70px;
line-height: 40px;
}
}
#media all and (max-width: 1450px) {
#headerbutton-nederlands {
position: absolute;
font-size: 14px;
line-height: 30px;
right: -55px;
}
}
#media all and (max-width: 1200px) {
#headerbutton-nederlands {
font-size: 13px;
line-height: 25px;
right: -55px;
}
}
#media all and (max-width: 1080px) {
#headerbutton-nederlands {
font-size: 10px;
line-height: 20px;
right: -40px;
}
}
#media all and (max-width: 2000px) {
#headerbutton-english {
position: absolute;
bottom: 0px;
right: 100px;
line-height: 40px;
}
}
#media all and (max-width: 1450px) {
#headerbutton-english {
position: absolute;
font-size: 14px;
right: 80px;
line-height: 30px
}
}
#media all and (max-width: 1200px) {
#headerbutton-english {
font-size: 13px;
line-height: 25px;
right: 50px;
}
}
#media all and (max-width: 1080px) {
#headerbutton-english {
font-size: 10px;
line-height: 20px;
right: 50px;
}
}
.planet {
margin-bottom: 30px;
position: relative;
}
.planet img {
height: 300px;
max-width: none;
margin-bottom: 20px;
}
.bannertext {
font-size: 1.3em;
line-height: 15px;
position: relative;
}
.bannertext h1 {
font-size: 2em;
}
.bannertext2 {
font-size: 2em;
}
.mobileShow { display: none;}
.mobileHide { display: inline;}
/* Smartphone Portrait and Landscape */
#media only screen
and (max-device-width : 480px){
.mobileShow { display: inline;}
.mobileHide { display: none;}
.planet img{
height: 200px;
}
}
#headerbutton-nederlands {
position: absolute;
font-weight: bold;
-webkit-border-radius: 5px;
color: white;
background-color: #778899;
width: 13%;
text-align: center;
border: white 2px solid ;
}
#headerbutton-english {
position: absolute;
font-weight: bold;
-webkit-border-radius: 5px;
color: white;
background-color: #778899;
width: 13%;
text-align: center;
border: white 2px solid ;
}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width = device-width, initial-scale = 1">
<title>Galaxy</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<style type="text/css">
</style>
<script>
var sound = new Audio();
sound.src = "rick.mp3";
</script>
</head>
<body>
<div id="theCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#theCarousel" data-slide-to="0" class="active"></li>
<li data-target="#theCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/galaxy3.jpg">
<div class="slide1"></div>
<div class="carousel-caption">
<div class="bannertext">
<h1>Santorodesign</h1>
<p>A website made by Michael</p>
<div class="mobileHide"> <button id="headerbutton-nederlands">Nederlands</button></div>
<div class="mobileHide"> <button id="headerbutton-english">English</button></div>
</div>
</div>
</div>
<div class="item">
<div class="slide2"></div>
<img src="images/galaxy2.jpg">
<div class="carousel-caption">
<div class="bannertext2">
<h1>Explore the galaxy<h1>
</div>
</div>
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#theCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<div id="firstrow">
<div class="planettext">
Planets
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/mercury.png"> <br>
<button type="submit" class="btn-primary btn-lg">Learn more about Mercury</button>
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/earth.png"> <br>
<button type="submit" class="btn-primary btn-lg">Learn more about the Earth</button>
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/venus.png"> <br>
<button type="submit" class="btn-primary btn-lg">Learn more about Venus</button>
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/mars.png"> <br>
<button type="submit" class="btn-primary btn-lg">Learn more about Mars</button>
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/jupiter.png"><br>
<button type="submit" class="btn-primary btn-lg">Learn more about jupiter</button>
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/saturn.png"><br>
<button type="submit" class="btn-primary btn-lg">Learn more about Saturn</button>
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/uranus.png"><br>
<button type="submit" class="btn-primary btn-lg">Learn more about Uranus</button>
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/neptune.png"><br>
<button type="submit" class="btn-primary btn-lg">Learn more about Neptune</button>
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
</div>
<div class="planet col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<div id="pluto">
<div class="plutotext">
Poor Pluto
</div>
<href="##" onmousedown="sound.play()"><img src="images/pluto.png"></a> <br>
<button type="submit" class="btn-primary btn-lg">Learn more about Pluto</button>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I'm assuming you want the #pluto to be 100%?
<div class="planet col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div id="pluto">
<div class="plutotext">Poor Pluto</div>
</div>
</div>
Can you use the dev tools to check the width and padding of the parent div: . I'm guessing the issue is there.
Related
I want the image in my site to completely change when the browser is resized.
I've been using media-queries, but I can't seem to get it right. Any thoughts/tips?
The thing is I have tried the display trick with media query but its not working
I did this, but it's not working even when I am lowering the viewport. The image in the laptop viewport remains the same in the phone viewport.
.blocks {
height: 58%;
}
.mob {
display: none;
}
#media (max-width:400px) {
.mob {
display: block;
}
.blocks {
display: none;
}
}
<div class="col-lg-6 border:1px">
<img class="blocks" src="https://via.placeholder.com/200" alt="laptop-mockup">
<img class="mob" src="https://via.placeholder.com/200/ff0000" alt="android-mockup">
</div>
The whole html and css code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>News homepage</title>
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght#600;700;800&family=PT+Sans:wght#700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="navigator">
<nav class="navbar navbar-expand-sm navbar-dark navbar-light">
<a class="navbar-brand" href=""> <img src="C:\Users\91826\Desktop\news-homepage-main\css\images\logo.svg" alt="My Happy SVG" /></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation navbar-light">
<span class="navbar-toggler-icon navi"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#footer">Home </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#pricing"> New </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#cta"> Popular </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link" href="#footer"> Trending </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#footer"> Categories </a>
</li>
</ul>
</div>
</nav>
</div>
<div class="row ">
<div class="col-lg-6 border:1px">
<img class="blocks" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-web-3-desktop.jpg" alt="laptop-mockup">
<img class="mob" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-web-3-mobile.jpg" alt="android-mockup">
</div>
<div class="tag">
<h1 class="tagline">The Bright<br />Future of<br />Web 3.0?</h1>
</div>
<div class="read">
<h1 class="readline">We dive into the next evolution of the web that claims to put the power of the platforms back into the hands of the people.
But is it really fulfilling its promise?</h1>
</div>
<button class="button-50 readmore" type="button" name="button">READ MORE</button>
<div class="col-lg-6 border:1px">
<div class="new">
<h1>New</h1>
<h2>Hydrogen VS Electric Cars</h2>
<h3>Will hydrogen-fueled cars ever catch up to EVs?</h3>
<hr>
<h2>The Downsides of AI Artistry</h2>
<h3>What are the possible adverse effects of on-demand AI image generation?</h3>
<hr>
<h2>Is VC Funding Drying Up?</h2>
<h3>Private funding by VC firms is down 50% YOY. We take a look at what that means.</h3>
</div>
</div>
</div>
</div>
<div class="info">
<div class="row">
<div class="col-lg-4 box">
<div class="row">
<div class="col-lg-2 box">
<img class="infoimg" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-retro-pcs.jpg" alt="" />
</div>
<div class="col-lg-2 box">
<div class="inf">
<h1 class="infohead1 "> 01</h1>
<h2 class="infohead2"> Reviving Retro PCs</h2>
<h3 class="infohead3"> What happens when old PCs<br>are given modern upgrades?</h3>
</div>
</div>
</div>
</div>
<div class="col-lg-4 box2">
<div class="row">
<div class="col-lg-2 box">
<img class="infoimg" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-gaming-growth.jpg" alt="">
</div>
<div class="col-lg-2 box">
<div class="inf1 inf">
<h1 class="infohead1"> 02</h1>
<h2 class="infohead2"> Top 10 laptops of 2022</h2>
<h3 class="infohead3">Our best picks for various <br> needs and budgets.</h3>
</div>
</div>
</div>
</div>
<div class="col-lg-4 box2">
<div class="row">
<div class="col-lg-2 box">
<img class="infoimg" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-top-laptops.jpg" alt="">
</div>
<div class="col-lg-2 box">
<div class="inf">
<h1 class="infohead1"> 03</h1>
<h2 class="infohead2"> The Growth of Gaming</h2>
<h3 class="infohead3">How the pandemic has sparked <br> fresh opportunities.</h3>
</div>
</div>
</div>
</div>
</div>
<hr class="hori">
<div class="attribution">
Challenge by Frontend Mentor.
Coded by Saswat Seth.
</div>
</body>
</html>
CSS
.navigator {
margin-bottom: 2%;
}
body {
padding: 0% 10% 2% 10%;
}
.nav-link {
color: black;
}
:hover.nav-link {
color: #6B728E;
}
.navigator {
padding: 2% 5% 0% 0%;
}
.blocks {
height: 58%;
}
.mob {
display: none;
}
#media (max-width:400px) {
.mob {
display:block;
}
.blocks {
display:none;
}
}
.new {
height: 85%;
width: 23%;
background: hsl(240, 100%, 5%);
position: absolute;
right: 140px;
padding: 2%;
}
.navelement {
padding-right: 6%;
font-size: 100%;
}
h1 {
color: hsl(35, 77%, 62%);
font-family: 'noto sans';
font-weight: 600;
}
h2 {
color: #fff;
font-size: 23px;
margin-top: 10%;
font-family: 'noto sans';
font-weight: 700;
}
h3 {
color: #6B728E;
font-size: 15px;
padding: 4% 0%;
line-height: 25px;
}
hr {
color: #fff;
border-top: solid white;
}
.tag {
position: absolute;
bottom: 20px;
}
.tagline {
font-family: 'noto sans';
color: #000;
font-weight: 800;
font-size: 60px;
}
.read {
padding: 2% 38%;
position: absolute;
bottom: 54px;
right: -15px;
}
.readline {
font-size: 110%;
color: #6B728E;
line-height: 27px;
}
.button-50 {
height: 49px;
width: 200px;
appearance: button;
background-color: hsl(5, 85%, 63%);
background-image: none;
border: 1px solid #000;
border-radius: 4px;
box-shadow: #B73E3E 4px 4px 0 0, #000 4px 4px 0 1px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: "Montserrat";
font-size: 18px;
font-weight: 400;
line-height: 20px;
margin: 20% 5% 10% 0%;
overflow: visible;
padding: 14px 30px;
text-align: center;
text-transform: none;
touch-action: manipulation;
user-select: none;
-webkit-user-select: none;
vertical-align: middle;
white-space: nowrap;
position: absolute;
bottom: -45px;
right: 45%;
}
.button-50:focus {
text-decoration: none;
}
.button-50:hover {
text-decoration: none;
}
.button-50:active {
box-shadow: rgba(0, 0, 0, .125) 0 3px 5px inset;
outline: 0;
}
.button-50:not([disabled]):active {
box-shadow: #C9BBCF 2px 2px 0 0, #1d1716 2px 2px 0 1px;
transform: translate(2px, 2px);
}
.readmore {
margin: 10% 3% 5% 0;
font-family: 'Poppins';
font-weight: 400;
}
.info {
margin-top: 5%;
margin-left: 10%;
position: absolute;
right: 10%;
}
.infoimg {
width: 315%;
padding: 20%;
}
.infohead1 {
color: #7D9D9C;
}
.infohead2 {
color: #000;
}
.inf {
padding: 30%;
margin-left: 68px;
white-space: nowrap;
}
.hori {
margin-top: 10%;
color: #000;
border-top: solid black;
}
#media (max-width:350px) {
img{
object-fit: cover;
height: 400px;
}
}
#media screen and (max-width:400px) {
.mob {
display: block;
}
}
On my website I have the following section:
<div class="container">
<div class="row text-center mb-4 mt-2">
<div class="col-md-12">
<div class="w-100 col-md-12 pb-4 pt-1 bg-light">
<div class="row align-items-center">
<div class="col-md-4">
<h4 class="font-weight-bold">Step 1:</h4>
<h5 class="pl-5 pr-5">Search for people based on your keywords.</h5>
</div>
<div class="col-md-8 mb-5 mt-4">
<div class="icon-box">
<img src="static/images/step1.jpg" class="img-fluid
mx-auto d-block border" />
</div>
</div>
<div class="col-md-8 mt-5 mb-5">
<div class="icon-box">
<img src="static/images/step2.jpg" class="img-fluid
mx-auto d-block border" />
</div>
</div>
<div class="col-md-4">
<h4 class="font-weight-bold">Step 2:</h4>
<h5 class="pl-5 pr-5">The results are sorted by a person's responsiveness. Choose from a\
list of matches who are ready and willing to interact.</h5>
</div>
<div class="col-md-4">
<h4 class="font-weight-bold">Step 3:</h4>
<h5 class="pl-5 pr-5">Message and make connections with people who are open for (real or\
virtual) coffee!</h5>
</div>
<div class="col-md-8 mt-5">
<div class="icon-box">
<img src="static/images/step3.jpg" class="img-fluid
mx-auto d-block border" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
which looks like:
But on a phone screen, the text (Step 1 etc.) and images are stacked on top of each other. But because of the layout it does not alternate text-image-text-image-text-image as I would like it to:
How to I change the order on a phone screen but keep the desktop layout the way it is please?
My CSS is here also:
html {
font-size: 14px;
}
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
body {
font-family: "PT Sans", sans-serif;
}
.container {
max-width: 960px;
}
.lh-condensed {
line-height: 1.25;
}
.main-header {
max-width: 700px;
}
.ofc-main-title {
font-family: "Lato", sans-serif;
font-weight: 900;
font-size: 40px;
}
.ofc-title {
font-family: "Lato", sans-serif;
font-weight: 900;
font-size: 24px;
}
a.ofc-link-title {
color: #000000;
text-decoration: none;
}
a.ofc-link-title:hover {
color: #000000;
}
a.ofc-link-title:active {
color: #000000;
}
a.ofc-link-title:visited {
color: #000000;
}
.ofc-main-subtitle {
font-family: "PT Sans", sans-serif;
font-weight: 400;
font-size: 24px;
}
.ofc-footer {
font-family: "Economica", sans-serif;
font-weight: 400;
font-size: 16px;
text-align: center;
}
form#main-search-form {
align-items: center;
justify-content: center;
}
span#main-beta-tag {
color: #FF1493;
font-size: 16px;
}
span#beta-tag {
color: #FF1493;
font-size: 12px;
}
#onboarding-title {
font-size: 24px;
}
.onboarding-panel {
background-color: #FBF7F0;
border-radius: 15px;
}
.onboarding-img {
width: 250px;
}
.onboarding-text {
font-weight: 900;
}
.step-panel {
background-color: #FFFFFF;
border-radius: 15px;
}
.step-text {
background-color: #FFFFFF;
width: 49%;
text-align: left;
display: inline-block;
padding: 30px;
font-size: 20px;
}
.step-img {
background-color: #FFFFFF;
width: 49%;
text-align: right;
display: inline-block;
padding: 20px;
}
span#looking-for {
color: #1C99CE;
}
#media(max-width:767px) {
.step-text {
width: 100%;
}
.step-img {
width: 100%;
}
.step-img {
width: 100% !important;
padding: 0px;
}
.step-img img {
width: 100% !important;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 10px;
padding-left: 10px;
}
.step-text {
background: none;
}
.steps {
box-shadow: 0px 0px 1px 1px #d9d6d6;
}
.onboarding-panel .steps:first-child .step-text {
padding-bottom: 0px !important;
}
.step-img {
background: none !important;
}
.ofc-main-title {
font-size: 35px;
}
#search-form {
margin-top: 15px;
}
.border-bottom {
display: block !important;
text-align: center !important;
}
#search-form .btn {
margin-top: 10px !important;
padding-left: 20px;
padding-right: 20px
}
}
.icon-box {
margin: 0px 20px;
}
.icon-box p {
font-size: 18px;
}
I have added to your media query for #media (max-width: 767px) {} the order property of flex-box in a way the desired output is achieved.
html {
font-size: 14px;
}
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
body {
font-family: "PT Sans", sans-serif;
}
.container {
max-width: 960px;
}
.lh-condensed {
line-height: 1.25;
}
.main-header {
max-width: 700px;
}
.ofc-main-title {
font-family: "Lato", sans-serif;
font-weight: 900;
font-size: 40px;
}
.ofc-title {
font-family: "Lato", sans-serif;
font-weight: 900;
font-size: 24px;
}
a.ofc-link-title {
color: #000000;
text-decoration: none;
}
a.ofc-link-title:hover {
color: #000000;
}
a.ofc-link-title:active {
color: #000000;
}
a.ofc-link-title:visited {
color: #000000;
}
.ofc-main-subtitle {
font-family: "PT Sans", sans-serif;
font-weight: 400;
font-size: 24px;
}
.ofc-footer {
font-family: "Economica", sans-serif;
font-weight: 400;
font-size: 16px;
text-align: center;
}
form#main-search-form {
align-items: center;
justify-content: center;
}
span#main-beta-tag {
color: #ff1493;
font-size: 16px;
}
span#beta-tag {
color: #ff1493;
font-size: 12px;
}
#onboarding-title {
font-size: 24px;
}
.onboarding-panel {
background-color: #fbf7f0;
border-radius: 15px;
}
.onboarding-img {
width: 250px;
}
.onboarding-text {
font-weight: 900;
}
.step-panel {
background-color: #ffffff;
border-radius: 15px;
}
.step-text {
background-color: #ffffff;
width: 49%;
text-align: left;
display: inline-block;
padding: 30px;
font-size: 20px;
}
.step-img {
background-color: #ffffff;
width: 49%;
text-align: right;
display: inline-block;
padding: 20px;
}
span#looking-for {
color: #1c99ce;
}
#media (max-width: 767px) {
.one {
order: 1;
}
.two {
order: 2;
}
.three {
order: 4;
}
.four {
order: 3;
}
.five {
order: 5;
}
.six {
order: 6;
}
.step-text {
width: 100%;
}
.step-img {
width: 100%;
}
.step-img {
width: 100% !important;
padding: 0px;
}
.step-img img {
width: 100% !important;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 10px;
padding-left: 10px;
}
.step-text {
background: none;
}
.steps {
box-shadow: 0px 0px 1px 1px #d9d6d6;
}
.onboarding-panel .steps:first-child .step-text {
padding-bottom: 0px !important;
}
.step-img {
background: none !important;
}
.ofc-main-title {
font-size: 35px;
}
#search-form {
margin-top: 15px;
}
.border-bottom {
display: block !important;
text-align: center !important;
}
#search-form .btn {
margin-top: 10px !important;
padding-left: 20px;
padding-right: 20px;
}
}
.icon-box {
margin: 0px 20px;
}
.icon-box p {
font-size: 18px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>JS Bin</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="container">
<div class="row text-center mb-4 mt-2">
<div class="col-md-12">
<div class="w-100 col-md-12 pb-4 pt-1 bg-light">
<div class="row align-items-center">
<div class="col-md-4 one">
<h4 class="font-weight-bold">Step 1:</h4>
<h5 class="pl-5 pr-5">
Search for people based on your keywords.
</h5>
</div>
<div class="col-md-8 mb-5 mt-4 two">
<div class="icon-box">
<img
src="static/images/step1.jpg"
class="img-fluid mx-auto d-block border"
alt="image-1"
/>
</div>
</div>
<div class="col-md-8 mt-5 mb-5 three">
<div class="icon-box">
<img
src="static/images/step2.jpg"
class="img-fluid mx-auto d-block border"
alt="image-2"
/>
</div>
</div>
<div class="col-md-4 four">
<h4 class="font-weight-bold">Step 2:</h4>
<h5 class="pl-5 pr-5">
The results are sorted by a person's responsiveness. Choose
from a\ list of matches who are ready and willing to interact.
</h5>
</div>
<div class="col-md-4 five">
<h4 class="font-weight-bold">Step 3:</h4>
<h5 class="pl-5 pr-5">
Message and make connections with people who are open for
(real or\ virtual) coffee!
</h5>
</div>
<div class="col-md-8 mt-5 six">
<div class="icon-box">
<img
src="static/images/step3.jpg"
class="img-fluid mx-auto d-block border"
alt="image-3"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"
></script>
<script src="./script.js"></script>
</body>
</html>
That's the beauty of order property in flexbox. It is very very helpful in these scenarios.
If i undrestand your question correctly you want to display text image , text image , text image from top to down in mobile screen?
first add a container for each row, something like this
<div class="row text-center mb-4 mt-2">
<div class="col-md-12">
<div class="w-100 col-md-12 pb-4 pt-1 bg-light">
<div class="row align-items-center">
<div class="row">
<div class="col-md-4">
<h4 class="font-weight-bold">Step 1:</h4>
<h5 class="pl-5 pr-5">Search for people based on your keywords.</h5>
</div>
<div class="col-md-8 mb-5 mt-4">
<div class="icon-box">
<img src="image1" class="img-fluid
mx-auto d-block border" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-8 mt-5 mb-5">
<div class="icon-box">
<img src="image2" class="img-fluid
mx-auto d-block border" />
</div>
</div>
<div class="col-md-4">
<h4 class="font-weight-bold">Step 2:</h4>
<h5 class="pl-5 pr-5">The results are sorted by a person's responsiveness. Choose
from
a\
list of matches who are ready and willing to interact.</h5>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h4 class="font-weight-bold">Step 3:</h4>
<h5 class="pl-5 pr-5">Message and make connections with people who are open for
(real
or\
virtual) coffee!</h5>
</div>
<div class="col-md-8 mt-5">
<div class="icon-box">
<img src="image3" class="img-fluid
mx-auto d-block border" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Then in when you are inside mobile mode add a class to the second container with this properties
.yourClass {
display: flex;
flex-direction: column-reverse;
}
This is how the page looks in chrome
and
This is how the page looks in Firefox
The website I am working on is not responsive in chrome debugger(and my android phone) but works fine in firefox debugger. I need help fixing it.
and I also need help in turning five buttons into radio. and translate button to be a toggle button.
the code I have used is as follows.
.NoDisplay {
display: none;
}
.Qustion {
margin-top: 25px;
height: 100%;
}
.card-header {
padding: 8px;
padding-left: 15px;
padding-right: 15px;
background-color: #fff;
height: 50%;
}
.instructionsContainer {
text-align: center;
}
.progress {
height: 10px;
margin: 0;
}
.QustionHeading {
font-size: 1.2rem;
font-weight: 500;
margin-bottom: 5px;
;
}
.InstructionsHeading {
font-size: 1.1rem;
font-weight: 500;
margin-bottom: 7px;
}
.instructionText {
margin: 0;
font-weight: 410;
}
.QustionText {
font-weight: bold;
font-size: 1.3rem;
margin-bottom: 10px;
}
.optionsContainer {
text-align: left;
margin: auto;
display: block;
width: 100%;
margin-top: 20px;
}
.OptionsBtn {
width: 100%;
margin-top: 10px;
margin-bottom: 10px;
}
.OptionsBtn::selection {
color: #fff;
background-color: #000;
}
.card-footer {
text-align: none;
}
.TranslateBtn {
margin-left: 0;
display: block;
width: 100%;
font-size: 1.5rem;
font-weight: 400;
}
.TranslateBtn:checked {
background-color: #000;
color: #fff;
}
.NextBtn {
margin-right: 0;
display: block;
width: 100%;
font-size: 1.5rem;
font-weight: 400;
}
. #media (max-width: 768px) {
.optionsContainer {
text-align: left;
margin: auto;
display: block;
width: 100%;
margin-top: 20px;
}
.OptionsBtn {
width: 100%;
margin-top: 10px;
margin-bottom: 10px;
font-size: 1rem;
}
}
<!DOCTYPE html>
<html>
<head>
<title>test page</title>
<title>TP Portal -- Jokes</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<!-- <div class="loader-wrapper screen1" id="loadImg">
<img src="V-ReapLogoAnimation.svg" class="loaderImage" alt="loeading" />
</div>
<div class=" section-left " id="leftOverlay"></div>
<div class=" section-right " id="rightOverlay"></div> -->
<div class="Container-main">
<div class="screen3">
<div class="row">
<div class="col-lg-2"></div>
<div class="col-lg-8 col-md-12">
<div class="card text-center Qustion Qustion1">
<div class="card-header">
<div class="ProgressBar">
<h2 class="QustionHeading">Qustion No 5</h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="70" style="width:50%">
</div>
</div>
</div>
<!-- <hr />
<div class="instructions">
<h2 class="InstructionsHeading">==> Instructions <== </h2>
<p class="instructionText">
Select one of the options below to indicate how well the statement describes you
</p>
</div> -->
</div>
<div class="card-body">
<h2 class="QustionText">I look for things that need to be done.</h2>
<div class="optionsContainer">
<button class="btn OptionsBtn" type="radio" name="qustion1" value="5">vary well</button>
<br />
<button class="btn OptionsBtn" type="radio" name="qustion1" value="4">vary well</button>
<br />
<button class="btn OptionsBtn" type="radio" name="qustion1" value="3">vary well</button>
<br />
<button class="btn OptionsBtn" type="radio" name="qustion1" value="2">vary well</button>
<br />
<button class="btn OptionsBtn" type="radio" name="qustion1" value="1">vary well</button>
</div>
</div>
<div class="card-footer">
<div class="row">
<div class="col-6">
<button class="btn TranslateBtn" id="TranslateBtn1">Translate</button>
</div>
<div class="col-6">
<button class="btn NextBtn">Next</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-2"></div>
</div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
I found the answer on Reddit. I had to add the line
<meta name="viewport" content="width=device-width, initial-scale=1.0">
to the header of my HTML file
body {
font-family: 'Ubuntu', sans-serif;
background-color: #0d0d0d !important;
}
body a {
color: #fff;
}
body a:hover {
color: #fff;
}
#media (min-width: 1500px) {
.container{
width: 1470px !important;
}
}
nav {
background: #1c1c1c !important;
color: #ccc !important;
}
.toper {
padding: 100px;
background: #071931;
color: #fff;
}
.main {
background: #121212;
border-radius: 2px;
margin-top: -60px;
color: #fff;
padding: 15px 15px;
}
.container-first {
background: #2a2a2a;
margin: 0px 0px 15px 0px;
padding: 5px;
}
.breadcrumb {
margin: 0px;
background: #2a2a2a;
}
.social img
{
margin-right: 15px;
padding: 2px;
background: #ccc;
border-radius: 5px;
}
#media screen and (max-width: 992px) {
.social img {
margin-top: 10px;
}
}
.welcome {
background: #444;
border-radius: 3px;
padding: 0px !important;
margin-bottom: 15px;
}
.margin-bottom-small
{
margin-bottom: 10px;
}
.margin-bottom-small::before
{
content: '';
display: table;
}
.welcome-header
{
padding: 15px 20px 15px 20px;
background: #2d2d2d;
border-radius: 3px;
margin: 10px;
box-shadow: inset 0px 0px 15px 0px #000;
}
.welcome-text
{
padding: 10px;
margin: 10px;
color: #ccc;
}
.welcome-action {
padding: 15px 0px 15px 20px;
background: #4d4d4d;
color: #ccc;
letter-spacing: 5px;
border-radius: 3px;
}
.bluer {
padding: 15px;
background: #046092;
border-radius: 3px;
font-weight: 500;
}
.section-bluer
{
padding: 0px;
margin-top: 15px;
}
.section-container
{
padding: 0px;
}
.section-first
{
background: #1c1c1c;
padding: 10px;
margin: 0px;
}
.section-picture
{
padding: 5px;
text-align: center;
}
.section-picture > img
{
border: 1px solid #016d9b;
}
.section-this p
{
color: #ccc;
font-size: 12px;
}
.section-this h4 a
{
color: #87b8d7;
font-weight: 500;
}
.section-this hr
{
border: none;
border-top: 1px dotted #444;
}
.section-count {
font-size: 12px;
}
.small-text {
font-size: 10px;
}
.section-last-post
{
padding: 0px;
}
.zero-padding
{
padding: 0px;
}
#media (min-width: 992px)
{
.last-topic-img
{
padding: 0px;
}
.section-count
{
padding: 0px;
}
}
.last-topic p
{
margin-bottom: 2px;
}
.abox
{
background: #282828;
border-radius: 2px;
border: 1px solid #282828;
padding: 5px;
padding: 5px 0px 5px 10px;
margin-right: 0px;
margin-top: 15px;
}
.popular-autors p
{
margin: 0px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<main class="container main">
<div class="container-fluid container-first row">
<div class="col-lg-9 col-md-12">
<nav class="breadcrumb">
<a class="breadcrumb-item" href="#">Home</a>
<a class="breadcrumb-item" href="#">Library</a>
<a class="breadcrumb-item" href="#">Data</a>
<span class="breadcrumb-item active">Bootstrap</span>
</nav>
</div>
<div class="col-lg-3 col-md-12 my-auto">
<div class="float-lg-right text-center social">
<img src="fb.png" />
<img src="tw.png" />
<img src="g.png" />
</div>
</div>
</div>
<div class="container-fluid welcome">
<div class="margin-bottom-small"></div>
<header class="welcome-header">
Witaj eeeeeeeeeeeee | Kody, Porady | Gry online
</header>
<div class="welcome-text">
<small>Zarejestruj się, aby otrzymać dostęp do wszystkich funkcjonalności forum.</small>
</div>
<div class="welcome-action">
<button type="button" class="btn btn-secondary"><span class="glyphicon glyphicon-log-in"></span> Zaloguj się</button>
<button type="button" class="btn btn-secondary"><span class="glyphicon glyphicon-fire"></span> Zarejestruj się</button>
</div>
</div>
<div class="container-fluid bluer">
Najnowszy news: #98 Tygodnik yyyyyNews - O grach MMORPG słów kilka!
</div>
<div clas="container-fluid">
<div class="row">
<div class="col-lg-9 zero-padding">
<div class="container-fluid">
<!-- /////////////////////////////////////////////////////////////////////////////KONIEC 1 kategori -->
<div class="row section-bluer">
<div class="bluer">
Projektyyyyyyyyyy
</div>
<div class="container-fluid section-container">
<div class="row section-first">
<div class="col-lg-1 section-picture my-auto">
<img src="fb.png" />
</div>
<div class="col-lg-8 section-this my-auto">
<h4>League of Legends</h4>
<p>Ćwicz swój refleks, opanuj percepcję i zostań przywódcą grupy! Stań się prawdziwym bohaterem świata League of Legends i doskonal swoje umiejętności taktyczne.</p>
<hr>
Metin2 - Publikacje Serwerów, Metin2 - Publikacje Serwerów, Metin2 - Publikacje Serwerów,
</div>
<div class="col-lg-1 section-count text-center my-auto small-text">
<b>230683</b> tematy
<b>1246366</b> odpowiedzi
</div>
<div class="col-lg-2 section-last-post my-auto">
<div class="container">
<div class="row">
<div class="col-lg-4 my-auto last-topic-img text-center">
<img src="fb.png" />
</div>
<div class="col-lg-8 small-text last-topic my-auto text-center">
<p>Przerwa techniczna 09-05-2…</p>
<p>Przez Krystian</p>
<p>9 maj</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /////////////////////////////////////////////////////////////////////////////KONIEC 1 kategori -->
</div>
</div>
<div class="col-lg-3 zero-padding">
<div class="container-fluid">
<div class="row-fluid abox">
Reklama
</div>
</div>
<div class="container">
<div class="row abox">
Popularni Autorzy
</div>
</div>
<div class="container">
<!-- /////////////////////////////////////////////////////////////////////////////Początek autora popularnego -->
<div class="row text-center popular-autors" >
<div class="col-xl-1 my-auto">
<p>1</p>
</div>
<div class="col-xl-2 my-auto">
<img src="fb.png" />
</div>
<div class="col-xl-9 my-auto">
<p>Misiegg</p>
<p><span class="badge badge-pill badge-success"><i class="fa fa-plus-square" aria-hidden="true"></i> 54</span></p>
</div>
</div>
<!-- /////////////////////////////////////////////////////////////////////////////KONIEC autora popularnego -->
</div>
<div class="row abox">
Ostatnie Posty
</div>
<div class="row">
<div class="col-lg-2">
</div>
<div class="col-lg-10">
</div>
</div>
</div>
</div>
</main>
As you can see it's:
And it it looks good after I change <div class="row section-bluer"> to <div class="row-fluid section-bluer">
Why is there row-fluid needed?
And
Why there is free space from left side? I can't fix it no matter what I try to do.
And generally what is the difference between row and row-fluid?
I look for this in documentation https://v4-alpha.getbootstrap.com/layout/grid/, every page, and there is absolutely no information about this.
And everywhere in code in bootstrap 4 documentation is used row, never row-fluid Why?
Why in my example I need row-fluid? What is difference in general between these two?
There are too many nested container/container-fluid. You only need 1 outer container, and nested columns should always be placed directly in .row.
Pseudo code...
container
row
col-*
row
col-*
col-*
/row
/col
/row
/container
All are working however in 800 px, 1100px, 1400px , the navigation bar is not showing up as I think that the 400 px media query have overlapped others queries. I need help on how to make navigation bar show up ...
CSS Code:
#media screen and (min-width: 400px)
{
header {
padding: 1%;
}
header h1 {
position: relative;
left: 0.5%;
bottom: 10%;
}
header div{
display: none;
}
nav.sitenavigation {
}
nav.sitenavigation ul {
border: 3px solid #34180f;
display: none;
background-color: #B8944D;
position: absolute;
right: 5%;
top: 80%;
z-index: 1;
}
nav.sitenavigation ul li {
display: inline-block;
}
.navigation-menu-button {
float: right;
}
article.container{
padding:0%;
}
figure {
display: none;
}
aside {
display: none;
}
aside p {
display: none;
}
}
#media screen and (min-width:800px),print
{
header h1 {
position: absolute;
top: 8%;
left: 28.0%;
}
header div{
display: inline;
position: relative;
right: 39%;
}
nav.sitenavigation {
position: relative;
bottom: 2%;
padding: 0.3%;
}
.navigation-menu-button {
display:none;
}
ul li {
display:inline;
margin-right: 2%;
position: relative;
left: 36.5%;
}
article {
width: 62.6%;
padding: 2%;
}
article p {
padding-right: 0%;
}
#contentstart {
padding-right: 0%;
}
figure {
display: none;
}
aside {
display: inline;
}
aside p {
position: relative;
left: 3.5%;
margin: 2% 0 0 5%;
padding-right: 5%;
}
}
#media screen and (min-width:1100px){
header h1 {
position: absolute;
top: 5.5%;
left: 37%;
}
header div {
display: inline;
position: relative;
right: 39%;
}
nav.sitenavigation {
position: relative;
bottom: 2%;
padding: 0.3%;
}
.navigation-menu-button {
display:none;
}
ul li {
display:inline;
margin-right: 2%;
position: relative;
left: 43.5%;
}
article {
width: 62.6%;
padding: 2%;
}
article p {
padding-right: 50%;
}
#contentstart {
padding-right: 50%;
}
figure {
position: absolute;
left: 50%;
bottom: 28.7%;
margin: 2% 2% 0 0.3%;
}
aside {
display: inline;
width: 30%;
}
aside p {
position: relative;
left: 3%;
padding: 2% 6% 0 6%;
margin: 1% 0 0 0%;
}
}
#media screen and (min-width:1400px) {
body {
width: 1400px;
}
header h1 {
position: absolute;
top: 7%;
left: 42%;
}
header div {
display: inline;
position: relative;
right: 39%;
}
nav.sitenavigation {
position: relative;
bottom: 2%;
padding: 0.3%;
}
ul li {
display:inline;
margin-right: 2%;
position: relative;
left: 47.1%;
}
article {
width: 62.6%;
padding: 2%;
}
article p {
padding-right: 54%;
padding-bottom: 2%;
}
figure {
position: absolute;
left: 45%;
bottom: 1%;
top: 0.2%;
margin: 2%;
}
aside {
display: inline;
width: 30%;
}
aside p {
position: relative;
left: 3%;
padding: 2% 6% 0 6%;
padding-right: 7%;
margin: 1% 0 0 0%;
}
}
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Revisions Bookstore & Cafe</title>
<!--
Revisions Bookstore and Cafe main web page
Filename: index.html
Author: Wong Wan Zhen Sofia
Date: 5 January 2017
HTML5 and CSS3 Illustrated Unit I, Visual Workshop
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="modernizr.custom.40753.js"></script>
<link rel="stylesheet" href="styles.css">
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="icon" sizes="192x192" href="images/android.png">
</head>
<body>
<div class="container">
<p class="skipnavigation">Skip navigation </p>
<header>
<h1>Revisions Bookstore & Cafe</h1>
<div>
<img src="images/logo.gif" width="120" height="100" alt="">
</div>
</header>
<nav class="sitenavigation">
<div class="navigation-menu-button">
<img src="images/menu.png" width = "60" height="60" alt="Show Navigation">
</div>
<ul>
<li>Home</li>
<li>Events</li>
<li>New Releases</li>
</ul>
</nav>
<article>
<div class="container">
<h2 id="contentstart">10th Anniversary Sale!</h2>
<figure><img src="images/browsing.jpg" width="500" height = "378" alt="picture of person browsing"></figure>
<p>10% off our top 10 best sellers</p>
<p>Buy any two books, get a third at 50% off</p>
<p>In-store giveaways every day this month</p>
<p>Through November 30</p>
</div>
</article>
<aside>
<p>Custom brewed coffee and hand-selected books.</p>
<p>Special orders are our specialty.</p>
</aside>
<footer>
<p>412 N. 25th St.</p>
<p>Richmond, VA 23223</p>
<p>(804) 555-2565</p>
</footer>
</div>
<script src ="script.js"></script>
</body>
</html>
Try to use bootstrap for responsive and mobile-first. Quickly demo for you.
HTML:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Logo -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
COLLAPSE NAVBAR
</div>
<!-- Menu Items -->
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<!--<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">-->
<!--<div class="input-group" id="wm_btn_cholai">-->
<!--<i class="glyphicon glyphicon-repeat"></i> Cho lại-->
<!--</div>-->
<!--</div>-->
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="input-group" id="wm_btn_boqua">
<i class="glyphicon glyphicon-refresh"></i> Bỏ qua
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="input-group" id="wm_btn_new">
<i class="glyphicon glyphicon-floppy-saved"></i> Thêm Mới
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="input-group" id="wm_btn_sua">
<i class="glyphicon glyphicon-edit"></i> Sửa
</div>
</div>
<!--<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">-->
<!--<div class="input-group" id="wm_btn_luu">-->
<!--<i class="glyphicon glyphicon-floppy-save"></i> Lưu-->
<!--</div>-->
<!--</div>-->
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="input-group" id="wm_btn_them">
<i class="glyphicon glyphicon-plus"></i> Thêm
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="input-group" id="wm_btn_xoa">
<i class="glyphicon glyphicon-remove"></i> Xóa
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="input-group" id="wm_btn_huy">
<i class="glyphicon glyphicon-trash"></i> Hủy
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="input-group" id="wm_btn_in">
<i class="glyphicon glyphicon-print"></i> In
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="input-group" id="wm_btn_inkemchidinh">
<a href="#" class="input-group-addon button-load"><i class="glyphicon glyphicon-list-alt"></i> In kèm chỉ
định</a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="input-group" id="wm_btn_ketthuc">
<i class="glyphicon glyphicon-off"></i> Kết thúc
</div>
</div>
CSS:
.row {
margin-bottom: 5px;
margin-top: 10px;
}
#wm_header {
width: 100%;
min-height: 22px;
margin: 0;
/*background-image: linear-gradient(to bottom, #428bca 0px, #2d6ca2 100%);*/
/*background-repeat: repeat-x;*/
background-color: #428bca;
border-color: #2b669a;
color: #ffffff;
font-weight: bold;
padding: 5px;
font-size: 15px;
}
.input-label {
/*background-color: #428bca;*/
background-color: #fff;
border: 0;
font-weight: 700;
min-width: 110px;
text-align: left;
}
.input-group {
margin-bottom: 5px;
margin-top: 10px;
}
.input-group-addon:first-child {
text-decoration: none;
font-weight: bold
}
.button-load {
cursor: default;
background-color: #428bca;
color: #fff;
font-weight: bold;
}