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.
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.
I'm trying to recreate a card just like this one from WIX using bootstrap.
I have 2 problems:
Only at full screen the card touches the contact bar, when I reduce the size the card starts floating like this. (EDIT: solved this problem)
I would like the card to become vertical (text below photo) when the screen becomes to small. (EDIT: solved this problem)
UPDATE:
I still have a problem with responsiveness: when the screen becomes smaller my text doesn't fit nicely and the photo of my head is cut in half on the top like this on in Ipad and like this on a phone.
This is how a part of my html and css looks like:
.grid-container{
display: grid;
grid-template-rows: 580px 75px 405px;
width: 100vw;
}
.grid-item-contact{
background-color: #efefef;
display: grid;
grid-template-columns: 25% 50% 25%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- main container -->
<div class = "grid-container">
<!-- card with photo -->
<div class="grid-item-card">
<div class="card mb-3 mx-auto border-0" style="max-width: 50vw; margin-top: 10vh; margin-bottom: 0px; border-radius:5px 5px 0px 0px;">
<div class="row no-gutters">
<div class="col">
<img src="cat.jpg" class="card-img" alt="...">
</div>
<div class="col">
<div class="card-body">
<h5 class="card-title">Quinten KJ</h5>
<h6 class="card-text">Master student financial engineering</h6>
<p class="card-text">This is text</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
<!--contact bar -->
<div class="grid-item-contact">
<div class = "grid-item-contact-1"></div>
<div class = "grid-item-contact-2" style="background-color: #636769; text-align: center; border-radius:0px 0px 5px 5px;">
<img src="linkedin-6-32.png" style="margin-top: 20px;">
<img src="facebook-3-32.png" style="margin-top: 20px; margin-left: 20px;">
<img src="mail-32.png" style="margin-top: 20px; margin-left: 20px;">
</div>
<div class = "grid-item-contact-3"></div>
</div>
Please try this..
later i add the description for all..
Iam using col-md-6 instead of col for medium and small devices alignment. And order property use to change order of card text and card image. Some media queries(640px and 480px) used to align correct grid-container and also add some padding to grid-item-hello for small devices.
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;700&display=swap');
/*--body--*/
body {
overflow-x: hidden;
font-family: 'Open Sans', sans-serif;
background-color: #efefef;
background-repeat:no-repeat;
}
/*--navbar--*/
.navbar{
text-transform: uppercase;
font-weight: 700;
font-size: .9rem;
letter-spacing: .1rem;
background: rgba(0, 0, 0, .6)!important;
}
.navbar-nav li {
padding-right: .7rem;
}
.navbar-dark .navbar-nav .nav-link {
color: white;
}
.navbar-dark .navbar-nav .nav-link:hover {
color: #bfbfbf;
}
/*-- slider --*/
.carousel-item {
height: 100vh;
width: 100vw;
min-height: 350px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.carousel-caption{
position: absolute;
top: 68%;
}
.carousel-caption h2{
font-size: 2rem;
letter-spacing: .1rem;
text-shadow: .1rem .1rem .5rem black;
padding-bottom: 1rem;
}
.carousel-caption h5{
font-size: 1.5rem;
letter-spacing: .1rem;
text-shadow: .1rem .1rem .3rem black;
padding-bottom: 1.3rem;
}
.btn-lg{
border-width: medium;
font-size: 1.1rem;
}
/*--about--*/
.grid-container{
display: grid;
grid-template-rows: 520px 60px 310px;
width: 100vw;
}
.grid-item-card{
align-self: end;
}
.grid-item-contact{
background-color: #efefef;
display: grid;
/*--grid-template-columns: 490px 940px 490px;--*/
grid-template-columns: 15% 70% 25%;
}
.grid-item-hello{
background-color: #efefef;
text-align: center;
color: #636769;
}
.helloTitle{
margin-top: 90px;
margin-bottom: 20px;
}
.helloText{
margin-bottom: 10px;
}
#media only screen and (max-width: 640px) {
.grid-item-hello{
padding:0 20px;
}
.grid-container{
grid-template-rows: 680px 60px 300px;
}
}
#media only screen and (max-width: 480px) {
.grid-container{
grid-template-rows: 580px 60px 400px;
}
}
<!-- Based on Wix template: https://nl.wix.com/website-template/view/html/1893?siteId=31c9cc64-4739-437a-bf99-8a87fae88840&metaSiteId=7df46866-884d-4ed2-a9ea-b6f80df2ebaf&originUrl=https%3A%2F%2Fnl.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fportfolio-cv -->
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet">
<title>About</title>
</head>
<body style="background-image: url(https://images.unsplash.com/photo-1449157291145-7efd050a4d0e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80);">
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
<div class="container">
<a class="navbar-brand" href="index.html">Quinten KJ</a>
<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">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cv.html">CV</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html" style="border-style: solid; border-width: medium; border-radius: 5px; margin-top: -4px;">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- main container -->
<div class="grid-container">
<!-- card with photo -->
<div class="grid-item-card">
<div class="card mx-auto border-0" style="max-width: 70vw; margin-top: 10vh; margin-bottom: 0px; border-radius:5px 5px 0px 0px;">
<div class="row">
<div class="col-lg-6 order-md-0 order-1 px-md-0">
<img src="https://images.unsplash.com/photo-1537815749002-de6a533c64db?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1445&q=80" class="card-img" alt="...">
</div>
<div class="col-lg-6 order-md-1 order-0 px-md-0">
<div class="card-body">
<h5 class="card-title">Quinten KJ</h5>
<h6 class="card-text">Master student financial engineering</h6>
<p class="card-text">This is text</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
<!--contact bar -->
<div class="grid-item-contact">
<div class="grid-item-contact-1"></div>
<div class="grid-item-contact-2" style="background-color: #636769; text-align: center; border-radius:0px 0px 5px 5px;">
<img src="https://image.flaticon.com/icons/svg/2111/2111723.svg" style="margin-top: 20px; height:36px;; width: 36px;">
<img src="https://image.flaticon.com/icons/svg/1051/1051360.svg" style="margin-top: 20px; margin-left: 20px; height:36px;; width: 36px;">
<img src="https://image.flaticon.com/icons/svg/1946/1946426.svg" style="margin-top: 20px; margin-left: 20px; height:36px;; width: 36px;">
</div>
<div class="grid-item-contact-3"></div>
</div>
<!--Hello-->
<div class="grid-item-hello">
<h3 class="helloTitle">Hello, I'm Quinten!</h3>
<p class="helloText">"I'm a greater believer in luck, and I find the harder I work the more I have of it" </p>
<p class="helloText">- Thomas Jefferson -</p>
<p class="helloText"></p>
<p class="helloText"></p>
<p class="helloText">I'm a master student financial engineering at the University of Antwerp.</p>
<p class="helloText"></p>
<p class="helloText"></p>
</div>
<!-- end main container-->
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
This is only my second time using Bootstrap in a project. I'm not sure what is causing my page to not be properly responsive. When resizing the view port content shifts out of the containers. I believe it is being caused by improper usage of the Bootstrap col-* and rows classes. Below is the HTML and CSS code.
EDIT: I have recently gone trough and refactored some of the code and found that I did not put rows inside of columns properly.
.wrapper {
position: relative;
padding: 0 15px;
}
.responsive-image {
width: 100%;
height: auto;
}
#statement {
position: absolute;
text-align: center;
top: 280px;
left: 300px;
font-size: 50px;
font-weight: bold;
color: #ffffff;
}
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
top: -215px;
position: relative;
max-width: 96.7vw;
height: 200px;
left: 30px;
top: -340px;
padding-bottom: 50px;
}
a {
color: #ffffff;
}
.search-text {
padding-left: 10px;
float: right;
}
.glyphicon-search {
padding-top: 10px;
padding-left: 30px;
color: black;
}
.search-bar-container {
padding-top: 10px;
background-color: red;
top: -390px;
max-width: 96.7vw;
height: 70px;
left: 31px;
}
.row-eq-height>[class*='col-'] {
position: relative;
display: flex;
flex-direction: column;
text-align: center;
padding-top: 50px;
font-size: 25px;
font-style: italic;
font-weight: bold;
}
.translucent>div {
background-color: rgba(0, 0, 0, 0.5);
border: solid 1px #ffffff;
}
.nav-item>a {
color: #000000;
font-weight: bold;
}
.nav-wrapper {
position: absolute;
right: 0;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mock Up</title>
<!-- Bootstrap Link -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="nav-wrapper">
<nav class="navbar navbar-static-top">
<!--Navbar-->
<div class="row">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<!-- Collapsing Hamburger Buttons for mobile -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--Menu Items-->
<div class="collapse navbar-collapse navbar-right" id="mainNavBar">
<ul class="nav navbar-nav">
<li class="nav-item">
HOME
</li>
<li class="nav-item">
SHOWROOM
</li>
<li class="nav-item">
SERVICES
</li>
<li class="nav-item">
INFO
</li>
<li class="nav-item">
PHOTO GALLERY
</li>
<li class="nav-item">
CONTACT
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<div class="wrapper">
<img class="responsive-image" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2YmRfVmlUaDdZU1E=w1366-h653-iv1" alt="road in the sunset banner">
</div>
<div class="row row-eq-height translucent">
<div class="col-lg-3 col-xs-12 box-color">NEW <br>INVENTORY</div>
<div class="col-lg-3 col-xs-12 box-color">PRE OWNED <br>INVENTORY</div>
<div class="col-lg-3 col-xs-12 box-color">CUSTOMER <br>FABRICATION</div>
<div class="col-lg-3 col-xs-12 box-color">SERVICE <br>DEPARTMENT</div>
</div>
<div class="row">
<div class="col-xs-12 search-bar-container">
<form class="form-inline">
<div class="form-group">
<label><span class="search-text glyphicon glyphicon-search" aria-hidden="true">QUICK SEARCH</span></label>
<input type="text" class="form-control" id="search-manufacturers" placeholder="(All Manufacturers)">
</div>
</form>
</div>
</div>
<script src="https://use.fontawesome.com/bd8b80bd9d.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Refer this Fiddle if you are looking for something like this. In this Fiddle I have updated your code with some structure and CSS changes.
I have tried maxheught/width, display option, etc, I have also added .img responsive class to image. Its everything ok with width, but Iam failing to get desired height, to match div proportions. Here is my HTML.
<!DOCTYPE html>
<html lang="UA-ru">
<head>
<title> Portfolio</title>
<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">
<link rel="stylesheet" href="CSS/custom.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="rowfirst" class="container-fluid">
<div class="row">
<div id="elementUnique" class="1element col-lg-6"><div></div><img id="img1"; class="img-responsive" src="https://c1.staticflickr.com/5/4162/34184651430_22e9d95b50_z.jpg"></div>
<div id="element1" class="1element col-lg-4"><div></div><img id="img1"; class="img-responsive" src="img/1img.JPG"></div>
<div id="element1" class="1element col-lg-4"><div></div><img id="img1"; class="img-responsive" src="img/1img.JPG"></div>
<div id="element1" class="1element col-lg-4"><div></div><img id="img1"; class="img-responsive" src="img/1img.JPG"></div>
</div>
<div class="row">
<div id="elementUnique" class="1element col-lg-6"><div></div><img id="img1"; class="img-responsive" src="img/2img.jpg"></div>
<div id="element1" class="1element col-lg-4"><div></div><img id="img1"; class="img-responsive" src="img/1img.JPG"></div>
<div id="element1" class="1element col-lg-4"><div></div><img id="img1"; class="img-responsive" src="img/1img.JPG"></div>
<div id="element1" class="1element col-lg-4"><div></div><img id="img1"; class="img-responsive" src="img/1img.JPG"></div>
</div>
</div>
<nav id="mynavigation" class="navbar navbar-inverse navbar-fixed-bottom">
<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="navbar-brand" href="#">Portfolio</a></div>
<div class="collapse navbar-collapse" id="myNavbar">
<div id="navbarul"><ul class=" nav navbar-nav">
<li><a id="navbar">Web</a></li>
<li><a id="navbar">Video</a></li>
<li><a id="navbar">Photo</a></li>
</ul>
</div></div></div></nav>
</body>
</html>
And CSS:
#navbarul{
width: 20%;
margin: auto;
display: block;
}
#navbar{
display: block;
font-family: "Abel", sans sans-serif;
text-transform: uppercase;
font-size: 2em;
cursor: pointer;
}
#element1{
display: block;
width: 22%;
height: 460px;
padding: 0;
border: 2px solid blue;
margin: 0;
}
#elementUnique{
display: inline-block;
width: 33%;
height: 460px;
padding: 0;
border: 2px solid blue;
margin: 0;
}
#element1:hover {
outline: 5px solid rgb(255,255,77);
outline-offset: -5px;
}
#elementUnique:hover{
outline: solid rgb(255, 255, 77) 5px;
outline-offset: -5px;
}
#img1{
max-height:100%;
padding: 0;
margin: 0;
}
}
#img1:hover {
outline: solid rgb(255, 255, 77) 5px;
outline-offset: -5px;
}
#myNavbar{
height: 15%;
display: no
}
#rowfirst{
width: 100%;
height: 100%;
margin: 0;
}
html {
height: 100%;
}
body {
height: 100%;
Do this
img{
height:100%;
object-fit:cover;
}
This will make the img fully fit the div and since the img might be of a different aspect-ratio to the div it won't be stretched but scaled (with certain parts being cut off) due to object-fit:cover.
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">