I'm currently working on a new bootstrap markup for a website and it looks completely as wanted in the Google Chrome - but when I switch to IE11 it looks like the grid system is screwed.
I've specified viewport, IE=edge etc. and tried to include respond.js as various google searches suggested. The website looks fine with xs screen size but for bigger screen sizes the container overflows the window, thus not adapting to the size of the screen.
Can you help me out? The website is available at
thyrace.dk/etape and the markup right beneath.
Thank you very much.
#-ms-viewport { width: device-width; }
#viewport { width: device-width; }
html, body {
height: 100%;
}
body {
background-image: url("../img/bg.png");
background-repeat: repeat;
font-size: 13px;
}
.wrapper {
height: 100%;
display: table;
}
.navbar {
background-color: white;
}
.content {
background-color: white;
height: 100%;
padding: 20px;
}
main, aside {
margin-top: 10px;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav li > a:hover {
color: #FFF;
background: grey;
}
aside {
padding: 0;
width: 100%;
}
aside img {
float: left;
margin: 0 0 5px 5px;
}
/* Carousel */
.carousel {
margin-bottom: 20px;
margin: 0 10px 0 10px;
}
.carousel .item {
height: 225px;
background-color: #555;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
}
.carousel-caption h4 {
margin: 0;
background-color: rgba(175, 0, 0, 0.50);
}
.carousel-indicators {
top: 10px;
height: 20px;
}
.carousel-text {
z-index: 1;
position: absolute;
bottom: 20px;
right: 0;
padding: 15px;
width: 400px;
max-width: 100%;
background-color: grey;
color: white;
}
.carousel-text h2 {
font-size: 14px;
font-weight: bold;
margin: 0;
padding: 0;
}
.navbar-default .navbar-nav li {
margin-bottom: 1px;
}
#media (min-width: 768px) {
.wrapper {
padding: 20px 0 20px 0;
}
.navbar-collapse {
height: auto;
border-top: 0;
box-shadow: none;
max-height: none;
padding-left:0;
padding-right:0;
}
.navbar-collapse.collapse {
display: block !important;
width: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
.navbar-collapse.in {
overflow-x: visible;
}
.navbar {
margin-right: 0;
margin-left: 0;
border-radius: 0px;
}
.navbar-nav, .navbar-nav > li, .navbar-left,
.navbar-right, .navbar-header {
float: none !important;
}
.navbar-right .dropdown-menu {
left: 0;
right: auto;
}
.navbar-logo {
padding: 0 10px 10px 10px;
}
.page-return {
width: 100%;
text-align: center;
margin-top: 5px;
font-size: 11px;
}
}
<!DOCTYPE HTML>
<html lang="da" >
<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>ThyRace.dk - Løb med naturoplevelser i Thy</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script type='text/javascript' src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/purple-color-scheme.css">
</head>
<body>
<div class="container wrapper">
<div class="col-xs-12 col-sm-3 col-md-2">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="hidden-xs page-return">
Tilbage til hovedoversigten
</div>
<img src="img/logo_etape.png" class="img-responsive navbar-logo hidden-xs" alt="" />
<a class="navbar-brand visible-xs" href="#">
Etapeløb Thy Trail
</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="visible-xs">Tilbage til thyrace.dk</li>
<li class="active">Løbsinformation</li>
<li>Rute</li>
<li>Tilmelding</li>
<li>Startliste</li>
</ul>
</div>
</nav>
</div>
<div class="col-xs-12 col-sm-9 col-md-10">
<div class="navbar navbar-default content">
<div class="row">
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="img/slider/1.jpg" alt="" />
</div>
<div class="item">
<img src="img/slider/2.jpg" alt="" />
</div>
<div class="item">
<img src="img/slider/3.jpg" alt="" />
</div>
<div class="item">
<img src="img/slider/4.jpg" alt="" />
</div>
</div>
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
<li data-target="#carousel" data-slide-to="3"></li>
</ol>
<div class="carousel-text">
<h2>Fredag d. 30. oktober - Søndag 1. november 2015</h2>
</div>
</div> <!-- End carousel -->
</div> <!-- End carousel row -->
<div class="row">
<div class="col-xs-12 col-sm-9">
<main>
Bla bla bla
</main>
</div>
<div class="col-xs-12 col-sm-3">
<aside>
<img src="http://dummyimage.com/250x100/000/ffffff&text=250*100" class="img-responsive">
<img src="http://dummyimage.com/250x100/000/ffffff&text=Advertisement" class="img-responsive">
<img src="http://dummyimage.com/250x100/000/ffffff&text=Advertisement" class="img-responsive">
<img src="http://dummyimage.com/250x100/000/ffffff&text=Some+ad" class="img-responsive">
<img src="http://dummyimage.com/250x100/000/ffffff&text=Some+ad" class="img-responsive">
<img src="http://dummyimage.com/250x100/000/ffffff&text=Some+ad" class="img-responsive">
<img src="http://dummyimage.com/250x100/000/ffffff&text=Some+ad" class="img-responsive">
</aside>
</div> <!-- End aside wrapper -->
</div> <!-- End main + aside row -->
</div> <!-- End navbar -->
</div> <!-- End content col -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Your DOM is not as per bootstrap you've to use something like that
<div class="wrapper">
<div class="container">
<div class="row>
<div class="col-xs-12 col-sm-3 col-md-2">
And You've used display:table for your wrapper viz causing the layout issue for IE as well as in FF
Also for better results stop using your custom class along with bootstrap class otherwise it will misbehave at some points.
For e.g:
Instead of using:
<div class="col-md-6 yourClass">
you should use:
<div class="col-md-6">
<div class="yourClass">
Related
I am fairly new to coding and have a specific issue that I cannot figure out. I have a container that I want positioned differently based on the screen size. For large and mid-sized screens, I want the container left justified with a small amount of padding from the left edge, and on small screens, I want the container centered. I am using bootstraps, html, and css. See my style and code below. The container is overtop of a background image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Website Name</title>
<!-- MDB icon -->
<link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" />
<!-- Google Fonts Roboto -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;500;700&display=swap" />
<!-- MDB -->
<link rel="stylesheet" href="css/mdb.min.css" />
</head>
<style>
#media (min-width: 100%) {
#intro {
min-width: 100%;
margin-right: none;
margin-top: -58.59px;
background-color: none;
}
}
.alfa {
position: absolute;
max-width: inherit;
margin-top: 55vh;
align-items: center;
justify-content: center;
background-color: white;
color: black;
border: lightgrey;
border-style: solid;
border-width: thin;
border-radius: 0em;
font-size: 1em;
padding: 1rem 1rem 1rem 1rem;
box-shadow: 0 0 20px black
}
.no-pad {
margin-right: 0rem;
margin-left: 0rem;
}
.navbar-brand {
margin-left: 1rem;
}
.nav-item {
margin-right: 1rem;
}
.row {
font-size: 1.5em;
}
.main-button {
display: inline-flex;
align-items: center;
justify-content: center;
}
#button1 {
font-size: 1.5em;
}
</style>
<body>
<!-- Header Bar -->
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="">My Accounting Exec</a>
<!--Toggle Button-->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i title="" class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item text-center"><a class="nav-link" href="" style="color:white;">Services</a></li>
<li class="nav-item text-center"><a class="nav-link" href="" style="color:white;">Pricing</a></li>
<li class="nav-item text-center"><a class="nav-link" href="" style="color:white;">About</a></li>
<li class="nav-item text-center"><a class="nav-link" href="" style="color:white;">Contact</a></li>
</ul>
</div>
</nav>
</header>
<!-- Background-Image -->
<container>
<div class="bg-image" style="background-image: url('../MDB5-STANDARD-UI-KIT-Free-3.5.1/img/Accountant.jpg'); height: 89vh;">
<div class="Alert-Box text-center">
<div class="alfa text-center;">
<h5><b>Text Text Text</b></h5>
<div><button id="button1" type="button" class="btn btn-primary">WE ARE HERE FOR YOU!</button></div>
</div>
</div>
</div>
</container>
<!-- Service Links -->
<div class="row no-pad text-center">
<div class="col-lg-3 col-md-3 col-sm-12 d-flex align-items-center justify-content-center" style="border: solid .5px grey;
background-color: lightgrey;
height: 4.5rem;
padding: 0;">
</style>
<button href="" style="border: none; background-color: rgb(210, 210, 210); height: 100%; width: 100%; padding-left: 0mm;">
<b>Service 1</b></button>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 d-flex align-items-center justify-content-center" style="border: solid .5px grey;
height: inherit;
background-color: lightgrey;
height:4.5rem;
padding: 0;">
</style>
<button href="" style="border: none; background-color: rgb(180, 180, 180);height: 100%; width: 100%; padding-left: 0mm;">
<b>Service 2</b></button>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 d-flex align-items-center justify-content-center" style="border: solid .5px grey;
height: inherit;
background-color: lightgrey;
height:4.5rem;
padding: 0;">
</style>
<button href="" style="border: none; background-color: rgb(160, 160, 160); height: 100%; width: 100%; padding-left: 0mm;">
<b>Service 3</b></a>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 d-flex align-items-center justify-content-center"
style="border: solid .5px grey;
height: inherit;
background-color: lightgrey;
height:4.5rem;
padding: 0;"></style>
<button href=""
style="border: none; background-color: rgb(140, 140, 140); height: 100%; width: 100%; padding-left: 0mm;">
<b>Service 4</b></a>
</div>
</div>
<!-- End your project here-->
<!-- MDB -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Custom scripts -->
<script type="text/javascript"></script>
<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</body>
</html>
Without reading through all of your code, you need proper media queries that establish generalized rules and mobile only rules: ie
.container {
/* CODE TO LEFT ALIGN CONTENT + padding */
}
#media only screen and (max-width: 768px) {
.container {
/* CODE TO CENTER CONTENT*/
}
}
That way you can have generalized rules and target specific screen size treshholds.
Hope that makes sense for you.
Been using bootstrap to try and have this section of my web page to display the images properly while shrinking the web page. They stay in line which is good, seems the col / row method with bootstrap really came thru; how can I get these to shrink with the page so that they may stay in formation longer, and look better overall when the web page has shrunk significantly?
the styles
h1 {
font-weight: bold;
font-size: 40px;
background-color: #4aaaa5;
padding: 15px;
color: #ffffff !important;
}
h2 {
font-size: 25px;
Color: #4aaaa5;
padding: 20px 20px 5px 20px;
}
#foot {
border-style: solid;
border-width: 10px 0px 0px 0px;
border-color: #4aaaa5;
padding-top: 20px;
color: #cccccc;
background-color: #666666;
text-align: center;
margin-top: auto;
}
.left {
display: inline-block;
position: relative;
padding: 0px;
margin: 20px;
}
h3{
position: absolute;
bottom: 5px;
font-size: 25px;
background-color: #4aaaa5;
padding: 15px 0px;
width: 100%;
color: #ffffff;
text-align: center;
}
body {
background-image: url("./hotel-wallpaper/hotel-wallpaper.png");
display: flex;
height: 100vh;
flex-direction: column;
}
.main{
display: block;
margin-top: 50px;
margin-bottom: 150px;
padding: 20px 20px 40px 20px;
background-color: #ffffff;
}
.borderr {
border-right: 2px solid #cccccc;
}
hr {
margin: 20px 0px 20px 0;
height: 1px;
border: 0px;
border-top: 3px solid #cccccc;
}
p {
margin-top: 20px;
line-height: 30px;
}
the html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="./assets/reset.css">
<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="./assets/Style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<title>Document</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container col-xl-7 col-lg-8 col-md-9 col-sm-10">
<h1 class="navbar-brand"> My Name </h1>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item borderr">
<a class="nav-link" href="./index.html"> About me <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active borderr">
<a class="nav-link" href="./portfolio.html">Portfolio</a>
</li>
<li class="nav-nav-link">
<a class="nav-link" href="./contact.html">
Contact
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<div class="main container col-xl-7 col-lg-8 col-md-9 col-sm-10">
<h2> Portfolio </h2>
<hr>
<div class="row">
<div class="left">
<img src="https://www.peta.org/wp-content/uploads/2017/05/Kenny-4-602x399.jpg" alt="White Liger" width="100%" height="100%"
style="max-width: 300px; max-height: 200px;">
<h3> liger </h3>
</div>
<div class="left">
<img src="https://twistedsifter.files.wordpress.com/2012/01/savannah_cat_closeup.jpg?w=800&h=507&zoom=2"
alt="Savannah" width="100%" height="100%" style="max-width: 300px; max-height: 200px;">
<h3>Savannah</h3>
</div>
<div class="left">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/XJ-B1_Beefalo.jpg/1920px-XJ-B1_Beefalo.jpg"
alt="Beefalo" width="100%" height="100%" style="max-width: 300px; max-height: 200px;">
<h3> Beefalo </h3>
</div>
<div class="left">
<div class="pic">
<img src="https://shoeuntied.files.wordpress.com/2017/12/rama2.jpg" alt="Cama" width="100%" height="100%" style="max-width: 300px; max-height: 200px;">
<h3>Lama camel</h3>
</div>
</div>
<div class="left">
<img src="https://i0.wp.com/metro.co.uk/wp-content/uploads/2018/11/sei_38307333-0b17.jpg?quality=90&strip=all&zoom=1&resize=644%2C471&ssl=1"
alt="Zonkey" width="100%" height="100%" style="max-width: 300px; max-height: 200px;">
<h3> Zonkey</h3>
</div>
</div>
</div>
</main>
<footer id="foot">
Copyright ©
</footer>
</body>
</html>
Thanks -
use Col-md-(media-dependent-length) for setting up row div length with image width full to 100%
Check Bootstrap Docs
Add class="img-fluid" to the image tag as :
<img class="img-fluid">
This will make images responsive which therefore shrink and expand based on the window size. Also, setting max-height and max-width as per your code will fix the max size.
But while shrinking the window size, it will reduce the size.
Regarding the images, refer this link from the official documentation of bootstrap.
Whenever i Resize my website it keeps getting messed up, and I have tried everything to fix it but i cant figure it out. I tried bootstrap, but didn't quit understand the meaning of it. I am new so advice is appreciated and Thanks for helping
Regard Hussein M.
body {
color: white;
font-family: sans-serif;
background-repeat: round;
background-image: url(Gaming.jpg);
background-position: -430px -100px;
}
h1 {
font-family: sans-serif;
width: 100%;
height: 100%;
margin: 10px;
padding: 0px;
}
ul {
}
table {
padding-left: 50px;
}
body {
min-width: 800px;
position: relative;
font-family: sans-serif;
}
img {
margin: 0;
position: absolute;
top: 500%;
left: 50%;
margin-right: -50%;
border-color: red;
border-width: medium;
}
#menu1 {
float: left;
padding-left: 25px;
}
#menu2 {
float: right;
padding-right: 50px;
}
.nav {
font-size: 17px;
font-family: inherit;
position: relative;
top: -9px;
padding: 9px 0px 50px 0px;
margin-bottom: 0px;
}
.nav ul,li,a{
display: inline;
padding-left: 10px;
text-decoration: none;
color: rgb(22, 239, 239);
}
.main {
position: absolute;
top: 150px;
left: 5px;
}
.h1z1 {
border-radius: 5px;
border: 1px solid #fff;
margin: 1 auto;
padding: 0px ;
margin-top: 60px;
width: 20%;
text-align: left;
}
.h1z1-img {
border-radius: 5px;
display: inline-block;
}
.h1z1-description {
display: inline-block;
margin-left: -25px;
top: px;
}
.Buy {
text-decoration: underline;
margin-left: -8px;
}
.H1Z1head {
margin: -10px;
margin-left: 40px;
}
.go {
color:aqua;
position: fixed;
top: 190px;
left: 380px;
}
.go {
text-decoration: underline;
font-size: 25px;
}
<!DOCTYPE HTML>
<html>
<head>
<!--Start of Zendesk Chat Script-->
<script type="text/javascript">
window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
_.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute("charset","utf-8");
$.src="https://v2.zopim.com/?4aNAebvVIseGLS8uJOO3z9Bsrlfecjl7";z.t=+new Date;$.
type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");
</script>
<!--End of Zendesk Chat Script-->
<title>Gaming Library</title>
<link rel="stylesheet" type="text/css"
href="Stylesheet.css" />
</head>
<body>
<div class="nav">
<ul id="menu1">
<li>Homes</li>
<li>About</li>
<li>Affliates</li>
<li>Donate</li>
</ul>
<ul id="menu2">
<li>Old web</li>
<li>Sign Up</li>
<li>Login</li>
<li>Contact Support</li>
</ul>
</div>
<div class="go">
<h1>Go to feautered games</h1>
</div>
<!-- Næste side
<div class="h1z1">
<div>
<ul>
<h2 class="H1Z1head">H1Z1</h2>
</ul>
<img class="h1z1-img" src="KOTK.jpg" width="250" height="180">
</div>
<div class="h1z1-description">
<ul>
<li>
<p>H1Z1: King of the Kill is a fast-paced shooter in which players compete in large-scale chaotic PvP spectacles of skill, wit and a little luck, where everyone must fight to the death to stand alone at the top of the podium.</p>
<h3 class="Buy">Buy Now only $20.99 </h3>
</li>
</ul>
</div>
</div>
-->
</body>
</html>
Here is a simple example how to get your content responsive with Bootstrap, that you didn't understand. https://jsfiddle.net/qaxhxcb3/1/ (Here u can resize and such)
body {
font-family: 'Montserrat', sans-serif !important;
}
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 14px;
}
.navbar-nav li a:hover {
color: green !important;
}
section h1 {
color: white;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.pink {
background-color: pink;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-default">
<div class="container">
<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="navbar-brand" href="#">Gaming Library</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Homes</li>
<li>About</li>
<li>Donate</li>
<li>Affliates</li>
<li>Support</li>
</ul>
</div>
</div>
</nav>
<!-- First section -->
<section>
<div class="container">
<div class="row">
<div class="col-sm-4 green">
<h1>Lorem ipsum</h1>
</div>
<div class="col-sm-4 red">
<h1>Lorem ipsum</h1>
</div>
<div class="col-sm-4 blue">
<h1>Lorem ipsum</h1>
</div>
</div>
</div>
</section>
<!-- Second section -->
<section>
<div class="container">
<div class="row">
<div class="col-sm-12 pink">
<h1>Lorem ipsum</h1>
</div>
</div>
</div>
</section>
</body>
</html>
As can you see, you put your content inside the class "container", then "row" after than u choose how you will display your content with the grid system. The Bootstrap grid system allows up to 12 columns across the page.
and the grid system has four classes:
xs (for phones)
sm (for tablets)
md (for desktops)
lg (for larger desktops)
and there is also different columns that decide how it will be displayed on the screen. In the example i got three col-sm-4 and it must always add up to 12 for each row class. In the second section i created there is col-sm-12, and that fill up the whole grid. Hope this helps a litte bit.
But, i suggest you read some Bootstrap tutorials from w3school to get a hang of it.
I have used fixed background images in my carousel of website made with bootstrap. The background images are fixed to show the parallaxing effect. But the problem is the when new slides of carouslel move to left the image already present there remains fixed. What I want is that the background image on a div move when the div moves with css transition effects.
I want this type of carousel http://www.w3schools.com/bootstrap/bootstrap_carousel.asp In other words I want the next item to push the background image of active item to the left. At present when the next item slides to the left it opaques the current item's background image.
The code is as following:
var mq = window.matchMedia("(max-width: 320px)");
var mylogo = document.getElementById("mylogo");
if (mq.matches) {
mylogo.innerHTML = "SSR";
}
function changelogo() {
return function() {
if (mq.matches) {
mylogo.innerHTML = "SSR";
} else {
mylogo.innerHTML = "Syco Scientist Records"
}
}
}
window.onresize = changelogo();
if (window.matchMedia("(max-height: 420px)").matches) {
for (var n = 0; n < 5; n++) {
document.getElementsByClassName("item")[n].style.backgroundSize = "100% calc(100% - 140px)";
}
}
.navbar {
min-height: 60px;
border-color: #333;
background-color: #d6d5d5;
margin-bottom: 0;
}
.navbar .navbar-header .navbar-brand {
height: 60px;
padding: 20px 15px;
color: #333;
font-family: Raleway;
font-weight: bold;
font-style: italic;
}
.navbar .navbar-header .navbar-toggle {
margin-top: 14px;
border-color: #d5d5d5;
}
.navbar .navbar-header .navbar-toggle > .icon-bar {
background-color: #333;
}
.navbar ul.navbar-nav {
margin-bottom: 0;
}
.navbar ul.nav > li > a {
height: 60px;
font-size: 14px;
line-height: 20px;
padding: 20px 15px;
color: #333;
text-align: center;
}
.navbar ul.nav > li > a:hover {
color: #333;
background-color: #e7e7e7;
}
.navbar ul.nav > li.active > a,
.navbar ul.nav > li.active:hover > a {
background-color: #333;
color: #d6d5d5;
}
#home {
background-color: #333;
z-index: 6;
}
.carousel {
width: 100%;
height: 100vh;
min-height: 420px;
}
.mobile-carousel {
padding-top: 100px;
height: 100%;
padding-bottom: 40px;
}
.carousel-inner {
height: 100%;
}
.carousel-inner .item {
height: 100%;
-webkit-transition-timing-function: cubic-bezier(.71, -0.06, .36, 1.35);
transition-timing-function: cubic-bezier(.71, -0.06, .36, 1.35);
}
.carousel-inner .item img {
display: block;
width: 100%;
height: 568px;
height: 100%;
}
.carousel-inner .first {
width: 100%;
margin: auto;
background: url(http://2.bp.blogspot.com/_OdCx7pACI9M/TQhDqhnKXgI/AAAAAAAAAH8/kPDpkHpFOnw/s1600/daffy+duck+cartoons+pictures+1.gif) no-repeat fixed;
background-position: center 100px;
background-size: 100% calc(100% - 140px);
background-clip: content-box;
}
.carousel-inner .second {
width: 100%;
margin: auto;
background: url(http://www.allgraphics123.com/graphics/cartoons/cartoons123.gif) no-repeat fixed;
background-position: center 100px;
background-size: 100% calc(100% - 140px);
background-clip: content-box;
}
.carousel-inner .third {
width: 100%;
margin: auto;
background: url(http://pic.1fotonin.com/data/wallpapers/211/WDF_2483525.png) no-repeat fixed;
background-position: center 100px;
background-size: 100% calc(100% - 140px);
background-clip: content-box;
}
.carousel-inner .fourth {
width: 100%;
margin: auto;
background: url(http://pic.1fotonin.com/data/wallpapers/109/WDF_1525343.jpg) no-repeat fixed;
background-position: center 100px;
background-size: 100% calc(100% - 140px);
background-clip: content-box;
}
.carousel-control span {
left: 50%;
position: absolute;
top: 50%;
}
.carousel-control span img {
position: absolute;
top: -36px;
left: -9px;
}
.carousel-indicators {
bottom: 0px;
margin-bottom: 0;
}
.carousel-indicators li {
background-color: #777;
border: 0;
}
.carousel-indicators li.active {
background-color: #dcdbdb;
margin: 1px;
width: 10px;
height: 10px;
}
<!DOCTYPE html>
<html lang="en">
<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>Syco Scientist Records</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#" id="mylogo"> Syco Sientist Records </a>
<button class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>Artists
</li>
<li>Songs
</li>
<li>Beats
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</nav>
<section id="home">
<div id="mycarousel" class="carousel slide">
<div class="container-fluid mobile-carousel">
<div class="carousel-inner">
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0"></li>
<li data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
<li data-target="#mycarousel" data-slide-to="3"></li>
</ol>
<div class="item active first"></div>
<div class="item second"></div>
<div class="item third"></div>
<div class="item fourth"></div>
<a href="#mycarousel" class="left carousel-control" data-slide="prev">
<span aria-hidden="true"><img src="images/left_Arrow.png"></span>
<span class="sr-only">Previous</span>
</a>
<a href="#mycarousel" class="right carousel-control" data-slide="next">
<span aria-hidden="true"><img src="images/right_arrow.png"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
How do I acheive this?
Edit: It seems like the problem is only in firefox browser. Please explain why it works in chrome browser and not in firefox browser.
I tried like this . carousel next item will appear on previous item after that the background image of active item to the left
var mq = window.matchMedia("(max-width: 320px)");
var mylogo = document.getElementById("mylogo");
if (mq.matches) {
mylogo.innerHTML = "SSR";
}
function changelogo() {
return function() {
if (mq.matches) {
mylogo.innerHTML = "SSR";
} else {
mylogo.innerHTML = "Syco Scientist Records"
}
}
}
window.onresize = changelogo();
if (window.matchMedia("(max-height: 420px)").matches) {
for (var n = 0; n < 5; n++) {
document.getElementsByClassName("item")[n].style.backgroundSize = "100% calc(100% - 140px)";
}
}
.navbar {
min-height: 60px;
border-color: #333;
background-color: #d6d5d5;
margin-bottom: 0;
}
.navbar .navbar-header .navbar-brand {
height: 60px;
padding: 20px 15px;
color: #333;
font-family: Raleway;
font-weight: bold;
font-style: italic;
}
.navbar .navbar-header .navbar-toggle {
margin-top: 14px;
border-color: #d5d5d5;
}
.navbar .navbar-header .navbar-toggle > .icon-bar {
background-color: #333;
}
.navbar ul.navbar-nav {
margin-bottom: 0;
}
.navbar ul.nav > li > a {
height: 60px;
font-size: 14px;
line-height: 20px;
padding: 20px 15px;
color: #333;
text-align: center;
}
.navbar ul.nav > li > a:hover {
color: #333;
background-color: #e7e7e7;
}
.navbar ul.nav > li.active > a,
.navbar ul.nav > li.active:hover > a {
background-color: #333;
color: #d6d5d5;
}
#home {
background-color: #333;
z-index: 6;
}
.carousel {
width: 100%;
height: 100vh;
min-height: 420px;
}
.mobile-carousel {
padding-top: 100px;
height: 100%;
padding-bottom: 40px;
}
.carousel-inner {
height: 100%;
}
.carousel-inner .item {
height: 100%;
-webkit-transition-timing-function: cubic-bezier(.71, -0.06, .36, 1.35);
transition-timing-function: cubic-bezier(.71, -0.06, .36, 1.35);
}
.carousel-inner .item img {
display: block;
width: 100%;
height: 568px;
height: 100%;
}
.carousel-inner .first {
width: 100%;
margin: auto;
background: url(http://2.bp.blogspot.com/_OdCx7pACI9M/TQhDqhnKXgI/AAAAAAAAAH8/kPDpkHpFOnw/s1600/daffy+duck+cartoons+pictures+1.gif) no-repeat fixed;
background-position: center 100px;
background-size: 100% calc(100% - 140px);
background-clip: content-box;
backface-visibility: visible !important;
-webkit-backface-visibility: visible !important;
transform: none !important;
-webkit-transform: none !important;
}
.carousel-inner .second {
width: 100%;
margin: auto;
background: url(http://www.allgraphics123.com/graphics/cartoons/cartoons123.gif) no-repeat fixed;
background-position: center 100px;
background-size: 100% calc(100% - 140px);
background-clip: content-box;
backface-visibility: visible !important;
-webkit-backface-visibility: visible !important;
transform: none !important;
-webkit-transform: none !important;
}
.carousel-inner .third {
width: 100%;
margin: auto;
background: url(http://pic.1fotonin.com/data/wallpapers/211/WDF_2483525.png) no-repeat fixed;
background-position: center 100px;
background-size: 100% calc(100% - 140px);
background-clip: content-box;
backface-visibility: visible !important;
-webkit-backface-visibility: visible !important;
transform: none !important;
-webkit-transform: none !important;
}
.carousel-inner .fourth {
width: 100%;
margin: auto;
background: url(http://pic.1fotonin.com/data/wallpapers/109/WDF_1525343.jpg) no-repeat fixed;
background-position: center 100px;
background-size: 100% calc(100% - 140px);
background-clip: content-box;
backface-visibility: visible !important;
-webkit-backface-visibility: visible !important;
transform: none !important;
-webkit-transform: none !important;
}
.carousel-control span {
left: 50%;
position: absolute;
top: 50%;
}
.carousel-control span img {
position: absolute;
top: -36px;
left: -9px;
}
.carousel-indicators {
bottom: 0px;
margin-bottom: 0;
}
.carousel-indicators li {
background-color: #777;
border: 0;
}
.carousel-indicators li.active {
background-color: #dcdbdb;
margin: 1px;
width: 10px;
height: 10px;
}
<!DOCTYPE html>
<html lang="en">
<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>Syco Scientist Records</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#" id="mylogo"> Syco Sientist Records </a>
<button class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>Artists
</li>
<li>Songs
</li>
<li>Beats
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</nav>
<section id="home">
<div id="mycarousel" class="carousel slide">
<div class="container-fluid mobile-carousel">
<div class="carousel-inner">
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0"></li>
<li data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
<li data-target="#mycarousel" data-slide-to="3"></li>
</ol>
<div class="item active first"></div>
<div class="item second"></div>
<div class="item third"></div>
<div class="item fourth"></div>
<a href="#mycarousel" class="left carousel-control" data-slide="prev">
<span aria-hidden="true"><img src="images/left_Arrow.png"></span>
<span class="sr-only">Previous</span>
</a>
<a href="#mycarousel" class="right carousel-control" data-slide="next">
<span aria-hidden="true"><img src="images/right_arrow.png"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
You can just add this css :
<!DOCTYPE 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>Syco Scientist Records</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
div#mycarousel .carousel-inner .item{
padding:0 10%;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#" id="mylogo"> Syco Sientist Records </a>
<button class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>Artists
</li>
<li>Songs
</li>
<li>Beats
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</nav>
<section id="home">
<div id="mycarousel" class="carousel slide">
<div class="container-fluid mobile-carousel">
<div class="carousel-inner">
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0"></li>
<li data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
<li data-target="#mycarousel" data-slide-to="3"></li>
</ol>
<div class="item active first"><img src="http://blog.allisonjoyce.com/wp-content/uploads/2014/02/ablog186.jpg"></div>
<div class="item second"><img src="https://i.ytimg.com/vi/MLqHuAXasTY/maxresdefault.jpg"></div>
<div class="item third"><img src="http://blog.allisonjoyce.com/wp-content/uploads/2014/02/ablog186.jpg"></div>
<div class="item fourth"><img src=""><img src="http://www.monopolycity.com/acimages/ac_beach_21_560.gif"></div>
<a href="#mycarousel" class="left carousel-control" data-slide="prev">
<span aria-hidden="true"><i class="glyphicon glyphicon-chevron-left"></i></span>
</a>
<a href="#mycarousel" class="right carousel-control" data-slide="next">
<span aria-hidden="true"><i class="glyphicon glyphicon-chevron-right"></i></span>
</a>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
But the problem is the when new slides of
carouslel move to left the image already present there remains fixed.
What I want is that the background image on a div move when the div
moves with css transition effects.
In Chrome - Your provided demo is already working as you want.
But in FireFox the issue is seen. The issue is because you are using fixed on the images which will keep it fixed, Removing this worked as required in Firefox too.
background: url(..) no-repeat fixed; // remove fixed
Edit 1: As you said removing fixed will break parallax effect you can do this way.
Add another div inside the .item div and add image to this div. So now we have a inner div with fixed image, But outer div is free to move.
Below is a working sample
var mq = window.matchMedia("(max-width: 320px)");
var mylogo = document.getElementById("mylogo");
if (mq.matches) {
mylogo.innerHTML = "SSR";
}
function changelogo() {
return function() {
if (mq.matches) {
mylogo.innerHTML = "SSR";
} else {
mylogo.innerHTML = "Syco Scientist Records"
}
}
}
window.onresize = changelogo();
if (window.matchMedia("(max-height: 420px)").matches) {
for (var n = 0; n < 5; n++) {
document.getElementsByClassName("item")[n].style.backgroundSize = "100% calc(100% - 140px)";
}
}
.navbar {
min-height: 60px;
border-color: #333;
background-color: #d6d5d5;
margin-bottom: 0;
}
.navbar .navbar-header .navbar-brand {
height: 60px;
padding: 20px 15px;
color: #333;
font-family: Raleway;
font-weight: bold;
font-style: italic;
}
.navbar .navbar-header .navbar-toggle {
margin-top: 14px;
border-color: #d5d5d5;
}
.navbar .navbar-header .navbar-toggle > .icon-bar {
background-color: #333;
}
.navbar ul.navbar-nav {
margin-bottom: 0;
}
.navbar ul.nav > li > a {
height: 60px;
font-size: 14px;
line-height: 20px;
padding: 20px 15px;
color: #333;
text-align: center;
}
.navbar ul.nav > li > a:hover {
color: #333;
background-color: #e7e7e7;
}
.navbar ul.nav > li.active > a,
.navbar ul.nav > li.active:hover > a {
background-color: #333;
color: #d6d5d5;
}
#home {
background-color: #333;
z-index: 6;
}
.carousel {
width: 100%;
height: 100vh;
min-height: 420px;
}
.mobile-carousel {
padding-top: 100px;
height: 100%;
padding-bottom: 40px;
}
.carousel-inner {
height: 100%;
}
.carousel-inner .item, .carousel-inner .item > div {
height: 100%;
-webkit-transition-timing-function: cubic-bezier(.71, -0.06, .36, 1.35);
transition-timing-function: cubic-bezier(.71, -0.06, .36, 1.35);
}
.carousel-inner .item img {
display: block;
width: 100%;
height: 568px;
height: 100%;
}
.carousel-inner .first > div {
width: 100%;
margin: auto;
background: url(http://2.bp.blogspot.com/_OdCx7pACI9M/TQhDqhnKXgI/AAAAAAAAAH8/kPDpkHpFOnw/s1600/daffy+duck+cartoons+pictures+1.gif) no-repeat fixed;
background-position: center 100px;
background-size: 100% calc(100% - 140px);
background-clip: content-box;
}
.carousel-inner .second > div{
width: 100%;
margin: auto;
background: url(http://www.allgraphics123.com/graphics/cartoons/cartoons123.gif) no-repeat fixed;
background-position: center 100px;
background-size: 100% calc(100% - 140px);
background-clip: content-box;
}
.carousel-inner .third > div{
width: 100%;
margin: auto;
background: url(http://pic.1fotonin.com/data/wallpapers/211/WDF_2483525.png) no-repeat fixed;
background-position: center 100px;
background-size: 100% calc(100% - 140px);
background-clip: content-box;
}
.carousel-inner .fourth > div{
width: 100%;
margin: auto;
background: url(http://pic.1fotonin.com/data/wallpapers/109/WDF_1525343.jpg) no-repeat fixed;
background-position: center 100px;
background-size: 100% calc(100% - 140px);
background-clip: content-box;
}
.carousel-control span {
left: 50%;
position: absolute;
top: 50%;
}
.carousel-control span img {
position: absolute;
top: -36px;
left: -9px;
}
.carousel-indicators {
bottom: 0px;
margin-bottom: 0;
}
.carousel-indicators li {
background-color: #777;
border: 0;
}
.carousel-indicators li.active {
background-color: #dcdbdb;
margin: 1px;
width: 10px;
height: 10px;
}
<!DOCTYPE html>
<html lang="en">
<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>Syco Scientist Records</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#" id="mylogo"> Syco Sientist Records </a>
<button class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>Artists
</li>
<li>Songs
</li>
<li>Beats
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</nav>
<section id="home">
<div id="mycarousel" class="carousel slide">
<div class="container-fluid mobile-carousel">
<div class="carousel-inner">
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0"></li>
<li data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
<li data-target="#mycarousel" data-slide-to="3"></li>
</ol>
<div class="item active first"><div></div></div>
<div class="item second"><div></div></div>
<div class="item third"><div></div></div>
<div class="item fourth"><div></div></div>
<a href="#mycarousel" class="left carousel-control" data-slide="prev">
<span aria-hidden="true"><img src="images/left_Arrow.png"></span>
<span class="sr-only">Previous</span>
</a>
<a href="#mycarousel" class="right carousel-control" data-slide="next">
<span aria-hidden="true"><img src="images/right_arrow.png"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
background: url(../img/fav.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
height: 500px;
Set the height to your image like heigth:500px; or you can use padding:50px 0; else it will not display your image on the background until you write anything on that particular div.
Hi Everyone,
I am trying to achieve the affect shown in [original image] where the "browse collection" div and the "request brochure" div line up with the four items above them.
I am trying to achieve the effect by using bootstrap and thought putting the elements in bootstraps "container" class would make everything line up. I haven't managed to get it to work yet though and the right sides don't line up. Can someone suggest a solution please? below is my code. thank you!
body {
font-family: 'Merriweather', serif;
}
/* content Area 2 */
.contentarea2{
background-color: #e3e2da;
width: 100%;
height: 585px;
position: relative;
}
.squares{
padding-top: 120px;
position: relative;
height: 100%;
}
.optionswrapper{
width: 100%;
height: 75px;
bottom: 0;
position: absolute;
color: orange;
}
.option1{
width: 50%;
height: 75px;
background-color: #2a2a2a;
float: left;
}
.option2 {
width: 50%;
height: 75px;
background-color: #9b998f;
float: right;
}
/* buttons */
.collection {
border-radius: 20px;
background-color: Transparent;
padding: 10px;
}
.collection:hover{
border-radius: 20px;
background-color: #3d3d3d;
padding: 10px;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #ffffff;
}
/* animations */
.fade2 {
opacity: 1;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
}
.fade2:hover {
opacity: 0.5;
}
.overlay-portfolio{
padding: 25px;
position: absolute;
z-index:100;
bottom: 15px;
left: 5px;
color: #FFFFFF;
}
<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>container</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="custom.css" rel="stylesheet">
<!-- fonts -->
<link href='http://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="contentarea2">
<div class="container squares">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 triangles">
<img class="img-responsive fade2" src="img/square1.jpg" alt="client 1">
<div class="overlay-portfolio">
<h3>Modern</h3>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 triangles">
<img class="img-responsive fade2" src="img/square2.jpg" alt="client 1">
<div class="overlay-portfolio">
<h3>Contemporary</h3>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 triangles">
<img class="img-responsive fade2" src="img/square3.jpg" alt="client 1">
<div class="overlay-portfolio">
<h3>Minimalist</h3>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 triangles">
<img class="img-responsive fade2" src="img/square4.jpg" alt="client 1">
<div class="overlay-portfolio">
<h3>Classic</h3>
</div>
</div>
</div>
<div class="optionswrapper">
<div class="option1">
</div>
<div class="option2">
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
Remove the inline class' from your squares and add the class col-xs-height col-top
and replace row container with row-same-height
that should put them all into proportion.