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;
}
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;
}
}
I am trying to make my table and buttons to be responsive but without success.
The buttons aren't fixed to the width when I decrease the size of the screen and the table below is set behind of this buttons and not below as it should be.
The search bar and buttons are supposed to be fixed below the navbar.
The system is like an admin system, where I display the logs from my other system (getting the data from MongoDB).
I am attaching screenshots and source code.
HTML-
<header>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">
<img src="./image/logoC.png">
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><i class="fa fa-sign-in fa-fw"></i>Logins
</li>
<li><i class="fa fa-user-plus fa-fw"></i>Signup
</li>
<li><i class="fa fa-exclamation-circle fa-fw"></i>Add Items Errors
</li>
<li><i class="fa fa-retweet fa-fw"></i>Refresh Log
</li>
<li>Refresh Errors
</li>
<li>Bad Product
</li>
<li><i class="fa fa-refresh fa-fw"></i>Refresh All
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-sign-out fa-fw"></i>Logout</li>
</ul>
</div>
</div>
</div>
</header>
<div class="table_content">
<div class="row">
<div class="options">
<div class="col-sm-4">
<form class="searchBox">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-search"></i>
</div>
<input type="text" class="form-control" ng-model="searchLogins">
</div>
</div>
</form>
</div>
<div class="col-sm-8">
<ul class="pager" ng-show="currentPage==login">
<li>
<button id="markAsHandled" name="markAsHandled" class="btn btn-success" ng-click="handle()" value="Handle">Mark as Handled</button>
</li>
<li>
<button id="deleteError" name="deleteError" class="btn btn-danger" ng-click="remove()" value="Remove">Delete Errors</button>
</li>
<li>
<button id="select_all" name="deleteError" class="btn btn-info" ng-model="selectedAll" ng-click="checkAll()">Select All</button>
</li>
<li>
<button ng-click="removeLogs()" id="deleteAllErrors" name="deleteError" class="btn btn-danger">Remove All</button>
</li>
</ul>
<h5 id="statusMessage">{{statusMsg}}</h5>
</div>
</div>
</div>
</div>
<div class="tableAdmin">
<table ng-table="tableParams" class="table table-striped" show-filter="true">
<tr ng-repeat="log in $data| orderBy:sortType:sortReverse | filter : searchLogins">
<td data-title="'ID'">
{{log._id}}
</td>
<td data-title="'Data'">
{{log.logData}}
</td>
<td data-title="'Date'">
{{log.logDate}}
</td>
<td data-title="'Handled'">
<input type="checkbox" ng-model="log.selected" />
</td>
</tr>
</table>
</div>
<footer class="footer">
<div class="container">
<div class="row">
<div class="span9">
<p class="text-muted">Copyright © 2017 - Designed & Developed by me.</p>
</div>
</div>
</div>
</footer>
</div>
CSS-
html {
width: 100%;
height: 100%;
}
body {
font-family: 'Lato', Calibri, Arial, sans-serif;
background: #f9f9f9;
font-weight: 300;
font-size: 15px;
overflow: scroll;
overflow-x: hidden;
width: 100%;
height: 100%;
}
.btn {
font-weight: 400;
width: 100px;
height: 36px;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
cursor: pointer;
}
#markAsHandled {
width: 130px;
margin-right: 5px;
float: left;
}
#deleteError {
width: 110px;
margin-right: 5px;
float: left;
}
#select_all {
width: 110px;
margin-right: 15px;
float: left;
}
#deleteAllErrors {
width: 110px;
float: left;
}
#statusMessage {
float: left;
margin-left: 10px;
padding-top: 10px;
}
.table {
width: 80%;
height: 100%;
margin-top: 55px;
margin-left: 6px;
}
#ID_column {
width: 230px;
}
#user_column {
width: 230px;
}
#date_column {
width: 230px;
}
#handled_column {
width: 100px;
}
input[type="radio"],
input[type="checkbox"] {
line-height: normal;
margin-left: 50px;
}
.btn-success {
margin-left: 26px;
width: 100px;
}
#import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
.ckbox {
position: relative;
}
.ckbox input[type="checkbox"] {
opacity: 0;
}
.table_content {
width: 100%;
margin-top: 66px;
}
td {
word-wrap: break-word;
overflow-wrap: break-word;
}
.searchBox {
float: left;
width: 400px;
margin: 10px 0 0 0;
}
/*Menu Options*/
.options {
float: left;
width: 100%;
height: 50px;
position: fixed;
display: block;
padding-left: 10px;
background-color: #f9f9f9;
z-index: 1000;
}
.pager {
float: left;
margin: 10px 0 0 10px;
}
.tableAdmin {
width: 100%;
padding-top: 20px;
padding-left: 50px;
}
.badgebox {
opacity: 0;
}
.badgebox + .badge {
text-indent: -999999px;
width: 27px;
}
.badgebox:focus + .badge {
box-shadow: inset 0px 0px 5px;
}
.badgebox:checked + .badge {
text-indent: 0;
}
#div1 {
height: 50px;
width: 100%;
margin-left: 35%;
}
footer {
padding: 50px 0;
height: auto;
text-align: center;
}
Thank you guys.
I've fixed this issue by decreasing the size of the search area and the size of the buttons.
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.
Could someone explain me how do I center my text on bottom of the div container?
<div class="container-fluid">
<header id="welcome-header" class="row">
<div id="welcome-div">
<img src="img/logo.png" alt="logo">
<h1 class="welcome-text">
<span>Hi, I'm Robert. I design & build</span>
<br>
<span class="welcome-text-animation"></span>
</h1>
<div class="hire-button">
Yes, I'm available for hire
</div>
<div class="page-scroll ">
<a href="#welcome-div">
Learn more about what i do
<br>
<i class="fa fa-chevron-down"></i>
</a>
</div>
</div>
</header>
Im trying to get "Learn more about what i do" at the bottom of "welcome-header" row.
CSS :
#welcome-div {
min-height: 100%;
position: relative;
}
.page-scroll {
}
.page-scroll a {
font-family: Sansita;
text-decoration: none;
font-size: 20px;
color: aliceblue;
}
Sorry guys u get me wrong. I want the string to stick to bottom like bottom: 0px;
http://codepen.io/anon/pen/jBLaBX
Add position: relative to #welcome-header then position: absolute; bottom: 0; left: 0; right: 0 to .page-scroll to position the element at the bottom of #welcome-header, and your text-align: center rule will center the text horizontally.
#import url('https://fonts.googleapis.com/css?family=Sansita');
#welcome-header {
width: 100%;
height: 100vh;
background-image: url(img/background.jpg);
position: relative;
}
.welcome-text,
.welcome-text-animation {
font-family: Sansita;
text-align: center;
color: aliceblue;
font-size: 50px;
padding-top: 90px;
}
.home-logo {
display: block;
text-align: center;
}
.home-logo img {
display: inline-block;
padding: 2.5%;
width: 120px;
height: 120px;
margin-left: auto;
margin-right: auto;
display: block;
}
.hire-button {
text-align: center;
padding-top: 90px;
}
.hire-button a {
font-family: Sansita;
text-decoration: none;
color: aliceblue;
font-size: 25px;
border: 2px solid #FDCD3B;
border-radius: 50px;
padding: 1.2%;
transition: all 0.2s linear;
}
.hire-button a:hover {
background-color: #FDCD3B;
color: #2A3A3F;
padding-left: 3%;
padding-right: 3%;
}
#welcome-div {}
.page-scroll {
text-align: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.page-scroll a {
font-family: Sansita;
text-decoration: none;
font-size: 20px;
color: black;
}
<body>
<div class="container-fluid">
<header id="welcome-header" class="row">
<div id="welcome-div">
<img src="img/logo.png" alt="logo">
<h1 class="welcome-text">
<span>Hi, I'm Robert. I design & build</span>
<br>
<span class="welcome-text-animation"></span>
</h1>
<div class="hire-button">
Yes, I'm available for hire
</div>
<div class="page-scroll ">
<a href="#welcome-div">
Learn more about what i do
<br>
<i class="fa fa-chevron-down"></i>
</a>
</div>
</div>
</header>
<section id="about" class="row">
ABOUT CONTENT
</section>
<section id="skills" class="row">
SKILLS CONTENT
</section>
<section id="portfolio" class="row">
PORTFOLIO CONTENT
</section>
<section id="contact" class="row">
CONTACT CONTENT HERE
</section>
</div>
</body>
.page-scroll {
text-align:center;
}
I want to change bootstrap layout elements in different positions when in mobile resolutions like (max-width: 768px) and smaller.
This photo shows what i need to do exactly:
EXAMPLE
How and what i need to change to achieve that positions?
My code: jsfiddle
HTML
<!-- FOOTER-->
<section id="footer">
<div class="container-fluid">
<div class="row">
<div class="col-md-2 left-col">
<p><a class="contacts" href="#">CONTACTS</a></p>
</div>
<div class="col-md-2 contact-person">
<h2>STUART LAWSON</h2>
<p>20 7409 8920</p>
<p>07870 555 930</p>
<p><a class="email" href="#">slawson#savills.com</a></p>
</div>
<div class="col-md-2 contact-person">
<h2>JOSH LAMB</h2>
<p>020 7409 8891</p>
<p>07976 988 486</p>
<p><a class="email" href="#">jlamb#savills.com</a></p>
</div>
<div class="col-md-2 contact-person">
<h2>SAM BOREHAM</h2>
<p>020 7710 7963</p>
<p>07917 635 465</p>
<p><a class="email" href="#">samb#gmreal.com</a></p>
</div>
<div class="col-md-2 contact-person">
<h2>DAN ROBERTS</h2>
<p>020 7710 7963</p>
<p>07801 143 909</p>
<p><a class="email" href="#">danr#gmreal.com</a></p>
</div>
<div class="col-md-2 right-col">
<h2><a class="info" href="#">info#theriverbuilding.com</a></h2>
</div>
</div>
</div>
</section> <!-- END END FOOTER -->
CSS
/*** FOOTER ***/
.col-md-2 {
width: 16.66666666666667%;
float: left;
bottom: -67px;
}
.contacts {
position: absolute;
top: 110px;
left: 118px;
}
.col-md-2.contact-person {
color: #4cae4c;
}
#footer {
padding: 0 10px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
.left-col {
padding: 110px;
margin-left: -50px;
bottom: -65px;
}
.right-col {
padding: 86px;
position: absolute;
right: 76px;
bottom: -40px;
}
#footer p, #footer .email, #footer .contacts, #footer h2, #footer .info{
font-family: 'GothamBook', sans-serif;
color: #ffffff;
font-size: 1.063em; /*13pt in psd*/
opacity: 1.0;
}
#footer .info {
font-size: 1.3em; /*15pt in psd*/
position: absolute;
top: 95px;
right: -28px;
}
.row {
margin-left: -10px;
margin-right: -10px;
}
.row:before, .row:after{
content: " ";
display: table;
}
.row:after{
clear: both;
}
/***MEDIA QUERIES***/
#media(max-width: 768px){
.container-fluid {
width: 550px;
}
#header .logo img{
margin: 15px 0 20px;
height: 120px;
}
h1{
font-family: 'GothamMedium', sans-serif;
position: absolute;
text-align: center;
font-size: 1.55em; /*19pt in psd*/
margin: 100px 215px;
}
#footer .contacts {
left: 25px;
top: 95px;
}
.col-md-2.contact-person {
left: -110px;
top: 65px;
margin-left: 14px;
}
#footer{
text-align: center;
}
.info{
padding-top: 50px;
font-size: 9px;
text-align: center;
}
.left-col {
text-align: center;
margin-left: 0;
margin-right: 0;
padding: 100px;
font-size: 12px;
}
}
Use 2 different rows instead of 1 to stack the elements.
<section id="footer">
<div class="container-fluid">
<div class="row">
<div class="col-md-2 left-col">
<p><a class="contacts" href="#">CONTACTS</a></p>
</div>
</div>
<div class="row">
<div class="col-md-2 contact-person">
<h2>STUART LAWSON</h2>
<p>20 7409 8920</p>
<p>07870 555 930</p>
<p><a class="email" href="#">slawson#savills.com</a></p>
</div>
<div class="col-md-2 contact-person">
<h2>JOSH LAMB</h2>
<p>020 7409 8891</p>
<p>07976 988 486</p>
<p><a class="email" href="#">jlamb#savills.com</a></p>
</div>
<div class="col-md-2 contact-person">
<h2>SAM BOREHAM</h2>
<p>020 7710 7963</p>
<p>07917 635 465</p>
<p><a class="email" href="#">samb#gmreal.com</a></p>
</div>
<div class="col-md-2 contact-person">
<h2>DAN ROBERTS</h2>
<p>020 7710 7963</p>
<p>07801 143 909</p>
<p><a class="email" href="#">danr#gmreal.com</a></p>
</div>
<div class="col-md-2 right-col">
<h2><a class="info" href="#">info#theriverbuilding.com</a></h2>
</div>
</div>
</div>
</section> <!-- END END FOOTER -->