I finally figured out how to make the jumbotron image fit the entire width and HEIGHT of a user's browser:
.jumbotron {
background: url(images/yelllow.png) no-repeat center;
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
}
Now, when I add another section div class = row, the columns to not show up underneath the jumbotron image. Instead, they show up on the top of the page and overlap the jumbotron text. JS Fiddle: http://jsfiddle.net/srLngrsx/
I isolated each CSS property above and found out that position: fixed is causing this to happen. When I remove position: fixed the columns line up underneath like they should, but the jumbotron image is now a smaller size, not fitting to the screen.
Can anybody identify or explain why exactly position: fixed is causing the other elements to not position properly? How can I make it so the jumbotron header fits the width AND HEIGHT of the page, and the rest of the content shows up below?
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="portfolio.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>test</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmo</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>
Is this what you need?
.jumbotron {
background: url(images/yelllow.png) no-repeat center;
top: 0;
left: 0;
min-width: 100%;
min-height: 100vh;
}
Fiddle
http://jsfiddle.net/srLngrsx/3/
Move your jumbotron in the container and give it a row and full-width column.
http://jsfiddle.net/srLngrsx/1/
<div class="container">
<div class="row">
<div class="col-xs-12 jumbotron text-center">
<h1>test</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmo</p>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
...
when you use position:fixed for any element , you have to use margin-top for the elements after it . in this example you have to use margin-top for the class row . because the elements after the fixed positioned element will start from the top position of the fixed element.
.jumbotron {
background: url(images/yelllow.png) no-repeat center;
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
}
.row {
margin-top:300px;
}
http://jsfiddle.net/srLngrsx/4/
Related
I have a design which I am following to create my front end. I am having difficulty in spacing the divs.
My design looks like:
I am trying to create the same in angular
code
<div fxLayout="row" fxLayoutAlign="space-bewteen start" fxLayoutGap="12px" class="side_start">
<div fxFlex="12" class="second_bar">
Side
</div>
<div fxFlex="88" fxLayout="column" fxLayoutAlign="space-bewteen" fxLayoutGap="12px">
<div ngClass=third_bar_1>
<div fxLayout="row" fxLayoutAlign="space-bewteen start" fxLayoutGap="12px">
<div fxFlex="8" class="zone">
Zone Thermal Comfort
</div>
<div fxFlex="5" class="temp">
<p>TEMP</p>
<p>37 deg</p>
</div>
</div>
</div>
<div class=third_bar_2>
second
</div>
</div>
</div>
.css
.third_bar_1{
border:1px solid red;
background-color: white;
height: 60px;
}
.zone {
/* font-color: #5d6d88; */
background-color: #f1cd86;
text-align: center;
height: 71%;
}
.temp {
background-color: #73d9fa
}
.third_bar_2{
border:1px solid red;
height: calc(100vh - 355px);
}
and it looks like:
how to create the divs as shown in the image with different divs horizontally and vertically.
If you are trying to do that using pure css that would be a bit difficult. You can do it using bootstrap which is css frmaework very easily. Just read some tutorials about bootstrap grid system you will be able to do this easily. Here is an example.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Grid</h1>
<p>This example demonstrates a 50%/50% split on small, medium and large devices. On extra small devices, it will stack (100% width).</p>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="col-sm-6" style="background-color:pink;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.
</div>
</div>
</div>
</body>
</html>
You need to use flexbox to align it with the desired design.
You need first write the markup keepin in mind the flexbox.
body{
margin:0px;
}
.menu {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #efefef;
}
.menu .left {
display: flex;
align-items: center;
}
.menu .left .left-left{
display: flex;
align-items: center;
}
<div class="menu">
<div class="left">
<div class="left-left">
<div class="first">
<p>Zonal thermal Comfort</p>
</div>
<div class="second">
<div class="up">
<p>Temp</p>
</div>
<div class="down">
<p>37 Deg</p>
</div>
</div>
<div class="fourth">
<p>48</p>
</div>
</div>
<div class="left-right">
<img src="https://via.placeholder.com/93x45" alt="">
</div>
</div>
<div class="right">
<p>otherstuff</p>
</div>
</div>
<div class="menu">
</div>
Now this is a very basic implementation of flexbox. The properties that you require to implement this design are
align-items : This will align you align items vertically
justify-content : This will align you align items horizontally
flex-direction : This will change your main-axis from horizontal to vertical according to the value
Read flexbox in detail, in will help you develop 1-D layouts. enter link description here
I have this set up on desktop with a headline on the left and an image on the right. When I collapse the browser less than 880px, I want the image to be centered underneath the headline.
I am struggling with getting the image centered & underneath the headline.
I am fairly new to html/css so any tips would be greatly appreciated.
Fiddle: https://jsfiddle.net/o7k5qgne/1/
<section class="hero">
<div class="hero-inner">
<h1>Lorem ipsum dolor<span class="blue-dot">.</span></h1>
</div>
<div class="split split-right">
<img src="https://vignette.wikia.nocookie.net/undertale-rho/images/5/5f/Placeholder.jpg/revision/latest?cb=20180213155916" alt="working" class="right-image">
</div>
</section>
<div class="clients">
<h2>Lorem ipsum dolor & sit amet</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
</p>
</div>
Try using CSS media Query to detect where (breakpoint) you want the DIVs to stack. See the example below and adjust as needed.
.myDiv {
height: 150px;
width: 150px;
display: inline-block;
background-color: orange;
margin-bottom: 25px;
}
/* The block of code below tells the browsers what to do on a screen that has a width of 320px or less */
#media screen and (max-width: 320px) {
.myDiv {
width: 90%;
display: block; /* Stops it from floating */
margin: auto; /* Ensures that it is centered */
margin-bottom: 25px; /* Space between the stacked elements */
}
}
<div class="myDiv"></div>
<div class="myDiv"></div>
More on CSS Media Query
See it here in action. Resize the browser to see how it works.
Problem is with your css. Here I edited your css just to the once that need to make the image and headline responsive.
[https://jsfiddle.net/ss123/a7q834sL/1/][1]
Styling like you are expecting can simply be achieved by using css flex box. To do that you must first put the content inside a container and make it display:flex. Then you can use the flex styling for the content inside the container.
flex-direction:column will stack the content over. flex-direction:row will put the content in a single row. jstify-content:space-venly will justify the content elements with exactly even spaces between them.
You are on the right track here with the media queries you have in place. I would avoid using the absolute positioning on the image, it will get set exactly where you tell it to and not be very flexible. Centering can be done in several ways like with flex box as others have mentioned, or even just throwing a text-align: center on its' parent element. With your media queries on mobile, be weary of padding or vh/vw that you have in place from desktop, you may not want those still in place when you get to a small screen size; looks like in your example you would want to remove padding and the vh on mobile. Also, to help your CSS be a bit easier to manage I would recommend putting your media queries right inside the class to avoid repeating a lot of code, like so:
.hero-inner {
/* Flexbox Stuff */
display: flex;
align-items: center;
/* Text styles */
text-align: left;
width: 50px;
#media only screen and (max-width: 880px) {
align-items: center;
justify-content: center;
text-align: center;
width: 80vw;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12 ">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 pull-left">
<img src="https://vignette.wikia.nocookie.net/undertale-rho/images/5/5f/Placeholder.jpg/revision/latest?cb=20180213155916" alt="working" class="right-image">
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 pull-right">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
</p>
</div>
</div>
</body>
</html>
I am creating a portfolio page. I am using Bulma. The thing I want is to place the background image and text inline.
Here's the code:
<section class="hero is-halfheight upload-descr" style = "height: 37em">
<div class="hero-body">
<div class="container">
<div class="clearfix"></div>
<hr class = "rm-descr-bar" style = "float: left;"></hr>
<div class="clearfix"></div>
<h1 class = "title">
Loren Ipsum
</h1>
<div class="content rm-has-medium-size">
<p class = "upload-descr-exp" aria-live = "polite" aria-atomic = "true">Lorem ipsum dolor sit amet, consectetur adipiscing<br />elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />Ut enim ad minim veniam, quis nostrud exercitation<br />ullamco laboris nisi ut aliquip ex ea<br />ea commodo consequat. Duis aute irure dolor.</p>
</div>
</div>
</div>
</section>
The thing I want is background image shifted at right in <div class = "container">. However it gets cropped. I messed up with height and width of the container. This affected the text inside the container i.e. it was not vertically centered anymore. Please help.
I want to achieve this:
I tried:
<section class="hero is-halfheight upload-descr section" style = "height: 37em">
<div class="hero-body container" style = "background: url('/img/pic.png') no-repeat right; background-size: contain;">
<div class="container">
<div class="clearfix"></div>
<hr class = "rm-descr-bar" style = "float: left;"></hr>
<div class="clearfix"></div>
<h1 class = "title">
Loren Ipsum
</h1>
<div class="content rm-has-medium-size">
<p class = "upload-descr-exp" aria-live = "polite" aria-atomic = "true">Lorem ipsum dolor sit amet, consectetur adipiscing<br />elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />Ut enim ad minim veniam, quis nostrud exercitation<br />ullamco laboris nisi ut aliquip ex ea<br />ea commodo consequat. Duis aute irure dolor.</p>
</div>
</div>
</div>
</section>
I achieved the thing I wanted after trying above code. However, on decreasing viewport size, background image and text appears on above other maybe they got vertical and horizontal centered. Please help me. How can I place background image and text next to each other without any bugs?
Here's the bug:
Idea
Left side text and right side the image
Give all the same background color
Example
(The image ratio is about 4:3. Change CSS according to your needs.)
.mySection {
background-color: #F93122;
color: white;
border: 1px solid white;
}
.myHero {
padding: 50px 0 50px 75px;
}
.myHero .hr {
display: inline-block;
width: 100px;
height: 15px;
background: white;
border-radius: 20px;
margin-bottom: 15px;
}
.myHero h1 {
font-size: 50px
}
#media(max-width: 768px) {
.myHero {
padding: 50px !important;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<section class="mySection">
<div class="columns is-vcentered">
<div class="column is-5-tablet is-5-desktop">
<div class="myHero">
<div class="hr"></div>
<h1>Loren Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta a et ipsa voluptates in velit rem minus nihil, blanditiis nisi, quidem tempore quos qui quas. Blanditiis hic dolorem fugiat? Blanditiis!</p>
</div>
</div>
<div class="column is-7-tablet is-7-desktop">
<figure class="image is4by3">
<img src="http://i64.tinypic.com/29gedzq.png">
</figure>
</div>
</div>
</section>
Hint
Bulma#image
You used two times container class as per my thought that is why you getting this bug. Are you want change background color red to and img ?
I'm trying to center 3 boxes, with abit of space (gutter?) between them and also space from corner of page.
I tried class="col-sm-2 col-md-offset-1" (col-sm-2 to make them smaller, and offset 1 for the gap), but its not really centered to the middle of the page, and also on mobile each col is "streched" to the corners and i dont want that.
any ideas?
thanks!
You need text-center
.grid3 >div{
height: 200px;
background: rgba(0,0,0,.4);
float: none;
display: inline-block;
background-clip: content-box
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row text-center grid3">
<div class="col-xs-3">.col-md-4</div>
<div class="col-xs-3">.col-md-4</div>
<div class="col-xs-3">.col-md-4</div>
</div>
You can wrap your content in a .well. Then the padding of the columns will be your gutters. Also, you cannot use .col-sm-3 if you want 3 columns to be centered.. you would have to use .col-sm-2 or .col-sm-4
<div class="col-sm-4">
<div class="well">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
http://www.bootply.com/CUbF8SQg8q
I have an image as a background with a div overlaying it. I'm trying to find ways to make it responsive and cover more of the picture as it gets smaller. I'm tried the below but I don't think even the column classes are doing what they are supposed to do.
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12"
<div id="test-container">
<img src="images/productsplash.jpg" alt="Home Page" class="img-responsive"/>
<div class="row">
<div class="col-lg-4 col-md-9 col-xs-12" id="products-container">
<div class="op-container col-lg-12 col-md-12"><h1>OUR PRODUCTS</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisiut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu</p>
</div>
<div class="col-lg-6 col-md-6" id="button-good"><p>Good <br>Products</p></div>
<div class="col-lg-6 col-md-6" id="button-bad"><p>Bad <br>Products</p></div>
</div>
</div>
</div>
</div>
#test-container {
position:relative;
display:inline;
}
#products-container {
position:absolute;
min-width:30%;
max-width:40%;
top:35%;
left:55%;
background-color: blue; /* currently missing opacity css*/
}
I had a thought of using media query to override the css for #products container. Couldn't get it to work. I essentially want it to cover half the div at something in the tablet range size and then overlay the picture completely.
Any thoughts on how to tackle?
You might putting the image as a background-image to a div, and setting the background-size to cover or contain.
The div should have the same classes as the covering div eg: col-lg-4 col-md-9 col-xs-12
Something like
HTML
<div class="col-lg-4 col-md-9 col-xs-12 responsive-image"
style="background-image: url(/dynamic/image/url.png)">
</div>
CSS
.responsive-image {
background-size: cover; /* or contain */
background-position: center center;
height: 300px; /* or 25vh - 25% of viewport height */
}
The only drawback is that you have to control the height of the image div, because on its own it won't automatically expand to best fit the image
Also see viewport units compatibility