For some reason, I was able to achieve what I wanted earlier in the day, but now when I am trying to re-create my code, it won't replicate.
I want two header elements, h2 and h3, centered-aligned in one div row, within the jumbotron section.
Then, I want to add bottom-margin to the h3 element to lift it slightly above the h2 element, like in the photo.
I still have my original code in hand, but even after copynpasting the exact code with the same styling, the h3 element ends up being directly below h2.
I have tried cross-referencing with dev tools, and i found that the only difference is the div row containing the h2 and h3 elements is missing display:flex, but it's still not working.
what i want to happen
what is happening
Original Working Code:
HTML:
<section class="jumbotron">
<div class="container">
<div class="row">
<h2>Jumbotron</h2>
<h3>Bootstrap</h3>
</div>
</div>
</section>
CSS:
.jumbotron {
display: flex;
align-items: center;
background-image: url('https://images.unsplash.com/photo-1665956600293-4511bd26ea98?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2787&q=80');
background-size: cover;
color: #ffffff;
height: 400px;
}
.jumbotron h2 {
font-size: 60px;
font-weight: 700;
margin: 0;
color: ;
}
.jumbotron h3 {
margin: 0 0 20px;
color: #fff;
}
Thank you for your help!
change row class with d-flex like
<section class="jumbotron">
<div class="container">
<div class="d-flex">
<h2>Jumbotron</h2>
<h3>Bootstrap</h3>
</div>
</div>
</section>
Related
I am trying to make my webpage more responsive but I am struggling to figure out the cause of this problem here: https://imgur.com/a/QIPdJnp and https://imgur.com/a/3UNzAVF
my website looks okay with high width viewport values like for iPads and desktops, but when the width of the view port is small like less than 360px, my footer header has this empty white space that gets created between it and the right edge of the screen as i showed above.
it seems like that the CSS grid and "experience" header stick out just way too much to the right which causes things like the footer (which properly fits the screen width) appear as if it is not fitting the screen width.
here is the code for the header (resides inside CSS grid section) that is pushing too much to the right. If I can find out what's wrong here, I can apply this to the CSS grid.
<main class = "gallery-page">
<div class="col-lg-12 text-center">
<h2 class="section-title">Experience</h2>
</div>
</main>
h1, h2, h3, h4, h5, h6 {
color: #000;
font-family: "Playfair Display", serif;
line-height: 1.2;
}
h2, .h2 {
font-size: 60px;
}
#media (max-width: 250px) {
h2, .h2 {
font-size: 40px;
}
}
CSS provides two properties that could be used to implement your request namely position and display. I will not really cover display here or advanced items like flex, let's focus on position, and bootstrap.
I noticed you are using "col-lg-12", "section-title", "text-center" as a class. This class comes from a framework like bootstrap. Bootstrap has it's own header that you could use called NavBar. Also the col-lg-12 is part of the grid layout in bootstap. I assumed bootstrap here, but there are other frameworks with similar constructs like Material.
Let's implement your html and css with some minor changes. Here we will use pure css without a framework, I will show you how to implement a NavBar later.
I changed the body background to blue as follows:
body {
background-color: blue;
}
I then implemented your css as follows:
<style>
h1, h2, h3, h4, h5, h6 {
font-family: "Playfair Display", serif;
line-height: 1.2;
}
h2, .h2 {
font-size: 60px;
}
.header {
background-color: purple;
color: white;
}
#media (max-width: 250px) {
h2, .h2 {
font-size: 40px;
}
}
</style>
<main class = "gallery-page">
<div class="text-center header">
<h2 class="section-title">Experience</h2>
</div>
<div> tmp text here </div>
</main>
Notice I change the text to white and the heading to purple. The result is as follows:
To see what happens with some text and some scroll bars I added some temp text:
When it scrolls the head moves up, and if we change the screen size it appears as follows:
The position property of css provides the following five options:
static
relative
fixed
absolute
sticky
Static is the default and are not affected by the top, bottom, left, and right properties, specified by position. Your header is an example of static.
Relative is positioned relative to its normal position. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
Let's change the header to relative:
.header {
background-color: purple;
color: white;
position: relative;
}
Notice nothing changes, but now we can move this relative to its position, so for example left 30px.
.header {
background-color: purple;
color: white;
position: relative;
left: 30px;
}
As you can see this moves your header relative to it's position, scrolling behaves like before.
Let's change the position to fixed as follows:
.header {
background-color: purple;
color: white;
position: fixed;
}
Now something strange happens, for one the block is larger, and two you can scroll the text below while the block remains in the same place. This is because fixed is relative to the view-port and not the window. You can control what is above (header) or below (the text) by setting the z-index.
We can also reposition where in the view-port we want the header by changing it's position. Like before we could use left 30px:
.header {
background-color: purple;
color: white;
position: fixed;
left: 30px;
}
But unlike before it is now squashed and does not disappear to the right. We can also use top, bottom etc.
Let's position it at the top, left, right, with a smaller height:
.header {
background-color: purple;
color: white;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
}
The window will be responsive:
Absolute is similar to fixed except now the element is fixed to the nearest position ancestor in this case body and not the view port.
.header {
background-color: purple;
color: white;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
}
While it looks similar to before, with the text underneath, scrolling the page will show that the header moves with the body and is no longer fixed to the view-port:
In these examples I have showed you how you can use position to get the effect of a header that you want.
Let's revert back to your original html, and include the bootstrap framework, note that I am keeping the poor choice in colours:
<style>
h1, h2, h3, h4, h5, h6 {
font-family: "Playfair Display", serif;
line-height: 1.2;
}
h2, .h2 {
font-size: 60px;
}
.header {
background-color: purple;
color: white;
}
#media (max-width: 250px) {
h2, .h2 {
font-size: 40px;
}
}
</style>
<main class = "gallery-page">
<div class="col-lg-12 text-center header">
<h2 class="section-title">Experience</h2>
</div>
<div>
some text
</div>
</main>
The result is as follows:
From the bootstrap examples you can see the rendering is I assume as you expected, I do not have the rest of your html, and so I do not know why you are getting strange behavior, it could be you have wrapped the code with a container, or the footer is rendered with other tags.
Let's implement a NavBar.
You can do this with the following HTML:
<main>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
Experience
</div>
</nav>
<div>
</div>
</main>
In addition html provides tags for headers and footers.
So let's update the html to include a bootstrap NavBar using the header tag, and leave the main for the body.
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
Experience
</div>
</nav>
</header>
<main>
<div>
</div>
</main>
We can now implement the footer tag as follows:
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
Experience
</div>
</nav>
</header>
<main>
<div>
some content
</div>
</main>
<footer class="footer bg-light">
<div class="container">
<span >My footer</span>
</div>
</footer>
Notice I am using the footer tag, with a bootstrap footer class and bg-light class. The footer is added at the bottom, and if we scroll we can see it:
Scrolling also moves the header up, we can fix both by making them fixed.
We could use bootstrap to fix it, but let's use the CSS we used above, and we will add it as a class.
Add the following css:
.header-top {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
}
.footer-bottom {
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
}
Use the tags in your html as follows:
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light header-top">
<div class="container-fluid">
Experience
</div>
</nav>
</header>
<main>
<div>
some contents
</div>
</main>
<footer class="footer bg-light footer-bottom ">
<div class="container">
<span >My footer</span>
</div>
</footer>
The result are fixed headers and footers:
Here i upload the picture, i want to put my image to the left side of Food and Travel text
.block-title h3 {
color: #151515;
font-family: 'Montserrat', sans-serif;
font-size: 36px;
font-weight: 700;
line-height: 1.4;
letter-spacing: -0.9px;
margin-bottom: 24px;
margin-top: 50px;
padding-bottom: 13px;
position: relative;
text-align: center;
}
<div class="col-lg-12">
<p>
<center><img src="#">
<div class="block-title">
<h3>Food & Travel</h3>
</div>
</center>
</p>
</div>
You just need to add that line of CSS
div.block-title { display: inline-block; }
<div class="col-lg-12">
<p>
<center><img src="#">
<div class="block-title">
<h3>Food & Travel</h3>
</div>
</center>
</p>
</div>
I would change your HTML a little bit:
<div class="col-lg-12">
<div class="block-title">
<img class="image" src="https://image.flaticon.com/icons/png/512/45/45260.png">
<h3 class="title">Food & Travel</h3>
</div>
</div>
Some observations about your HTML:
Since the creation of CSS, it is considered a bad practice to use styling elements inside HTML, like center. HTML should hold only content and CSS styles. center in HTML can be, in most cases, easily replaced by text-align: center in CSS;
Avoid giving styles to a tag (as you did with H3). It is always better to give a class for each individual element you want to style. For example, you can give a class to your image and to your header, as I did on the example above.
Float, as mentioned by some users here, is barely a good option. I would not recommend it.
I'd go for using Flexbox on the container (block-title). It is the better option and the most accurate.
Your container would be something like
.block-title {
display: flex;
justify-content: center;
align-items: center;
}
... and the magic is done!
Here is an example using flexbox:
https://codepen.io/annabranco/pen/mzEXGv
Another option if you are not comfortable with using Flebox yet, it's to give the H3 a display: inline. By default, all header force a line break (they have display: block). If you change it to display: inline you force the other elements to be displayed in the same line as your header.
In this case you would need to play around with vertical-align to find the exact spot where your text would be centered to the image.
.title {
display: inline;
(..)
}
.image {
vertical-align: -25px; //negative values go up and positive down.
}
Here is an another example, using inline:
https://codepen.io/annabranco/pen/yRJvQa
The problem is about-me section is slightly more wider than the header section even though they both have the same width.You can even observe this in the picture. Blue background is header section inspected in console and white area is the about me section This is also showing the side navigation bar on the bottom which is trouble some.
<!--Header Section -->
<section id="header">
<div class="header-bg-overlay">
<div class="header-bg">
<div class="container">
<div class="hero-content">
</div>
</div>
</div>
</div>
</section>
<section id="about-me">
<div class="about-section">
</div>
</section>
CSS
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Montserrat', sans-serif;
}
h5{
color:white;
font-size:75px;
font-weight: bold;
}
h4{
color:white;
font-size:55px;
font-weight: bold;
}
body{
font-family: 'Roboto', sans-serif;
margin:0;
padding: 0;
}
.header-bg{
width:100vw;
height: 100vh;
background-color: black;
background: url('../assets/background.jpg')no-repeat center;
background-position: -30px -80px;
}
#about-me{
width:100vw;
height: 100vh;
background-color: #FFFFFF;
box-sizing: border-box;
}
Try to change the width of both the sections to 100%
vw = document + scrollbar.
Fix:
.header-bg, #about-me {
width: 100vw;
max-width: 100%
}
Space and new line characters in your HTML code are rendered as one-character space in the browser. Because of that, actually there is another element in addition to the box with 100vw and 100vh dimensions and this causes the overflow.
You have two options:
Remove the new line and space characters before the opening tag and after the closing tag of the .header-bg element. These tags should be in touch with the tags of the parent element.
Use display:flex on parent element. Contrary to other display options, flexbox does not render space characters around its children.
I have two divs. First one has a image file and the other one has a username. I just want to align the second div vertically center just like this way.
But this one is not aligned perfectly. This screen already coded but the problem is that I still couldn't figure out the perfect way to align middle the user name div. I just use my naked eye and adjust padding.
Here is the my code
.tag-header {
padding: 12px;
overflow: auto;
}
.tag-header .tag-header-img {
height: 55px;
width: 55px;
border-radius: 50%;
float: left;
}
.tag-header .info {
padding: 14px 11px;
display: inline-block;
font-size: 1.3rem;
line-height: 14px;
}
.tag-header .info p {
margin: 0;
font-weight: 600;
line-height: 1;
font-size: 1.3rem;
}
.tag-header .time {
display: block;
font-size: 1.2rem;
}
.info span {
font-weight: 300;
color: #b9b9b9;
}
<div class="tag-header">
<div class="col-md-6">
<div class="row">
<img class="tag-header-img" src="http://blog.couchbase.com/binaries/content/gallery/speakers/kirkk.jpg" alt="">
<div class="info">
<p>John Stevens</p>
<span class="time">2 minutes ago</span>
</div>
</div>
</div>
fiddle
Any solution?
Heres your fiddle updated https://jsfiddle.net/p4x7d3fq/5/ -- i added borders just so you can see.
Using display:table-cell you can achieve this, if you don't mind the slight changes, including the addition of a height to match that of your image.
You seem to have done an ok job making them both have the same height, the image doesn't have to use float: left;, you can also use display: inline-block; on it and vertical-align: middle; on both the image and the name, this way you don't need them to have the same height.
Also, make sure you use Bootstrap properly, you first need a "container" div, in the container you put a row, and in that row you put columns.
You only put a div with a row class in a column div if you want more columns in that column.
<div class="container">
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
Try to use flexbox:
.info {
display: flex;
}
I need help getting my H1s to align. My code is below. An image of it is also below. I would like for the Spencer Hiltbrand bit at the top to be all the way to the right. The Beautiful Websites, Inspiring Photography part the same it is now. I am using Bootstrap.
Homepage:
.intro {
color: white;
font-weight: 600;
text-align: left;
font-size: 80px;
margin-left: 45px !important;
padding-top: 380px;
}
.name {
text-align: right !important;
}
<!-- Intro Section -->
<section id="intro" class="intro-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="name"><span class="red">Spencer</span> Hiltbrand</h4>
<h1 class="intro"><span class="red">Beautiful</span> Websites, <br>and <span class="red">Inspiring</span> Photography</h1>
</div>
</div>
</div>
</section>
The following line of HTMl you have is invalid:
<h1 class="name"><span class="red">Spencer</span> Hiltbrand</h4>
You're starting with an h1 tag but never closing it because you try to close it with an h4 tag. This may be causing part of your issue if styles aren't working.
To answer your actual question, an easy way to get your top brand/text to the right is simply to use float: right instead of text-align: right.
If you need to align the heading all to the right, then you need to get rid of container, row and col-lg-12 because they introduce padding and margins. The heading's margin-top has been changed little from the top. Please have a look at the HTML, CSS and its working demo.
HTML
<!-- Intro Section -->
<section id="intro" class="intro-section">
<div>
<h1 class="name"><span class="red">Spencer</span> Hiltbrand</h1>
<h1 class="intro"><span class="red">Beautiful</span> Websites, <br>and <span class="red">Inspiring</span> Photography</h1>
</div>
</section>
CSS
.intro {
color: white;
font-weight: 600;
text-align: left;
font-size: 80px;
margin-left: 45px !important;
padding-top: 380px;
}
.name {
text-align: right;
margin: 5px 0 0 0;
}
Still if you have to make use of bootstrap's container, row and col-*, then you need to modify the existing html.