When I try to make an HTML background color fill for a div, it ends up with a huge amount of extra space at the bottom - I want to make a sort of header, but it becomes really wide. Can someone help me with this?
My HTML is
<div class="header">
<h1>Welcome to My Site</h1>
</div>
My CSS is
div.header{
background-color:grey;
}
Thanks!
I would recommend adding width, height, and margin to your code. You can experiment with your code with a website like codepen.io! Below is a link to an example of what I'm talking about.
https://codepen.io/wykydtronik/pen/VpEGer
div.header{
background-color:grey;
width: 350px;
height: 150px;
margin: 0 auto;
}
If you look at the CSS code you will see I set a width of 350px, and height of 150px. I also added a margin: 0 auto; to make the header div to be center. It's a neat trick that isn't intuitive until you've seen it a few times.
Let me know if this helps, good luck!
I advise you to use bootstrap, there is lots of community support and documentation and you can even override colors and styles for yourself.
Bootstrap well class could work for you.
<div class="well">
Look, I'm in a well!
</div>
Or the jumbotron for bigger impact.
<div class="jumbotron">
<h1>Jumbotron</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>
Related
I know this question must sound familiar, and I can see loads of people asking similar questions but none of the answers are working for me. Everyone has a fairly specific need. I want to understand the basics and I can work out the rest.
I have a simple angular/bootstrap web page. I have made a carousel component and I want to ensure the user always sees the entire image. I have seen lots of answers which suggest img-fluid, max-with, max-height etc., but nothing's working for me. It's sort-of working for landscape images but not for portrait images. I need it to always show the whole image regardless.
Here is the basic app component:
<app-nav-menu ></app-nav-menu>
<div style="padding:10px">
<router-outlet></router-outlet>
</div>
The router-outlet goes to this "about-us" component:
<div class="row">
<div class="col">
<app-carousel [slides]="slides"></app-carousel>
</div>
</div>
And the carousel component looks like this:
<div class="container">
<div class="row">
<div class="col">
<div>
<img [src]="slide.src">
<p style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
{{slide.text}}
</p>
</div>
</div>
</div>
</div>
As you can see it's really simple. Right now there is no styling other than the little bit in the p tag which is to center the text in the image. This is not working properly now, because I think I've lost the container whilst trying out different solutions. I don't like CSS because I'm not used to them and I like to see the styles where they belong so I can understand better. But feel free to suggest a CSS solution if necessary.
So the question is simple: how can I make the image always fit the screen and not spill downwards?
Thanks
Did you try the object-fit property?
object-fit: cover;
If your image aspect ration is good, it shows the entire image.
object-fit: contain:
This shows the entire image, but if the aspect ratio is not good, it shows blank spaces around the image.
Thanks SureN.
I tried both of these but they didn't work. Perhaps they would do if I knew how to use them better.
In the end the following more or less worked for me, in the img tag:
style="max-width: 100%; max-height: 100vh; display: block; margin-left: auto; margin-right: auto;"
It's not perfect but it'll do for now!
How can I make the yellow section fullwidth? I tried section and div container fluid within bootstrap and no luck. I think there are fixed dimensions in the parent css that I can’t override. I just want to make a responsive div section fullwidth so I can use a background color or image background. Thanks in advance.
Page in question:
http://dev.dragonscaletech.com/our-story/
<div class="container" style="background-color: yellow;">
<div class="row">
<div class="col-12 text-center">
<h2>Reaching the Root of the problem..</h2>
<h4>Scrubbing your back daily has always been so uncomfortable &
unrealistic, until now!</h4>
<p>The fact that it allowed easy & hands-free access to the absolute hardest to reach area of the human body, meant that we needed to make it count & go after the root of the problem.</p>
<p>We constantly neglect our back when we shower.</p>
<p>Every other solution to this widespread hygiene shortcoming requires a full range of arm & body mobility, which frankly, not everyone has.</p>
<p>Something as common as having sore muscles from last night's work out or even having too much muscle, can limit you from using any of these "alternatives-on-a-stick". Age, injury & disability can make it impossible.</p>
<p>Once we understood the core issue, we got to work.</p>
</div>
Bootstrap container does have 15px padding and row have - 15px margin. So either add class row to your section or give - 15px margin to your yellow section. Hope that will work or try question with code next time for quick response.
Found this code after a ton of searching on google. Fixed my issue.
.row-full{
width: 100vw;
position: relative;
margin-left: -50vw;
height: 100px;
margin-top: 100px;
left: 50%;
}
https://coderwall.com/p/hkgamw/creating-full-width-100-container-inside-fixed-width-container
I'm very new to css and html, and realize this might be a silly mistake...
Code Pen Demo
I don't see a top margin anywhere (using different bootstrap sources and building from them) but no matter how much I dissect the code, I still can't find the problem.
<div id="fh5co-products" data-section="products">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 fh5co-section-heading text-center">
<h2 class="fh5co-lead animate-single product-animate-1">innovating you</h2>
<p class="fh5co-sub animate-single product-animate-2">Your buyers are constantly evolving, and it can be hard to keep up. That's where we come in. </br>By uncovering the latest trends and best-in-class technologies, we work to ensure that you provide a selling experience that exceeds your buyers' expectations.</p>
Please add this css in your code
.jumbotron {
margin-bottom: 0;
}
Because the first element with a child div class="jumbotron" has a property margin-bottom with a value of 30px
in your CSS
.jumbotron {
margin-bottom: 0; // or use margin-bottom: 0 !important if this not work
}
I am using a 960 responsive layout from skeleton, i have their css stylesheet which i have to addon if i want to include class. After experimenting i managed to get the site i want, but not without having piles of unnecessary selections.
So for example, based on what u see my css reflect the selector .container.four.columns, that say if i add a banner class, in my css should i only do .container.banner or .container.four.columns.banner will be the best way?
Since i thought if i add a lot of reusable style classes to it the css selector will be very long if i go into each details.. Please advise as i'm trying to make my code look as clean and neat as possible but not sure the best selectors to use as when i tried shortcut like just .banner nothing happens and i must have at least .container.banner before it make the changes. Thanks
HTML:
<div id="content" class="container">
<div class="four columns banner">
<div id="banner_a3da" class="banner_img">
<img src="page_home/banner_A3DA.jpg">
</div>
</div>
<div class="four columns banner">
<div id="banner_fi" class="banner_img">
<img src="page_home/banner_FI.jpg">
</div>
</div>
</div>
CSS:
/* Base Grid */
.container .four.columns { width: 220px; }
.banner or .container.banner or .container.four.columns.banner { width:100% }
Well either ways are correct, but you can use more classes to select specific object in your case. But maybe you have some .banner in .container.three.columns.banner and he is for example 50% and you wanted it to be 50%, but with .banner you will select him and you will resize it to 100%.
To resume, with single selection you may affect some elements that you didn't wanted, becouse there are more elements with that class.
I don't know if that's just pseudo-CSS or what, but you do 'or' with a comma,:
.banner,
.container .banner,
.container .four.columns.banner {
width:100%
}
You also had a missing space after .container.
Does that help?
I don't even know if what I am asking is possible, but it's worth a shot. Basically I have a one page scrolling website controlled by jQuery, but it's a very very simple code, no plugin or external doc. That works great.
Every "page" if you will is divided into different divs to separately control function of pictures, tables, fonts, etc. per each page. Like this:
//home page
<div id="home">
content here
</div>
//about page
<div id="about">
content here
</div>
and so on and so forth... my question is, can i do something like this? I've tried but maybe I don't have the "decimal" in the right spot...
//home page
<div id="home resize">
<div id="home">
content here
</div>
</div>
//about page
<div id="about resize">
<div id="about">
content here
</div>
</div>
and then CSS be
home resize {
position: relative;
height: 100%;
width: 100%;
}
Two things I see right away. First, your CSS rule should be .home.resize instead of home resize. Second, height, when using percentages, requires that the height be set on the html tag to make a difference. So you will need rules such as this:
html {
min-height: 100%;
}
.home.resize {
height: 100%;
}
Otherwise, height will never take up the entire browser window height.
This all being said, I would guess that your best solution would involve JS or jQuery in some way. I know there are several single page scrolling plugins that do this job quite well.
First things first. HTML id's cannot contain spaces. You should define a class name resize. That being said. You can achieve this by using this.
Here is a fiddle
div id="home" class="resize">
content here
</div>
<div id="about" class="resize">
content here
</div>
.resize{
display:block;
height:100vh;
margin:0;
}
#home{
background-color:red;
}
#about{
background-color:blue;
}
vh is viewport height. It will set the height of your div same as viewport. 1vh is equivalent to 1/100th of viewport height