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>
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:
I have a horizontally scrolling website for my photography portfolio, so to make it easier for people to navigate I made it possible to have the website scroll horizontally when the user scrolls vertically. However, since I did this the divs holding each image INSIST on being a fixed width and not conforming to the width of the images they contain. I'm relatively inexperienced with coding so any help getting the divs to match the width of their images would be appreciated.
Here is my html and css
<div class="main-content">
<div class="banner-01 post">
<img src="http://jmatta.com/images/pix/Main/frankell.jpg">
</div>
<div class="banner-02 post">
<img src="http://jmatta.com/images/pix/Main/HMR17.jpg">
</div>
<div class="banner-03 post">
<img src="http://jmatta.com/images/pix/Main/Banes16.jpg">
</div>
<div class="banner-04 post">
<img src="http://jmatta.com/images/pix/Main/scott5.jpg">
</div>
</div>
body {
background: white;
color: black;
font-family: 'Helvetica Neue', Helvetica, sans-serif;
margin: 0;
padding: 0;
font-size: 24px;
}
.main-content{
position:absolute;
display: flex;
flex-direction: column;
top: 50px;
left:250px;
width:700px;
max-height:1150px;
overflow-y:auto;
overflow-x:hidden;
transform:rotate(-90deg) translateY(-700px);
transform-origin:right top;
}
.main-content div{
transform:rotate(90deg) translateX(700px);
transform-origin: right top;
display: inline-block;
}
.main-content img{
max-height: 89vh;
}
Since you rotated parents of the images, it is the height of divs that appears not to follow the height of the contained images. I am not sure why did you rotate the main-content. I removed all the rotations and transformations (are they necessary for some reason?) and simplified the whole code in general. img and div now have the same size. If you need spacing between images, just add side margin to the image.
I believe this is the solution you are looking for:
code
I'm experiencing an issue with overflow content in divs. I am using SharePoint and some of the content [namely Libraries or Lists or big webparts containing the aforementioned] will extend past the visible display space, but the body content doesn't scroll properly.
My structure looks something like this:
html {100%}
body { background: #010831; font: 500 1em 'Raleway'; height: auto; min-height: 100%; margin:0; overflow:hidden;}
#container { margin: 0 auto; min-height: 100%; }
#topBar {background: #010831; font: inherit; padding: 5px; height: 80px; margin-bottom: 1px;}
.topline {width:100%; height:20px; font-size:0.8em; color:#fff;}
.social {width: 30%; float:right; text-align: right; font-size: 1.2em;}
#searchBar {width: 25%; float:right;}
#searchBox {border-radius: 10px; width: 250px; background:#343a5d; height:25px; color: #fff; font-size:1.2em;}
#quicklaunch {width:18%; min-height: 35%; color: #666; font: 600 1em 'Raleway'!important; padding-top:4px;}
#main {width:100%; background:#fff; display:flex;}
#s4-workspace {width:auto!important; overflow:auto!important; background:#fff;}
#content {width:80%}
#footer {background:#000; width:100%}
<body>
<div id="s4-workspace">
<div id="bodyContainer">
<div id="container">
<!-- this is the beginning of my custom coding, and my own styles. -->
<header id="topnav">
TOP NAV MENU HERE
</header>
<section id="main">
<div id="quicklaunch"> SIDE NAV HERE</div>
<div id="content"> ALL USER DRIVEN CONTENT GOES HERE</div>
</section>
<footer id="footer"></footer>
</div>
</div>
</body>
What's happening is that the Content div that's set to 80% won't display content that extends past the screen properly. The content overflows but the background is my body color (dark Blue). I can't set the content div width to 100%, as that will make the entire div go under the sideNav AND it affects how webparts then display. [They stretch across the entire screen forever, since by default SP allows the webparts to take up full width of their containing zone].
Essentially, all I want is for the background color of my content div to stretch when the content overflows.
I'm creating a website that contains a footer, on the left side just simple text. On the far right will be icons with links to various social networking sites. I can't get the icons to stay inside the container when I float the image to the right. How can I get the image to stay inside the yellow area and out of the green without adding any more padding to the footer?
http://jsfiddle.net/Fd4Pc/1/
body {
background-color: #17241d;
margin: 0;
}
#mainWindow {
width: 1200px;
margin-left: auto;
margin-right: auto;
background-color: #fffff6;
height:100%;
}
.right {
float:right;
}
footer, .footer {
font-size: .8em;
padding:10px;
}
<body>
<div id="mainWindow">
<p>Text here</p>
<div id="footer">
<footer>
<span>Left Side</span>
<img class="right" src="http://static.viewbook.com/images/social_icons/facebook_32.png" />
</footer>
</div>
</div>
</body>
Try adding overflow:auto to your footer:
footer, .footer {
font-size: .8em;
padding:10px;
overflow:auto;
}
jsFiddle example
You can also set a line-height to your footer: http://jsfiddle.net/Fd4Pc/3/
footer, .footer {
font-size: .8em;
padding:10px;
line-height: 2em;
}
floated element will expand the parent element height, to expand that add float to the parent as well:
footer, .footer {
font-size: .8em;
padding:10px;
float:left;
}
This can be done in two ways
Add overflow: hidden to footer
or
clear div that is
<footer>
<!--your code goes here-->
<div style="clear:both"></div>
</footer>