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.
Related
I am in the middle of making an about section for my website then I encountered an issue where the section isn't covering the entire width of the page and nothing I found on other posts is working for me. I am using bootstrap5 if that helps.
* {
margin:0px;
padding:0px;
}
.navbar {
background: #131313;
padding: 1rem 8rem;
z-index: 1000;
}
.navbar-nav {
padding-right: 9%;
}
.navbar .navbar-brand {
font-size: 1.4rem;
font-weight: 700;
}
#navbarSupportedContent > ul > li:nth-child(n) > a {
color: #fff;
font-size: 1.1rem;
padding: 0 0.8rem;
}
#navbarSupportedContent > ul > li:nth-child(n) > a:hover {
color: grey;
}
#navbarSupportedContent > button {
outline: none;
background: rgb(197, 190, 190);;
font-weight: 600;
padding: 0.4rem 1.4rem;
border-radius: 30px;
}
#navbarSupportedContent > button:hover {
background: grey;
}
.mid {
height: 80vh;
width: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
text-align: center;
}
.mid video {
width: 100%;
height: 100%;
pointer-events: none;
object-fit: cover;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hero {
position: relative;
}
.hero h2 {
font-weight: bold;
}
.mid .hero p {
width: 55%;
font-size: 1.1rem;
letter-spacing: 0.2px;
padding: 1.1rem;
}
.mid .hero a {
background: rgb(197, 190, 190);;
font-weight: 600;
padding: 1rem 2rem;
border-radius: 30px;
text-decoration: none;
}
.mid .hero a:hover {
background: grey;
}
.about {
background:#000;
}
.about .text {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
margin: auto;
}
.about .text h2 {
color: #F7F5F4;
font-weight: 700;
font-size: 2.7rem;
letter-spacing: 2px;
}
.about .text p {
color: #F7F5F4;
font-weight: 400;
font-size: 1.1rem;
letter-spacing: 0.5px;
}
<!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.0">
<title>Talk Tech Teen Tech</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">Talk Tech Teen Tech</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">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Listen</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Product Specs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Premium Techy</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Contact</a>
</li>
</ul>
<button class="btn btn-outline text-dark" type="submit">Sign Up</button>
</div>
</div>
</nav>
<div class="mid">
<video autoplay muted loop>
<source src="images/mic.mp4" type="video/mp4"><source>
</video>
<div class="hero text-center">
<h2 class="text-light display-4">Talk Tech Teen Tech</h2>
<p class="text-light mx-auto">This podcast talks about tech but through the eyes of grade school teens to get a different approach on the bleeding-edge of technology</p>
<a class= text-dark href="#">Start Listening</a>
</div>
</div>
</header>
<section class="about container py-5 my-5 mx-auto">
<div class="row align-items-center">
<div class="img col-lg-6 col-md-6 col-12 pt-5 pb-5">
<img class="img-fluid" src="images/mic.png">
</div>
<div class="text col-lg-6 col-md-6 col-12 pt-5 pb-5">
<h2>About Us</h2>
<p>Talk Tech Teen Tech is a podcast created by teens, made for the masses. In this podcast we talk about the bleeding edge of technology but through a teens perspective and what we think tech should be about and how companies handle technology. We talk about products from all sorts of companies (Apple, Samsung, OnePlus, Xiomi, Dell, Microsoft etc.). Our goal was to introduce another prespective of technology into the web and also to influence others that you don't need to be 30 to create a tech podcast, and with minimal gear you can create an amazing podcast!</p>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
</body>
</html>
This is the Result
Any help would be greatly appreciated!
Wrapping your container with the section will most likely fix the problem.
Instead of writing this;
<section class="about container py-5 my-5 mx-auto">
try this:
<section class="about py-5 my-5">
<div class="container mx-auto">
You probably have a margin set around your container
Also your about styles should be set to width: 100%
It looks like the container class limits the max-width to be less than the full page width, see here: https://getbootstrap.com/docs/5.0/layout/containers/
Try adding width: 100%; to the about section CSS as you did to the CSS of .mid.
If this does not help, you can try width: 100% !important;, width: 100vw; and width: 100vw !important;.
Elements scale to the width of their parent. Is the element you're trying to draw the background on inside a body container that has some padding?
Below you will find my bootstrap 4 code. On the bottom of the code, you will see "why is this section not bellow the video"
I can't seem to figure out why that code is not in a new section below the code.
I know this is a user issue, I just cant seem to figure out why. Any help would be greatly appreciated!
/* font-family: 'Paytone One', sans-serif;
font-family: 'Questrial', sans-serif; */
.questrial {
font-family: 'Questrial', sans-serif;
}
/* .green-back{
background: rgb(215,255,206);
background: linear-gradient(90deg, rgba(215,255,206,1) 5%, rgba(186,202,224,1) 100%);
height: 95vh;
margin: 1em;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
} */
.navbar-brand {
padding-left: 2%;
}
.logoImg {
height: 2em;
width: auto;
}
video {
/* width: 100% !important;
height: auto !important; */
position: fixed;
top: 50%;
left: 50%;
width: 100vw;
height: auto;
z-index: -100;
transform: translate(-50%, -50%);
}
.navbar {
margin-top: 3vh;
margin: 1em;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 1px solid rgb(230, 230, 230);
}
.space {
margin-left: 2%;
margin-right: 2%;
}
.headBtn {
height: 70%;
margin-top: 2%;
margin-right: 1em;
}
.signUpBtn,
.signInBtn {
margin-right: 30px;
}
#signIn {
background-color: #d7d7d7;
border: 1px solid #7b7b7b;
font: bold;
}
#signUp {
background-color: rgb(145, 145, 145);
border: 1px solid #7b7b7b;
color: white;
}
#media (min-width: 768px) {
.navbar-brand.abs {
position: absolute;
width: 100%;
left: 0;
text-align: center;
}
}
.headingIntro {
font-size: 2vw;
color: #79787A;
padding-top: 10vh;
}
.headingMain {
font-size: 5vw;
color: rgb(65, 65, 65);
}
.headingContent {
font-size: 2vw;
color: rgb(65, 65, 65);
}
.btn-primary {
background-color: rgb(60, 60, 60);
}
.heroButton {
margin-top: 10%;
width: 20vw;
}
.heroButton:hover {
background-color: green;
}
.charityText {
padding-top: 1%;
}
.heroTextBack {
background-color: rgb(245, 245, 245, .8);
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#media (max-width: 576px) {
.heroButton {
margin-top: 10%;
width: 20vw;
}
.headingIntro {
font-size: 4vw;
color: #79787A;
padding-top: 4vh;
}
.headingMain {
font-size: 7vw;
color: rgb(65, 65, 65);
}
.headingContent {
font-size: 4vw;
color: rgb(65, 65, 65);
}
.btn-primary {
background-color: rgb(60, 60, 60);
}
.charityText {
padding-top: 1%;
}
.navbar-brand {
padding-left: 0%;
}
/* .buttonGrp{
display: inline;
} */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>meetlete: meet your favorite atheletes!</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Paytone+One&family=Questrial&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="./assets/style.css">
</head>
<body>
<div class="conatiner green-back">
<div class="row">
<div class="col-12">
<video playsinline autoplay muted loop>
<source src="https://meetlete.s3-us-west-1.amazonaws.com/FP000091HD01.mp4" type="video/mp4">
<source src="https://meetlete.s3-us-west-1.amazonaws.com/FP000091HD01.mp4" type="video/ogg">
Your browser does not support the video tag.
</video>
<!-- <video playsinline autoplay muted loop
src="https://meetlete.s3-us-west-1.amazonaws.com/FP000091HD01.mp4">
</video> -->
</div>
</div>
<div class="row">
<div class="col-12">
<!-- Navbear -->
<nav class="navbar navbar-light navbar-expand-md bg-light justify-content-center questrial">
<a href="./index.html" class="navbar-brand d-flex w-50 mr-auto">
<img src="./assets/images/meetlete.png" class="logoImg">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
<span class="navbar-toggler-icon">
</span>
</button>
<div class="navbar-collapse collapse w-100" id="collapsingNavbar3">
<ul class="navbar-nav w-100 justify-content-center">
<li class="nav-item active">
<a class="nav-link" href="#">Learn
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact
</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto w-100 justify-content-end">
<li class="nav-item headBtn">
<button class="nav-link" id="signIn" href="#">Sign In
</button>
</li>
<li class="space headBtn">
</li>
<li class="nav-item headBtn">
<button class="nav-link" id="signUp" href="#">Sign Up
</button>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="container heroTextBack">
<div class="row">
<div class="col-12">
<h2 class="text-center headingIntro questrial">Introducing Meetlete (beta)</h2>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<h1 class='headingMain questrial'>Meet your favorite athlete!</h1>
</div>
</div>
<div class="row">
<div class="col-1">
</div>
<div class="col-10 text-center questrial">
<h3 class="headingContent">As a fan, how many opportunities do you get to have a real conversation with one of your favorite players or sports personalities?</h3>
</div>
</div>
<div class="row questrial">
<div class="col-3"></div>
<div class="col-3 text-center buttonGrp">
<button type="button" class="btn btn-primary heroButton">Sign Up</button>
</div>
<div class="col-3 text-center buttonGrp">
<button type="button" class="btn btn-outline-success heroButton">Talent</button>
</div>
</div>
<div class="row questrial">
<div class="col-12">
<p class='text-center charityText'>A porition of each Meetlete goes to charity!</p>
</div>
</div>
<div class="row">
<div class="col-12">
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">Why is this not bellow the video</div>
</div>
</div>
<!-- <nav class="navbar navbar-expand-md navbar-light bg-light myFont">
<a href="#" class="navbar-brand">
<img src="./assets/images/meetlete-logo-text.png" height="40px" alt="CoolBrand">
</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
</div>
</div>
</nav> -->
<!-- bootstrap js file-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous">
</script>
</body>
</html>
The reason is bcuz yow video tag has a position fixed which means that it does not belongs to the dom
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>
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.
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.