I have two Jumbotrons in one row, but can't figure out how to center the row on the page. I'm assuming it's some simple CSS that I'm missing. Any suggestions for me?
HTML:
<div class="container">
<div class="row">
<div class="well-lg">
<div class="one">
<div class="col-xs-6">
<div class="jumbotron text-center">
Button
</div>
</div>
</div>
<div class="two">
<div class="col-xs-6">
<div class="jumbotron text-center">
Button
</div>
</div>
</div>
</div>
</div>
</div>
My current CSS shouldn't be messing with it but I'll post it anyway.
.one .jumbotron
{ background: url("IMG") no-repeat center center;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
min-width: 220px;
max-width:240px;
height:290px;
}
.two .jumbotron
{ background: url("IMG") no-repeat center center;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
min-width: 220px;
max-width:240px;
height:290px;
}
This is the simple exapmple of two jumbotrons:
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-xs-6">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
</div>
<div class="col-xs-6">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
</div>
</div>
</div>
</div>
Solution 1: If I understood what you're trying to achieve here correctly, you want to remove the max-width value from your .jumbotron class entirely, just keep it at 100%.
In order to size the jumbotron, you can adjust the padding in classes .one and .two to achieve a centered jumbotron.
Doing so, however, would be recommended to also switch up the place of your classes. Put .one and .two class divs in your HTML inside the columns to avoid unnecessary column padding.
Solution 2: If you would rather keep your max-width setup on .jumbotron, you can adjust the margin for your .one and .two classes. Just use margin: 0 auto; and it should center anything inside of it.
In this case, you should also switch up your custom class placing like I told on the first solution.
I hope this helps!
Style your container class:
Add this code into your css file.
.container{
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
}
check fiddle: http://codepen.io/anon/pen/EPeLjV
Related
I'm just trying to get an image to resize to stay within it's div, but it continues to spill over onto the div below when I reshape my browser size or view in my laptop.
I haven't set any fixed dimensions. I am using bootstrap v5 and tried 2 image classes in the code.
I realise my code may contain some unrequired items and doubling of commands etc., but they are all things I tried with no avail. An example screenshot of my issue.
The only thing I've not yet done (and is my last option if I can't get the image to scale within the divs) will be to create more breakpoints and corresponding CSS for them. However the image doesn't spill out of it's divs on mobile devices and seems to in part be responsive - so I'm not sure if this is necessary. And it seems like there should be a simpler solution to what I'm trying? Perhaps not.
Many thanks.
#cover2 {
background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url("https://www.kelvindalewhisky.com/public/img/2.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
padding-top: 50px;
display: flex;
}
.wrapper {
padding-top: 100px;
height: 100%;
width: auto;
display: flex;
margin: auto;
}
.wrapper img {
height: 80%;
width: auto;
}
img {
max-width: 100%;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<section id="cover2">
<div class="container">
<div class="row">
<div class="wrapper">
<div class="col-md-12">
<img src="https://www.kelvindalewhisky.com/public/img/kelvindalegold.png" alt="..." class="img-fluid" class="img-responsive">
<br><br>
<span style="font-size: 60px; color: #ec894b;"><i class="fas fa-chevron-down icn_blue wow shake" data-wow-duration="1500ms"></i></span>
</div>
<!-- container ends-->
</div>
</div>
<!-- row ends-->
</div>
<!-- container ends-->
</section>
You set 2 times the attribute class.
Try with <img src="public/img/kelvindalegold.png" alt="..." class="img-fluid img-responsive">
image1
My background image don't load! Can anyone tell what's happening? Is it because of gatsby? Should I use gatsby-image instead?
background-image: url('/src/components/images/header.png');
background-size: cover;
background-position: center;
width: 100%;
}
<div id="page">
<div className='header'>
<h1>Header</h1>
</div>
<div>
<h1>About</h1>
</div>
<div>
<h1>Projects</h1>
</div>
</div>
We don't really have your code so we don't know which code you are using. But we do know which code does work and it is the following:
.header {
background-image: url("https://i.stack.imgur.com/YLMDq.jpg?s=48&g=1");
background-size: cover;
background-position: center;
width: 100%;
}
<div class="header">
<h1>Header</h1>
</div>
The main difference perhaps is that in the CSS I use double quotation marks.
I'm using foundation for my grid system but this could be a problem in any grid system. I got basicly 3 cells wrapped by one container but one of the cells should grow to the page border (left in my Sampe-Image
but this also could be on the right side).
when I define a fixed width like in this fiddle, it works, but the background image too wide, I need a responsive version :-/
HTML:
<div class="grid-container">
<div class="grid-x grid-margin-x">
<div class="large-4 cell">
<div class="specialdiv"></div>
</div>
<div class="large-4 cell">
<p>test</p>
</div>
<div class="large-4 cell">
<p>test</p>
</div>
</div>
</div>
CSS:
.specialdiv {
position: relative;
border: 1px solid red;
height: 100%;
}
.specialdiv:after {
content: "";
display: block;
top: 0;
right: 0;
height: 100%;
position: absolute;
width: 2000px;
background: url("https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg");
background-size: cover;
}
https://codepen.io/anon/pen/ZjeBOz
Any hints?
Im not sure what exactly you want, but if the goal is to keep the image in the cell with no regards to cropping you can just apply overflow-x: hidden; to .specialdiv
I'm looking to learn how I can position images in CSS, multiple ones, without affecting my footers position, size, etc.
I coded some CSS I thought would work, but it messed up my footers position. (It wouldn't stay at the bottom.)
So, I fixed that issue but found the code I wrote for the image position messed with the footers position.
I don't really know how, but I would like to have my images positioned, perhaps by px/space.. they just need to look good in a row spaced.
The example is in red, is how I want it to look.
look here for an example of how I want it to look.
HTML
<div class="batesimg">
<p><strong>Bates</p></strong>
<div class="shadow"> <!-- makes a shadow, surrounding the characters picture. -->
<img src="images/bates.png" alt="Bates" width="150" height="150"> <!-- defines the img -->
CSS
/* Bates profile picture. */
.batesimg { /* or whatever class name works for you */
position: auto;
left:250px;
top:250px;
margin-right: 500px;
}
NOTE, the css above isn't positioning the image how i want it, showed in the image example, can someone help me positiong the image like i have it in my example image?
Thanks!
You want to repeat same type of pattern of name,img and descriptions. We will call this 'card'. Now you have two problems in hand.
1) Placing multiple cards in page. For this use some layout like flexbox.
2) Setting inside of card properly..
/*1st Problem*/
#flex-container{
display: flex;
flex-wrap:wrap;
width: 600px;
justify-content: space-around;
}
#flex-container>div.card{
flex-grow:0;
flex-shrink:0;
}
/*1st Problem ends*/
/*2nd Problem*/
.card{
width: 200px;
height:calc(200px + 2em);
}
.card>.name ,.card>.desc{
width: 100%;
text-align: center;
}
.card>div.img{
position: relative;
margin-left: 25px;
width: 150px;
height: 150px;
border-radius: 100%;
}
/*2nd Problem ends*/
.card:nth-child(1) div.img{background-color: red;}
.card:nth-child(2) div.img{background-color: green;}
.card:nth-child(3) div.img{background-color: blue;}
.card:nth-child(4) div.img{background-color: yellow;}
/*Centering Content*/
#flex-container{
margin: 0 auto;
/*top,bottom both zero.. and left,right both auto..
handling margin is complicated..read about them
*/
}
<div id="flex-container">
<div class="card">
<div class="name">Name1</div>
<div class="img"></div>
<div class="desc">Desc1</div>
</div>
<div class="card">
<div class="name">Name2</div>
<div class="img"></div>
<div class="desc">Desc2</div>
</div>
<div class="card">
<div class="name">Name3</div>
<div class="img"></div>
<div class="desc">Desc3</div>
</div>
<div class="card">
<div class="name">Name4</div>
<div class="img"></div>
<div class="desc">Desc4</div>
</div>
</div>
For any other problem visit Flexbox
within body I have sections...I expected body to get the whole height: section1.height+section2.height+... but it only gets the top sections height.what am I missing? jsfiddle
<!-- Header -->
<section id="top">
<div class="container">
<div class="row">
<div class="col-lg-12">header</div>
</div>
</div>
</section>
<!--mission-->
<section id="mission" class="mission">
<div class="container">
<div class="row">
<div class="col-lg-12">mission</div>
</div>
</div>
</section>
<!-- contact -->
<section id="contact" class="contact">
<div class="container">
<div class="row">
<div class="col-lg-12">contact</div>
</div>
</div>
</section>
You are looking for min-height on your html and body. Using height: 100% makes the html and body height wrap around all of your content up to the height of the screen/viewport. Using min-height: 100% makes the html and body height equal at least the height of the screen/viewport, and can also expand downward to fit overflowing content.
JSFiddle
html, body {
min-height: 100% !important;
width: 100% !important;
margin: 0;
padding: 0;
}
NOTE - Try to avoid using !important unless it is absolutely necessary. It will create problems down the road if/when you need to override the styling on something for a single page.
You can set your header section.top to the viewport height by using 100vh. Then you can remove the height: 100% of html and body, and they will stay fluid (fiddle):
html,body{
margin:0;
padding:0 ;
}
#top {
width: 100%;
height: 100vh;
background: #802818;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}