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/
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>
Struggled with a basic css management issue.
I have created a div that need to be squared one, so I just added :before element to the div to achieve the square box.
Now the problem is:
I need to add image into the squared box, It can be a rectangle, square or lengthy image.
Please take a look at the snippet below:
the image with more height breaks the div squareness.
* {
box-sizing: border-box;
}
.container {
display: flex;
}
.left {
width: 60%;
}
.right {
width: 40%;
padding-left: 15px;
}
.box {
width: 100%;
background-color: red;
display: flex;
text-align: center;
}
.box img {
width: 100%;
max-height: 100%;
margin: 0 auto;
}
.box::before {
padding-top: 100%;
content: "";
float: left;
}
<div class="container">
<div class="left">
<div class="box">
<img src="https://via.placeholder.com/800x1000" />
</div>
</div>
<div class="right">
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>
How can I keep this div as a square one?
I have tried: image height 100%, 100vh & auto to make this, but not working well.
(please note: there is no problem if image is vertically or horizontally center)
Fiddle: https://jsfiddle.net/vishnuprasadps/xgvc65r1/
from comment:
.left {width: 60%;} is that 60% of the screen (60vw X 60vw will do)? On a desktop, that square is hudge ... do you need to shrink img / .left to be set to a max-width too ? absolute does the job as is https://jsfiddle.net/jLzhbu4q/
with the help of object-fit and border-box, you can add paddings and keep your image ratio.
* {
box-sizing: border-box;
}
.container {
display: flex;
}
.left {
width: 60%;
background:green;
padding:2em;
box-sizing:border-box;
}
.right {
width: 40%;
padding-left: 15px;
}
.box {
width: 100%;
background-color: red;
display: flex;
align-items:center;
justify-content:center;
text-align: center;
position:relative;
}
.box img {
box-sizing:border-box;
padding:5em;
/*width: 100%;
max-height: 100%;*/
width: auto; /* op's choice */
max-width: 100%; /* op's choice */
max-height: 100%;/* op's choice */
margin: auto;
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
object-fit:contain;
}
.box::before {
padding-top: 100%;
content: "";
float: left;
}
<div class="container">
<div class="left">
<div class="box">
<img src="//via.placeholder.com/800x1000" />
</div>
</div>
<div class="right">
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>
You can try it by changing the CSS with this code:
.box {
position: relative;
width: 50%;
background-color: red;
display: flex;
text-align: center;
}
img {
position: absolute;
width: 100%;
height: 100%;
}
.box::after {
content: "";
display: block;
padding-bottom: 100%;
}
Do you mean something like this?
.div{
width:150px;
height:150px;
border-radius:100%;
}
.div:before{
content:"";
background-image:url("https://reactgo.com/static/171499b9f35ca9aaa3bdb4a99c2a7f41/6728c/crop-image-square.png");
background-size:cover;
background-position:center center;
width:150px;
height:150px;
position:absolute;
z-index:-1;
border-radius:100%;
}
<div class="div"></div>
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'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.
First, this is my HTML
<div class="header">
<div class="wrapper">
<div class="navi">
Logo
<ul><!--
--><li>Link 1</li><!--
--><li>Link 2</li><!--
--></ul>
</div>
</div>
</div>
<div class="wrapper">
<div class="content">
<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>
and CSS
.wrapper {
width: 90%;
max-width: 50em;
margin: 0 auto;
}
.header,
.navi {
width: 100%;
}
.header {
background: grey;
}
.navi {
background: green;
display: table;
text-align: center;
}
.navi ul {
display: table-cell;
vertical-align: middle;
text-align: right;
}
.navi li {
background: orange;
display: inline;
margin-left: 10px;
}
.navilink {
display: inline-block;
width: auto;
}
.logo {
background: red;
float: left;
}
.content {
width: 100%;
background: fuchsia;
}
Fiddle
Fullscreen Fiddle
You see, the wrapper ensures that there is always some kind of gap between content and edge of the viewport and beyond a certain point (50 em), the .wrapper doesn't exceeds any further.
The code I posted here works, but I would like to know if there is any chance to get rid of <div class="wrapper"> achieving the same result. I already tried to apply the .wrapper class directly to the elements, but that isn't working - why?
To clarify: My aim is it to make the markup cleaner. That's why I am interested in a solution then ensures that the elements behave like in the example I posted, but without the use of <div class="wrapper">. The class .wrapper has to stay of course, it's just that div that strikes me. Thats why I tried to add .wrapper directly to the elements.
Remove the wrapper div, and add the two CSS properties to the content div..
.content {
margin: 0 auto;
max-width: 50em;
}