I am trying to make some elements overlap and staggered using flexbox, but I also need it responsive to stack when on mobile. I am new to flexbox and want to see if I can get some help making this responsive. Below is my html and css. As you can see when you run the snippet, it is not how I want it to look. This is my codepen and that is the desktop layout I would like, then I would like the divs to stack as it gets to mobile: https://codepen.io/ascarb1/full/zWZVRw/
Any help is really appreciated.
body {
max-width: 1600px;
width: 95%;
margin: 0 auto;
}
.home-story-container {
display: flex;
margin: 10em auto;
flex-direction: column;
justify-content: space-between;
align-items: left;
float: none;
}
.home-story-container .home-story-text-block {
height: 373px;
width: 618px;
background: #ddd;
align-self: flex-start;
flex-shrink: 0;
margin-left: 15em;
}
.home-story-container .home-story-text-block .home-story-text-content {
width: 60%;
margin: 4em 0 0 4em;
}
.home-story-container .home-story-image-block {
width: 640px;
align-self: flex-end;
flex-shrink: 0;
margin-right: 14em;
margin-top: -23em;
}
.home-story-container .home-story-video-block {
width: auto;
align-self: flex-start;
flex-shrink: 0;
margin-left: 21em;
margin-top: -10em;
}
.home-story-container .home-story-quote-block {
align-self: flex-end;
flex-shrink: 0;
margin-right: 16em;
margin-top: -9.5em;
width: 413px;
}
<div class="col-md-12">
<div class="home-story-container">
<div class="home-story-text-block">
<div class="home-story-text-content">
<h1>Lorem ipsum dolor sit amet</h1>
<br>
<p>Lorem ipsum dolor sit amet, malesuada quisque sit consectetuer adipiscing odit, sed tortor leo nunc, a vel erat ultricies.</p>
</div>
</div>
<div class="home-story-image-block"><img src="http://via.placeholder.com/640x373"></div>
<div class="home-story-video-block"><iframe width="560" height="315" src="https://www.youtube.com/embed/SkgTxQm9DWM?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe></div>
<div class="home-story-quote-block">
<p>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet<br><span>Lorem ipsum dolor sit amet.</span></p>
</div>
</div>
</div>
Related
I have a image that I would like to shrink in a flexbox column layout. I have read a bunch of pertinent threads but I still can't figure it out.
I want the right column to always have the same height of the left column and the image in the right column to fill the height of the remaining space not taken up by the text. Any thoughts? Thank you!
I would like it to look like this:
Codepen here: https://codepen.io/interzonestudio/pen/qBRPxzg
This is my HTML:
<div class="block-one">
<div class="block-one-left">
<img src="https://via.placeholder.com/300x400" alt="">
</div>
<div class="block-one-right">
<div class="block-one-right-top">
<img src="https://via.placeholder.com/300x400?text=Shrink+Me!" alt="">
</div>
<div class="block-one-right-bottom">
<p>Lorem ipsum dolor sit amet, consectetuer diiscing elit, sed diam nonummy nibh dolor it euismod tincidunt ut laoreet dolore.</p>
</div>
</div>
</div>
and this is my CSS:
.block-one {
width: 50%;
padding: 50px;
background: #9ac1e4;
margin: 0 50px 100px 50px;
display: flex;
min-height: 0;
min-width: 0;
max-width: 100%;
max-height: 100%;
}
.block-one-left {
width: 40%;
padding-right: 50px;
}
.block-one-left img {
width: 100%;
}
.block-one-right {
width: 60%;
display: flex;
flex: 1;
flex-direction: column;
}
.block-one-right-top {
height: 100%;
flex: 1;
}
.block-one-right-top img {
height: 100%;
max-width: 100%;
max-height: 100%;
min-height: 0;
min-width: 0;
width: auto;
object-fit: contain;
}
You can achieve this with a tiny piece of javascript to calculate the difference of left img height minus text height and set the right image height to that difference. Just place these 4 lines javascript in a <script></script>-tag just before the closing body tag.
Working example:
var max_height = document.querySelector('.block-one-left').clientHeight;
var text_height = document.querySelector('.block-one-right-bottom').clientHeight;
var shrink_height = max_height - text_height;
document.querySelector('.block-one-right-top').style.height = shrink_height + 'px';
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.block-one {
display: flex;
width: 600px;
margin: 0 50px 100px 50px;
padding: 25px;
background: #9ac1e4;
}
.block-one-left {
height: 300px;
margin-right: 25px;
}
.block-one-left img {
height: 100%;
}
.block-one-right {
width: 225px;
}
.block-one-right-top img {
height: 100%;
}
.block-one-right-bottom {
padding-top: 25px;
}
<div class="block-one">
<div class="block-one-left">
<img src="https://via.placeholder.com/300x400" alt="">
</div>
<div class="block-one-right">
<div class="block-one-right-top">
<img src="https://via.placeholder.com/300x400?text=Shrink+Me!" alt="">
</div>
<div class="block-one-right-bottom">
<p>Lorem ipsum dolor sit amet, consectetuer diiscing elit, sed diam nonummy nibh dolor it euismod tincidunt ut laoreet dolore.</p>
</div>
</div>
</div>
If you want it to be responsive you have to wrap the 4 lines in a function. Because you have to listen for at least two events (image loaded and window resized) it is much cleaner to call the function instead of having the 4 lines twice in your code.
Working example:
var left_img = document.querySelector('.block-one-left img');
function setHeight() {
var max_height = left_img.clientHeight;
var text_height = document.querySelector('.block-one-right-bottom').clientHeight;
var shrink_height = max_height - text_height;
document.querySelector('.block-one-right-top').style.height = shrink_height + 'px';
}
left_img.addEventListener('load', setHeight);
window.addEventListener('resize', setHeight);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.block-one {
display: flex;
width: 100%;
padding: 25px;
background: #9ac1e4;
}
.block-one-left {
width: 40%;
margin-right: 25px;
}
.block-one-left img {
width: 100%;
}
.block-one-right {
width: 50%;
}
.block-one-right-top img {
height: 100%;
}
.block-one-right-bottom {
padding-top: 25px;
}
<div class="block-one">
<div class="block-one-left">
<img src="https://via.placeholder.com/300x400" alt="">
</div>
<div class="block-one-right">
<div class="block-one-right-top">
<img src="https://via.placeholder.com/300x400?text=Shrink+Me!" alt="">
</div>
<div class="block-one-right-bottom">
<p>Lorem ipsum dolor sit amet, consectetuer diiscing elit, sed diam nonummy nibh dolor it euismod tincidunt ut laoreet dolore.</p>
</div>
</div>
</div>
My goal here is to display 4 images in a 2x2 grid at the center of the page that will have text underneath all of the images. These images will then serve as a link to other pages. However, I am having trouble getting these images to display how I would like them to! Any help would be greatly appreciated. Please see relevant code. Thank you!
#main img{
max-width: 500px;
height: auto;
margin-top: 10px;
display: block;
grid-template-columns: auto;
grid-template-rows: auto;
grid-gap: 10px;
margin-left: auto;
margin-right: auto;
align-items: center;
border: 3px lightblue solid;
position: relative;
}
<div id="main">
<div class="category-1">
<img src="./images/apples.jpg" alt="Sandwich"/>
<h3>Candy Apples!</h3>
<p>Just some random text, lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
<div class="category-2">
<img src="./images/santacookie.jpg" alt="Steak">
<h3>Christmas Cookies!</h3>
<p>Once again, some random text to lorem lorem lorem lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
<div class="category-3">
<img src="./images/eastertreats.jpg" alt="Cherries">
<h3>Easter Treats!</h3>
<p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
<div class="category-4">
<img src="/w3images/wine.jpg" alt="Pasta and Wine">
<h3>Category 4</h3>
<p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
</div>
You have placed and used the grid properties wrongly.
Try this:
#main {
display: grid;
grid-template-columns: auto auto;
grid-gap: 10px;
}
#main img{
max-width: 500px;
height: auto;
margin-top: 10px;
display: block;
margin: auto;
border: 3px lightblue solid;
}
How can I expand the width of the text group while not affecting the sizing of the image? When I add a width on the text group, it makes the image smaller.
body {
background: #0A0B5B;
}
.hero {
display: flex;
justify-content: space-between;
}
.text-group {
background-color: green;
}
img {
position: relative;
right: -40%;
}
<section class="hero">
<div class="text-group">
<h2>Space Enthusiast & JavaScript Developer</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
</div>
<img src="https://raw.githubusercontent.com/iamshaunjp/responsive-css-grid-build/lesson-14/assets/banner_image.png" alt="">
</section>
I think this is more suitable for a background:
body {
background: #0A0B5B;
}
.hero {
display: flex;
background:
url(https://raw.githubusercontent.com/iamshaunjp/responsive-css-grid-build/lesson-14/assets/banner_image.png)
right/
auto 100%
no-repeat;
}
.text-group {
min-height: 300px;
color:#fff;
}
<section class="hero">
<div class="text-group">
<h2>Space Enthusiast & JavaScript Developer</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
</div>
</section>
You can apply a fixed width and flex-shrink: 0; to the .text-group. That way it won't become any smaller than the defined width.
body {
background: #0A0B5B;
}
.hero {
display: flex;
justify-content: space-between;
}
.text-group {
background-color: green;
width: 300px;
flex-shrink: 0;
}
img {
position: relative;
right: -40%;
}
<section class="hero">
<div class="text-group">
<h2>Space Enthusiast & JavaScript Developer</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
</div>
<img src="https://raw.githubusercontent.com/iamshaunjp/responsive-css-grid-build/lesson-14/assets/banner_image.png" alt="">
</section>
I modified the code with more flex configuration. I hope this is what you are looking for.
body {
background: #0A0B5B;
}
.hero {
display: flex;
justify-content: space-between;
}
.text-group {
background-color: green;
display: flex;
flex-direction: column;
justify-content: center;
flex: 1 0 500px;
}
img {
flex: 0 0 auto;
}
<section class="hero">
<div class="text-group">
<h2>Space Enthusiast & JavaScript Developer</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
</div>
<img src="https://raw.githubusercontent.com/iamshaunjp/responsive-css-grid-build/lesson-14/assets/banner_image.png" alt="">
</section>
I have dealt with this problem for some days now and it's making me crazy, I want the text inside the circle to move in the same position inside the cirkle div when I make the screen smaller, as illustrated in the picture.
If you have any tips please share!
CSS Code and Html Code:
.circleBase {
border-radius: 50%;
}
.contact-circle {
margin-top: 29%;
margin-left: 4%;
position: fixed;
width: 23%;
height: auto;
padding-top: 23%;
background-color: rgba(255, 86, 86, 0.2);
}
#contact-text {
top: 20%;
bottom: 20%;
left: 18%;
font-size: auto;
position: absolute;
text-align: center;
width: 60%;
opacity: 1;
}
<div class="circleBase contact-circle">
<div id="contact-text">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
</p>
</div>
</div>
Use another method to center the text. Here is an idea with flex:
.circleBase {
border-radius: 50%;
}
.contact-circle {
position: fixed;
width: 23%;
height: auto;
padding-top: 23%;
background-color: rgba(255, 86, 86, 0.2);
}
#contact-text {
top: 0;
position: absolute;
bottom: 0;
left: 10%;
right: 10%;
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center
}
<div class="circleBase contact-circle">
<div id="contact-text">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
</p>
</div>
</div>
Responsive web site - #media (min-width:450px) and (max-width:900px) { css style }
<div class="circleBase contact-circle">
<div id="contact-text">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
</div>
</div>
Css #media Example
.circleBase {
height:800px;
width:800px;
}
#media (max-width:479px) {
.circleBase {
height: 400px;
width:400px;
}
}
I have background image and footer with parallax effect which is working perfectly on the desktop but It is not working on the mobile device. I am not able to scroll the background image to display the footer. I need to scroll the image to check the footer like desktop. Would you help me in this?
CSS
body{
margin: 0;
padding: 0;
height: 100%;
}
#content {
background-image: url('http://7606-presscdn-0-74.pagely.netdna-cdn.com/wp-content/uploads/2016/03/Dubai-Photos-Images-Travel-Tourist-Images-Pictures-800x600.jpg');
background-size: cover;
width: 100%;
height: auto !important;
background-position: center;
min-height: 100%;
margin-bottom: 180px;
z-index: 1;
background-repeat: no-repeat;
}
#footer {
position:fixed;
bottom:0;
left:0;
width:100%;
height:200px;
z-index:-1;
background-color:#000;
color: #fff;
}
.column-left{ float: left; width: 33%; }
.column-right{ float: right; width: 33%; }
.column-center{ display: inline-block; width: 33%; }
.column-left, .column-right, .column-center
{
margin-top: 30px;
}
HTML
<div id="content">
</div>
<div id="footer">
<p class="column-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="column-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="column-center" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
Declare height, I couldn't find above codes even working large resolution, so by declaring height for #content it work.
body{
margin: 0;
padding: 0;
}
#content {
background-image: url('http://placehold.it/1600x1600');
background-size: cover;
width: 100%;
height: 100vh;
background-position: center;
margin-bottom: 180px;
z-index: 1;
background-repeat: no-repeat;
}
#footer {
position:fixed;
bottom:0;
left:0;
width:100%;
height:200px;
z-index:-1;
background-color:#000;
color: #fff;
}
.column-left{ float: left; width: 33%; }
.column-right{ float: right; width: 33%; }
.column-center{ display: inline-block; width: 33%; }
.column-left, .column-right, .column-center
{
margin-top: 30px;
}
#media screen and (max-width:640px){
#content{
height: 100vh;
}
}
<div id="content">
<div id="footer">
<p class="column-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="column-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="column-center" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>