I'm attempting to place a flex-wrap on my site through a media query of 700px, with this being the only section where it's not working. Not sure if it's me being an idiot, but can anyone see an obvious solution to what I should be applying flex-wraps and flex properties too in my code for the proposition container to wrap on top of the image?
Seems to me it should be:
hero-content-container = flex-wrap: wrap;
hero-proposition-container = flex: 0 0 300px;
hero-image-container = flex: 0 0 300px;
But it's not working. I've also tried adding it a level deeper, so proposition and image with flex-wraps, and their children having flex: 0 0 300px.
HTML:
<section class="hero-section">
<div class="hero-container">
<div class="hero-content-container">
<div class="hero-proposition-container">
<h1 class="hero-heading">Welcome (title)</h1>
<p class="hero-paragraph">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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
<button type="button" name="button">
This button opens the search page
</button>
</div>
</div>
<div class="hero-image-container">
<div class="hero-image-box">
<h1>Hero picture here</h1>
</div>
</div>
</div>
</section>
CSS:
.hero-section {
height: 700px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.hero-container {
height: 600px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
}
.hero-content-container {
height: 500px;
width: 40%;
display: flex;
align-items: center;
justify-content: center;
}
.hero-image-container {
height: 500px;
width: 40%;
display: flex;
align-items: center;
justify-content: center;
}
.hero-image-box {
height: 500px;
width: 100%;
border: 3px solid #363636;
display: flex;
align-items: center;
justify-content: center;
}
.hero-proposition-container button {
background-color: #f3c623;
height: 50px;
width: 300px;
}
.hero-proposition-container a {
color: #363636;
font-size: 16px;
}
Thanks.
The .hero-content-container, which you indicate has flex-wrap: wrap, has only one child (.hero-proposition-container). With only one child, there is nothing to wrap.
I've also tried adding it a level deeper...
Try going a level higher.
Add flex-wrap: wrap to .hero-container.
Related
I'm creating a fan-made page for studying purposes and I encountered this accidentally.
When I zoom out the page with my mouse scroll, the images remain big, and the content inside the grid containers also get weird formatting.
What I expected to see was the page would just get normally smaller, but it all becomes funky when I zoom out. Please help!
Here is a Screenshot of the problem
*{
font-family: roboto, arial;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
margin: 0px;
}
h2 {
font-family: century gothic, verdana, tahoma;
}
p {
text-align: justify;
}
#main{
width: 80%;
margin: auto;
overflow: hidden;
}
#top-head-img {
display: flex;
overflow: hidden;
justify-content: center;
}
#top-head-img img {
width: 1600px;
transition-property: transform;
transition-duration: 1s;
transition-timing-function: ease-in-out;
}
#top-head-img img:hover {
transform: scale(1.1);
}
#header {
position: sticky;
top: 0;
display: grid;
grid-template-columns: 1fr auto;
padding: 0;
margin: 0;
}
#logo {
background: #060B24;
display: grid;
grid-template-columns: 10% 1fr;
}
#header-img {
width: 100%;
height: 100%;
}
#header-text {
padding: 0px 10px;
color: white;
}
#nav-bar {
background: #060B24;
}
#nav-bar ul{
list-style-type: none;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 50px;
justify-items: center;
align-content: center;
}
#nav-bar li a{
text-decoration: none;
color: white;
}
#feat-section {
display: grid;
grid-template-columns: 45% 55%;
grid-template-rows: auto;
grid-row-gap: 20px;
}
.description {
width: 100%;
text-align: justify;
}
.description p {
text-indent: 20px;
}
.icon {
display: flex;
justify-content: center;
}
.icon img{
width: 100%;
min-width: 50%;
align-content: center;
}
#products-section {
}
#product-imgs {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.grid-header {
/*grid-column: 1/4;*/
text-align: center;
}
.product-box img {
/*width: 50%;*/
height: 40vh;
/*margin-left: 25%;*/
margin-right: 5px;
}
.column-section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 40px;
}
.row-section {
display: grid;
grid-template-columns: 45% 1fr;
grid-column-gap: 20px;
}
#video {
max-width: 100%;
height: calc(315px*0.7);
}
#email {
width: 50vw;
height: 40px;
border-radius: 10px;
padding: 10px;
}
#submit {
background-color: #060B24;
color: white;
width: 10vw;
height: 8vh;
font-size: 70%;
text-align: center;
border-radius: 10px;
display: block;
margin: 20px auto;
padding: 5px;
}
#submit:hover {
background-color: #3A3849;
}
/*when screen small*/
#media (max-width: 750px) {
#header {
position: sticky;
top: 0;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
padding: 0;
margin: 0;
}
#logo {
background: #060B24;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 4vh;
}
#header-img {
width: 30%;
height: auto;
justify-self: center;
}
#header-text {
margin: 0px 0px !important;
text-align: center;
padding: 0px auto;
align-self: start;
}
.product-box img {
width: 100%;
margin: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Honkai Impact Merch</title>
<link rel="stylesheet" type="text/css" href="productstyleFlex.css">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<a name="top"></a>
<header id="header">
<div id="logo">
<img src="https://upload.wikimedia.org/wikipedia/en/d/da/Honkai_Impact_3rd_logo.png" id="header-img">
<div id="header-text">
<p id="header-text">Official Honkai Merch by (not)Mihoyo</p>
</div>
</div>
<nav id="nav-bar">
<ul>
<li>Features</li>
<li>Products</li>
<li>Video</li>
</ul>
</nav>
</div>
</header>
<div id="top-head-img">
<img src="https://uploadstatic-sea.mihoyo.com/bh3/upload/officialsites/201910/pcbanner_1570612871_7480.png">
</div>
<main id="main">
<div >
<h1 class="grid-header">Jump Into the World of Honkai Impact</h1>
<div class="row-section">
<iframe width="560" height="315" src="https://www.youtube.com/embed/3xm1kqqN3GQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen id="video"></iframe>
<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 nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div id="feat-section">
<div class="icon">
<img src="https://static.wikia.nocookie.net/honkaiimpact3_gamepedia_en/images/6/63/White_Comet.png/revision/latest?cb=20180521030059">
</div>
<div class="description">
<h2>Based on the iconic Valkyries of Honkai Impact 3</h2>
<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 nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="icon">
<img src="https://i.pinimg.com/originals/e3/9d/a5/e39da548f5632d1ccfdcad9b54a8c51c.png">
</div>
<div class="description">
<h2>Feel the lightning with stunningly rendered 3D effects</h2>
<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 nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="icon">
<img src="https://static.wikia.nocookie.net/houkai3rd/images/e/e6/60712.png/revision/latest?cb=20191118063408">
</div>
<div class="description">
<h2>Bring the Valkyrie team together to protect all that is beautiful in the world</h2>
<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 nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div id="products-section">
<h2 class="grid-header">Tech Otakus Save the World!</h2>
<div id="product-imgs">
<div class="product-box">
<img src="https://i.pinimg.com/736x/87/a3/f1/87a3f18e0f4eaa61de4ac3a6b273659d.jpg">
</div>
<div class="product-box">
<img src="https://cdn.archonia.com/images/1-76856403-1-1-original1/honkai-impact-3rd-pvc-figure-rita-rossweisse-maid-of-celestia-ver-1-8.jpg">
</div>
<div class="product-box">
<img src="https://cdn.shopify.com/s/files/1/0244/2235/0953/products/STL184688_1200x1200.jpg?v=1611343542">
</div>
<div class="product-box">
<img src="https://images.goodsmile.info/cgm/images/product/20171114/6866/48702/large/ffc6acbe3bf32e6fd793d5a4ffd34dc4.jpg">
</div>
<div class="product-box">
<img src="https://cdn02.plentymarkets.com/qozbgypaugq8/item/images/5010/full/STAT-HONKAI008a.jpg">
</div>
<div class="product-box">
<img src="https://bbts1.azureedge.net/images/p/full/2020/10/4c458d67-de44-46c0-a37f-c45d74bf0b65.jpg">
</div>
</div>
</div>
<div class="column-section">
<h2>Sign Up to Receive Info From Schicksal HQ</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input type="email" name="email" id="email" placeholder="Enter your email address">
<input type="submit" name="submit" id="submit">
</form>
</div>
</main>
</body>
</html>
It looks to me like you want to do a couple things:
Apply the layout sizing to the container element for the image, not the image itself.
Define the width of the image as a percentage of the container.
If you define the width of the image as 1600px, it will remain that width even as you zoom out. As the container shrinks, more and more of the image will be hidden by the overflow. Instead You want the image size to change with the container so you do that by sizing the container and then setting the image width to 100%.
If you focus on sizing the block level elements rather than the content that fills them, I think you will end up with a cleaner effect when you zoom out. It's important to remember though that zooming out is not the same as seeing how the content will render on smaller devices. For that, you will want to wrap your head around using media queries to change the sizing and positioning of elements based on screen/viewport breaking points.
#top-head-img {
display: flex;
overflow: hidden;
justify-content: center;
width: 50% /*or whatever size you are going for */
}
// The image itself should be sized as a percentage of the container element
#top-head-img img {
width: 100%;
transition-property: transform;
transition-duration: 1s;
transition-timing-function: ease-in-out;
}
Try using this:
* {
font-family: roboto, arial;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
margin: 0px;
}
h2 {
font-family: century gothic, verdana, tahoma;
}
p {
text-align: justify;
}
#main {
width: 80%;
margin: auto;
overflow: hidden;
}
#top-head-img {
display: flex;
overflow: hidden;
justify-content: center;
}
#top-head-img img {
width: 1600px;
transition-property: transform;
transition-duration: 1s;
transition-timing-function: ease-in-out;
}
#top-head-img img:hover {
transform: scale(1.1);
}
#header {
position: sticky;
top: 0;
display: grid;
grid-template-columns: 1fr auto;
padding: 0;
margin: 0;
}
#logo {
background: #060B24;
display: grid;
grid-template-columns: 10% 1fr;
}
#headerImg {
width: 100%;
height: 100%;
}
#header-text {
padding: 0px 10px;
color: white;
}
#nav-bar {
background: #060B24;
}
#nav-bar ul {
list-style-type: none;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 50px;
justify-items: center;
align-content: center;
}
#nav-bar li a {
text-decoration: none;
color: white;
}
#feat-section {
display: grid;
grid-template-columns: 45% 55%;
grid-template-rows: auto;
grid-row-gap: 20px;
}
.description {
width: 100%;
text-align: justify;
}
.description p {
text-indent: 20px;
}
.icon {
display: flex;
justify-content: center;
}
.icon img {
width: 100%;
min-width: 50%;
align-content: center;
}
#product-imgs {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.grid-header {
/*grid-column: 1/4;*/
text-align: center;
}
.product-box img {
/*width: 50%;*/
height: 40vh;
/*margin-left: 25%;*/
margin-right: 5px;
}
.column-section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 40px;
}
.row-section {
display: grid;
grid-template-columns: 45% 1fr;
grid-column-gap: 20px;
}
#video {
max-width: 100%;
height: calc(315px*0.7);
}
#email {
width: 50vw;
height: 40px;
border-radius: 10px;
padding: 10px;
}
#submit {
background-color: #060B24;
color: white;
width: 10vw;
height: 8vh;
font-size: 70%;
text-align: center;
border-radius: 10px;
display: block;
margin: 20px auto;
padding: 5px;
}
#submit:hover {
background-color: #3A3849;
}
/*when screening small*/
#media (max-width: 750px) {
#header {
position: sticky;
top: 0;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
padding: 0;
margin: 0;
}
#logo {
background: #060B24;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 4vh;
}
#headerImg {
width: 30%;
height: auto;
justify-self: center;
}
#header-text {
margin: 0px 0px !important;
text-align: center;
padding: 0px auto;
align-self: start;
}
.product-box img {
width: 100%;
margin: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Honkai Impact Merch</title>
<link rel="stylesheet" type="text/css" href="productstyleFlex.css">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<a name="top"></a>
<header id="header">
<div id="logo">
<img src="https://upload.wikimedia.org/wikipedia/en/d/da/Honkai_Impact_3rd_logo.png" id="headerImg">
<div id="header-text">
<p id="header-text">Official Honkai Merch by (not)Mihoyo</p>
</div>
</div>
<nav id="nav-bar">
<ul>
<li>Features</li>
<li>Products</li>
<li>Video</li>
</ul>
</nav>
</div>
</header>
<div id="top-head-img">
<img src="https://uploadstatic-sea.mihoyo.com/bh3/upload/officialsites/201910/pcbanner_1570612871_7480.png">
</div>
<main id="main">
<div>
<h1 class="grid-header">Jump Into the World of Honkai Impact</h1>
<div class="row-section">
<iframe width="560" height="315" src="https://www.youtube.com/embed/3xm1kqqN3GQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen id="video"></iframe>
<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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div id="feat-section">
<div class="icon">
<img src="https://static.wikia.nocookie.net/honkaiimpact3_gamepedia_en/images/6/63/White_Comet.png/revision/latest?cb=20180521030059">
</div>
<div class="description">
<h2>Based on the iconic Valkyries of Honkai Impact 3</h2>
<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 nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="icon">
<img src="https://i.pinimg.com/originals/e3/9d/a5/e39da548f5632d1ccfdcad9b54a8c51c.png">
</div>
<div class="description">
<h2>Feel the lightning with stunningly rendered 3D effects</h2>
<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 nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="icon">
<img src="https://static.wikia.nocookie.net/houkai3rd/images/e/e6/60712.png/revision/latest?cb=20191118063408">
</div>
<div class="description">
<h2>Bring the Valkyrie team together to protect all that is beautiful in the world</h2>
<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 nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div id="products-section">
<h2 class="grid-header">Tech Otakus Save the World!</h2>
<div id="product-imgs">
<div class="product-box">
<img src="https://i.pinimg.com/736x/87/a3/f1/87a3f18e0f4eaa61de4ac3a6b273659d.jpg">
</div>
<div class="product-box">
<img src="https://cdn.archonia.com/images/1-76856403-1-1-original1/honkai-impact-3rd-pvc-figure-rita-rossweisse-maid-of-celestia-ver-1-8.jpg">
</div>
<div class="product-box">
<img src="https://cdn.shopify.com/s/files/1/0244/2235/0953/products/STL184688_1200x1200.jpg?v=1611343542">
</div>
<div class="product-box">
<img src="https://images.goodsmile.info/cgm/images/product/20171114/6866/48702/large/ffc6acbe3bf32e6fd793d5a4ffd34dc4.jpg">
</div>
<div class="product-box">
<img src="https://cdn02.plentymarkets.com/qozbgypaugq8/item/images/5010/full/STAT-HONKAI008a.jpg">
</div>
<div class="product-box">
<img src="https://bbts1.azureedge.net/images/p/full/2020/10/4c458d67-de44-46c0-a37f-c45d74bf0b65.jpg">
</div>
</div>
</div>
<div class="column-section">
<h2>Sign Up to Receive Info From Schicksal HQ</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input type="email" name="email" id="email" placeholder="Enter your email address">
<input type="submit" name="submit" id="submit">
</form>
</div>
</main>
<script>
window.onscroll = function() {
scrollFunction();
};
function scrollFunction() {
if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) {
headerImg.style.width = "100px";
} else {
headerImg.style.width = "200px";
}
}
</script>
</body>
</html>
I have a skeleton of a simple application containing a top header, a content area and page containers, as follows:
.container {
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
background-color: red;
}
.appheader {
width: 100%;
background-color: #cdcdcd;
color: blue;
text-align: center;
}
.appcontent {
width: 100%;
height: 100%;
background-color: blue;
}
.appcontentheader {
width: 100%;
background-color: black;
color: white;
text-align: center;
padding: 10px;
}
.page {
display: flex;
flex-direction: column;
background-color: yellow;
margin: 0px 50px 0px 50px;
width: 100%;
height: 100%;
}
.pagetitle {
background-color: grey;
color: orange;
text-align: center;
}
.pagecontent {
padding: 20px;
background-color: grey;
color: orange;
}
<div class="container">
<div class="appheader">
<h2>
MY APPLICATION MENU</h2>
</div>
<div class="appcontent">
<div class="appcontentheader">
<h4>
Section Title
</h4>
</div>
<div class="page">
<div class="pagetitle">
<h1>
PAGE TITLE
</h1>
</div>
<div class="pagecontent">
<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 in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</div>
I expected the whole content to fit into a single page, without scrolling either horizontally or vertically.
As for the example, both my appcontent and page are overflowing x and y axis (yellow and black areas are overflowing).
Seens to be problems with my cascade width: 100% and height: 100% definitions.
Why is that happenning and how to fix it properly (keep the whole content in a view without scrolling, without using scroll-x/y: hidden ?
You need to also apply flex box to the page contents in its wrapper:
.page{
display: flex;
flex-direction: column;
...
}
This will make sure that the page contents are allow allowed to flex correctly according your layout.
I am creating a container using a flexbox with 3 rows which includes a header, the body and the footer. The height of the header and footer must remain fixed while the body portion can vary and will provide scrolling if its content exceeds it's visible height:
html
<div class="container">
<div class="header">
Header
</div>
<div class="contentBody">
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 in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="footer">
<span class="footerMessage">Message goes here</span>
<span class="footerBtn">OK</span>
<span class="footerBtn">Cancel</span>
</div>
css
.container {
display: flex;
flex-direction: column;
max-height: 50vh;
}
.header {
height: 20px;
background-color: #c0c0c0;
}
.contentBody {
flex-grow: 1;
overflow-y: scroll;
}
.footer {
background-color: #c0c0c0;
display: flex;
flex-direction: row;
}
.footerMessage {
flex-grow: 1;
}
.footerBtn {
padding: 5px;
background-color: #ff0000;
margin-left: 10px;
}
If you run the fiddle sample and adjust the width of the result that is shown, the height of the footer does not remain fixed. As you make it smaller, the red buttons within the footer don't remain inside the footer. How can I fix this? Thanks a million!
https://jsfiddle.net/Deepview/bktwkcgk/3/
Consider adding the following properties to your .footer:
.footer {
background-color: #c0c0c0;
display: flex;
flex-direction: row;
height: 20px;
min-height: 20px;
white-space: nowrap;
}
Setting a height and min height will ensure that the footer will remain fixed, even with a very small screensize, overflow: hidden will make sure that elements outside of your footer will not appear (hiding the overflowing element in question). white-space: nowrap; will avoid your footer message being cut off and falling into the second line.
Updated fiddle
I have a problem where I can't get two divs to align perfectly on top of each other. Whatever I try, there remains some white space between them.
Link to the fiddle
HTML
<header>
<div id="slider" class="row">
<div class="slideshow-container">
<div class="mySlides fade">
<img id="scroller1" class="scroller" src="https://www.pexels.com/blog/wp-content/uploads/pexels-photo-18-1280x420.jpg">
</div>
</div>
</div>
</header>
<main>
<div id="Project" class="row">
<div class="singlecol">
<h1>Header1</h1>
<h2>Header2</h2>
<p class="blocktext">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 in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</main>
CSS
body {
margin: 0;
}
h1, h2, p {
font-family: 'Open Sans', sans-serif;
text-align: center;
padding: 0 5% 0 5%;
margin: 0;
}
p {
padding: 1% 0 1% 0;
text-align: justify;
color: #383433;
max-width: 100%;
vertical-align: top;
}
h1 {
color: #383433;
padding: 0 0 0 0;
}
h2 {
color: #843a32;
}
.slideshow-container {
box-sizing: border-box;
max-width: 100%;
display: inline-block;
margin: 0;
}
img.scroller {
width: 100%;
max-height: 600px;
margin: 0;
}
.row {
display: flex;
}
.col {
flex: 1;
}
.singlecol {
background-color: red;
width: 100%;
text-align: center;
display: inline-block;
}
I've been trying to fix this for hours, deleting every line of css possible, but I can't seem to wrap my head around it. I've also checked earlier questions on this topic, but none of what I try resolves the problem.
Would appreciate some fresh eyes :-)
Make the img element display:block, as it inherits the inline from its parents.
img.scroller {
width: 100%;
max-height: 600px;
margin: 0;
display: block;
}
https://jsfiddle.net/kqL84Lmx/
Simply add
.mySlides.fade {
display: grid !important;
}
to css :)
https://jsfiddle.net/o4334uss/6/
I've developed an array of different skills in angular which are showing up fine and wrapping correctly on the desktop version of my site, but on smaller screens, the items are ignoring the container's padding and width and failing to wrap always at the same point.
Ironically, where the object 'Responsive Design' from the array is displayed in the list, it will not wrap the word 'Responsive', so this always pushes past the width of the container, and the word 'Design' correctly wraps on to a new line.
Codepen: http://codepen.io/nickwcook/full/KWePVx/.
HTML:
<section id="about" ng-controller="skillsController">
<div class="sectionContent">
<div id="bio">
<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 in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="skillsList">
<p>My skills include:</p>
<p ng-repeat="skill in skills" class="skillItem">{{skill.name}}.</p>
</div>
</div>
</div>
</section>
CSS:
section
{
display: block;
margin: 0;
background: transparent;
z-index: 90;
}
.sectionContent
{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 100px 30px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
/* ABOUT SECTION */
#about .sectionContent > div
{
width: 100%;
padding: 0 15%;
}
#about p
{
line-height: 26px;
text-align: center;
}
#about #skillsList
{
text-align: center;
margin-top: 50px;
}
#about #skillsList p:first-of-type
{
margin-bottom: 10px;
}
#about #skillsList p.skillItem
{
display: inline;
margin: 0 15px;
}
Change This
#about #skillsList p.skillItem {
display: inline;
margin: 0 15px;
}
to this
#about #skillsList p.skillItem {
display: inline-block;
margin: 0 15px;
}
-- That will fix your layout, but my recommendation is that you move from the P element to using the List ( ul > li ) for a more semantic approach.