I know there are tons of questions similar to mine but the complexities of flexbox are just overwhelming me. What I need seems very simple. I want the body to be equal to the height and width of the viewport. I then want everything inside to scale relative to its parents. However this is not what is happening. I have a <div class=flex-grow-1> and then I have a child <div h-100> nested inside. I would expect the height of the child to match the height of the parent. But... no. Not what is happening at all.
How do I get this image to resize to fit within the pink area? How do I get the height of this row to match the height of the pink area?
body {
height: 100%;
width: 100%;
position: absolute;
}
#pink-banner {
width: 100%;
height: 90%;
background-color: #FFCFC8;
}
.title {
font-family: 'Pacifico', cursive;
font-size: 70px !important;
color: #48555E;
}
.thick-border {
border: solid blue 5px;
}
.header {
display: flex;
justify-content: center;
}
.main-text {
font-family: 'Source Code Pro', monospace;
font-size: 45px;
color: #ffffff;
text-shadow: 2px 2px 5px #4a4a4a;
}
.text-shadow{
text-shadow: 2px 2px 10px #b3b3b3;
}
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<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.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
<title></title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#600&family=Pacifico&display=swap"
rel="stylesheet">
</head>
<body>
<div id="pink-banner" class="d-flex flex-column">
<div class="shadow mb-0 pb-4 bg-light rounded-bottom header">
<h1 class="text-center mb-0 title">Test</h1>
</div>
<div class="row flex-grow-1 thick-border">
<div class="col-sm float-sm-right my-auto justify-content-center text-center">
<h2 class="w-75 float-right main-text">
Words words
</h2>
</div>
<div class="col-sm float-left-sm h-100 thick-border">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" alt="">
</div>
</div>
</div>
</body>
Here is the JSFiddle.
Thank you for any help!
Problem is the image not getting adjusted to space you have for the parent. Give the bootstrap class - img-fluid to the img tag , and it should work fine.
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" class="img-fluid" alt="">
See if giving it solves the problem
Related
In my project, I implement bootstrap and I use it's grid system. I create a row, and then I add a span inside the row which acts as a column (col-12).
This span I use is underlined, and I add <br> elements within the span to separate line. The first line auto-indents to the right more than the other two lines. I attempt to use the tag, however this doesn't work as my text is underlined and it creates an unwanted underline before the text.
Does anybody know the issue? Thank you.
Here is my code:
.mainBodyTxt {
color: white;
position: relative;
font-family: 'Roboto', sans-serif;
font-size: 54px;
z-index: 2;
left: 200px;
}
.container-fluid {
background:lightgrey;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<!-- <div class="col-md-4 col-lg-6">-->
<u style="color: white;"><span class="col-12 mainBodyTxt">I really like <br>
Blue <br>Sandwiches</span> </u>
</div>
</div>
Your layout is giving you a right indentation probably because you're using a <u> outside the <span class='col-12'>
col-x elements should be direct descendants of row elements!
To solve this, you could:
Put the <u> tag inside the span (example 1)
Remove the <u> tag and give span the CSS attribute text-decoration:underline (example 2)
Remove the <span> tag and give u the classes col-12 mainBodyTxt (example 3)
.mainBodyTxt {
color: white;
position: relative;
font-family: 'Roboto', sans-serif;
font-size: 54px;
z-index: 2;
left: 200px;
}
.container-fluid {
background:lightgrey;
}
.mainBodyTxtUnderlined{
color: white;
text-decoration:underline;
position: relative;
font-family: 'Roboto', sans-serif;
font-size: 54px;
z-index: 2;
left: 200px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="" crossorigin="anonymous">
<!-- example 1 -->
<div class="container-fluid">
<div class="row">
<span class="col-12 mainBodyTxt"><u style="color: white;">I really like <br>
Blue <br>Sandwiches</u></span>
</div>
</div>
<br>
<!-- example 2 -->
<div class="container-fluid">
<div class="row">
<span class="col-12 mainBodyTxtUnderlined">I really like <br>
Blue <br>Sandwiches</span>
</div>
</div>
<br>
<!-- example 3 -->
<div class="container-fluid">
<div class="row">
<u class="col-12 mainBodyTxt">I really like <br>
Blue <br>Sandwiches</u>
</div>
</div>
I'm pretty sure that the problem has some simple solution but I am not able to find one yet other than overriding the bootstrap's default behavior which doesn't seem like a good idea to me.
The issue is simple. When I have this:
#main {
margin-top: 100px;
width: 100px;
background-color: black;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div id="main" class="col-lg-12 col-md-12 col-sm-12">
</div>
</div>
</div>
You can see a black stripe on the screen even though there is not content.
After some inspection/investigation I understood that bootstrap has this default style:
// Prevent columns from collapsing when empty
min-height: 1px;
I've read this Bootstrap min height question and several other posts on the topic so it seems that it is intended to have this style.
However, and I guess this is not something uncommon, I have a page with a search functionality and when the user perform a search and select any of the results, a report should be displayed below the search but until this happens I have several stripes, where the content should be displayed at some point and I would like them to not be visible.
I can think of some JS workarounds, but wonder if it's possible to do this with pure CSS? I can always override the default value of min-height to 0 but I guess the bootstrap guys had a good reason to add this, and maybe there's a known way to avoid displaying stripes with the background color when no content is available.
If you do not feel like overriding bootstrap style, then the :empty selector can be used to remove background
#main {
margin-top: 100px;
width: 100px;
background-color: black;
}
#main:empty {
background: none;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div id="main" class="col-lg-12 col-md-12 col-sm-12"></div>
</div>
</div>
And idea is to hide it with a small inset box-shadow but you need to pay attention to transparency:
.main {
margin-top: 100px;
width: 100px;
box-shadow:0 1px 0 inset #fff;
background-color: black;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="main col-lg-12 col-md-12 col-sm-12">
</div>
</div>
</div>
Another idea is to rely on gradient for the background and you can adjust slightly the position:
.main {
margin-top: 100px;
width: 100px;
background: linear-gradient(black,black) 0 1px no-repeat;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="main col-lg-12 col-md-12 col-sm-12">
</div>
</div>
</div>
you can also add a border-top transparent and adjust the background-clip
.main {
margin-top: 100px;
width: 100px;
border-top:1px solid transparent;
background:black;
background-clip:padding-box;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="main col-lg-12 col-md-12 col-sm-12">
</div>
</div>
</div>
Bootstrap by default set min-height:1px; on his cols, so you have to set min-height:0px; to avoid this.
I have following, simple web page. Here I have used vh for image height. But when I resize it to small screen sizes, the size of the background section doesn't resize properly.
Are there any solutions for this problem without remvoing vh.
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
section{
background-color: rgb(200,200,200);
padding: 10px 0px 30px 0px;
}
.edit_image img{
max-height: 80vh;
padding: 30px 30px 30px 30px;
}
</style>
</head>
<body>
<div class="container-full" style="padding: 20px;">
<section>
<div class="row">
<div class="col-md-12 col-sm-12 text-center">
<div class='edit_image' img_id=0><img src='http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/Desktop-Wallpaper-4.jpg'></div>
</div>
</div>
</section>
</div>
</body>
</html>
Wrong (Small screen):
Correct (Normal Web page):
Here is a working solution for you. Basically just added max-width to the css. Also created a fiddle https://jsfiddle.net/9p619qwq/
Please note that the fixed padding (for both the <section> and <img>) is going to cause issues when the page gets smaller as the width and the padding ratios are going to overlap.
section{
background-color: rgb(200,200,200);
padding: 10px 0px 30px 0px;
text-align: center;
}
.edit_image img{
max-height: 80vh;
max-width: 80vw;
padding: 30px;
}
<div class="container-full" style="padding: 20px;">
<section>
<div class="row">
<div class="col-md-12 col-sm-12 text-center">
<div class='edit_image' img_id=0>
<img src='http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/Desktop-Wallpaper-4.jpg'>
</div>
</div>
</div>
</section>
</div>
hey i notice you forgot to add the viewport meta:
<meta name="viewport" content="width=device-width" /> perhaps this will solve your problem
I'm doing a site and I'm starting with the mobile stylesheet first.
But the container-fluid's width isn't the same as the window's width.
What I tried to do to fix this was:
.container-fluid{
width: 105%
}
The problem now is that when I make the window a little smaller, it's still not enough, but when I make the window a little bit bigger, it's TOO MUCH, when I do that a scroll bar appears at the bottom.
100% doesn't work since I already said that it's not the full width of the window.
Here's the entire body from the HTML file:
<body>
<!-- Introduction -->
<div id="introduction" class="container-fluid">
<div class="row">
<header>
<h1> Mosescu Bogdan Gabriel </h1>
<img id="profilepic" src="profilepic.png" />
<h2> Web Designer | Motion Graphics Artist </h2>
</header>
</div>
</div>
<!-- //Introduction// -->
<div id="about" class="container-fluid">
<div class="row">
<h1 id="about-title"> Who I am </h1>
</div>
</div>
</body>
and this is the CSS file:
/*Introduction CSS */
#introduction{
background-color: #542437;
color: white;
margin-top: -21px;
}
#introduction header{
text-align: center;
}
#introduction header h1{
font-family: montserrat;
font-weight: bold;
}
#introduction header h2{
font-family: montserrat;
font-weight: normal;
font-size: 1em;
}
#profilepic{
border-radius: 100%;
width: 150px;
height: 150px;
}
/* //Introduction CSS// */
/* About CSS */
#about{
background-color: #f2f2f2;
color: #1a1a1a;
text-align: center;
margin-top: -24px;
}
#about-title{
font-family: montserrat;
font-weight: bold;
font-size: 2.25em;
border-bottom: solid 1px black;
}
Bootstrap containers are padded.
.container-fluid {
padding-right:15px;
padding-left:15px;
margin-right:auto;
margin-left:auto
}
You need to remove the padding.
.container-fluid {
padding-right:0;
padding-left:0;
margin-right:auto;
margin-left:auto
}
Edit: This is a bare bones example. If you copy this and paste into a new .html document you'll see no padding on the container. If you then remove the container-fluid override you'll see padding.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- put your override styles here - AFTER you include Bootstrap -->
<link href="style-mobile.css" rel="stylesheet">
</head>
<style>
/* override Bootstrap's container */
.container-fluid {
padding-right:0;
padding-left:0;
margin-right:auto;
margin-left:auto
}
</style>
<body>
<div class="container-fluid">
This text hits the left side of the viewport.
</div>
</body>
</html>
Edited HTML example to include new css link
Edit: Bootstrap 4
#Dagrooms commented: "The best way to do this in Bootstrap 4 is to add px-0 to your container-fluid div."
This will remove the padding from the left and right of the container, so that it will touch the sides of the browser viewport.
<div class="container-fluid px-0">
This text hits the left side of the viewport.
</div>
Try this, wrap all the content inside container-fluid with a bootstrap row class. It should work, thanks.
<div id="introduction" class="container-fluid">
<div class="row">
<header>
<h1> Mosescu Bogdan Gabriel </h1>
<img id="profilepic" src="profilepic.png" />
<h2> Web Designer | Motion Graphics Artist </h2>
</header>
</div>
</div>
<div id="about" class="container-fluid">
<div class="row">
<h1 id="about-title"> Who I am </h1>
</div>
</div>
If you just change .container-fluid that won't work because the row and col inside the container all get their own corrections. Try adding full-width to your container-fluid and then adding this:
.full-width { padding-left: 0; padding-right: 0; }
.full-width .row { margin-right: 0; margin-left: 0; }
.full-width .col-md-12 { padding-left: 0; padding-right: 0; }
With Bootstrap 4:
<div class="container-fluid p-0">
<div class="row m-auto">
your content here
</div>
</div>
After a long time of searching and trying out what did it for me in the end was a "w-100" in the "col-xs-12" div tag.
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 w-100">
My content that did not span 100% now with w-100 it does
</div>
</div>
</div>
<div className="container-fluid p-0 m-0 row justify-content-center" >
If you use bootstrap, you can use p-0 and m-0 and they will set the 15px padding from .container-fluid and -15px margin from .row to 0.
I guess there are many ways to do this. in Bootstrap 4, all you have to do is wrap the Container in a Div with Class=Row
<div class="Row">
<header class="container-fluid">
<nav class="navbar navbar-dark bg-secondary">
<h1 class="navbar-brand">Try this out</h1>
</nav>
<header>
</div>
This is the only thing I could get to work, after trying most of these answers.
css:
#mydiv {
margin: 0 -9999rem;
padding: 0.25rem 9999rem;
background-color:#2A2A52
}
html:
<div class="container-fluid px-0">
<div id="mydiv">
<div class="row">
<div class="col-md-12">
<p>YOUR CONTENT HERE</p>
</div>
</div>
</div>
</div>
note: I needed to specify px-0 on the container and wrap the row in a separate div in order for the text to line up horizontally with additional text on the page that was part of a typical container-fluid div.
If none of this works try:
*{margin:0;padding:0}
to remove the padding/margin that might be overlapping on your code. It worked for me, since adding a row wrapping the container-fluid created a horizontal scroll on my page.
When I hover over the li, theres a gap to the left and I can't find anything in developer console that explains it.
.custom-nav>li {
padding: 1.5em 1em;
border-right: 0.1em solid #ccc;
}
.custom-nav>li>a {
padding: 1.5em 1em;
}
.custom-nav>li:hover {
background: #777;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="list-inline custom-nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</div>
Bootstrap makes the list items inline elements, and inline elements are sensitive to white space. Just remove the white space between them:
.custom-nav>li {
padding: 1.5em 1em;
border-right: 0.1em solid #ccc;
}
.custom-nav>li>a {
padding: 1.5em 1em;
}
.custom-nav>li:hover {
background: #777;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="list-inline custom-nav">
<li>Link</li><li>Link</li><li>Link</li>
</ul>
</div>
</div>
</div>
You can also use HTML comments to occupy the white space instead:
<li>Link</li><!--
--><li>Link</li><!--
--><li>Link</li>
Line break between inline elements creates a whitespace. There are several ways to fight it: to set font-size of parent to 0px, to remove line breaks, to comment
line breaks like that:
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="list-inline custom-nav"><!--
--><li>Link</li><!--
--><li>Link</li><!--
--><li>Link</li><!--
--></ul>
</div>
</div>
</div>
Fiddle demo
I would suggest you to add these CSS options (and then go further with editing CSS):
.list-inline > li {
display: block;
float: left;
padding-left: 5px;
padding-right: 5px;
position: relative;
}