I'm using flexbox to align 3 items horizontally. The 3 aside items under the section element with the class of .main are aligned across when the viewport is the size of the desktop's.
I want for the three flex-items to stack vertically on top of each other as I manually shrink the viewport on my desktop browser.
I've used display: flex for the parent container as well as flex-direction: row flex-wrap: wrap
My problem is that as I shrink the viewport width, the three flex-items just get narrower as they're next to each other. They don't stack vertically as expected.
Any ideas would help!
here's the html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel ="stylesheet" href = "screen.css">
<title>Creating a Responsive Web Design</title>
</head>
<body>
<div id = "page">
<header>
<a class ="logo" href="#" title="Everyday Things">
<img src="graphics/logo.svg" />
</a>
<div class="hero">
<h1>Add interest with natural textures</h1>
<a class="btn" title="Get advice from top designers" href="#">Get advice from top designers</a>
</div>
</header>
<section class="main">
<aside>
<div class="content">
<h3>What's trending</h3>
<p>Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.</p>
</div>
</aside>
<aside>
<div class="content">
<h3>Where to find it</h3>
<p>Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Lorem ipsum dolor sit amet, consect.</p>
</div>
</aside>
<aside>
<div class="content">
<h3>Tools of the trade</h3>
<p>Nullam sit amet enim. Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci rhoncus neque, id pulvinar odio.</p>
</div>
</aside>
</section>
<section class="atmosphere">
<article>
<h2>Creating a modern atmosphere</h2>
<p>Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Lorem ipsum dolor sit amet etuer adipiscing elit. Pulvinar odio lorem non turpis. Nullam sit amet enim lorem.</p>
Learn More
</article>
</section>
<section class="how-to">
<aside>
<div>
<img src="graphics/photo_seating.jpg"/>
<h4>How-To: Seating</h4>
<p>Consectetuer adipiscing elit. Morbi commodo ipsum sed gravida orci magna rhoncus pulvinar odio lorem.</p>
<a title="Learn how to choose the proper seating." href="http://codifydesign.com">Learn more</a>
</div>
</aside>
<aside>
<div>
<img src="graphics/photo_lighting.jpg"/>
<h4>How-To: Lighting</h4>
<p>Morbi commodo, ipsum sed pharetra gravida magna rhoncus neque id pulvinar odio lorem non turpis nullam sit amet.</p>
<a title="Learn how to choose the proper lighting." href="http://codifydesign.com">Learn more</a>
</div>
</aside>
<blockquote>
<p class="quote">Lorem ipsum dolor sit amet conse ctetuer adipiscing elit. Morbi comod sed dolor sit amet consect adipiscing elit.</p>
<p class="credit">Author Name Business Title Company</p>
</blockquote>
</section>
<nav>
<ul>
<li>
About Us
<ul>
<li>
sub-link-one
</li>
<li>
sub-link-two
</li>
<li>
sub-link-three
<ul>
<li>
sub-sub-link-one
</li>
<li>
sub-sub-link-two
</li>
</ul>
</li>
</ul>
</li>
<li>
Design Corner
<ul>
<li>
sub-link-one
</li>
<li>
sub-link-two
</li>
</ul>
</li>
<li>
Products
</li>
<li>
Contact us
</li>
</ul>
</nav>
<footer></footer>
</div>
</body>
</html>
Here's the css:
/* CSS Document for Screens */
#import url('https://fonts.googleapis.com/css?family=Open+Sans');
#import 'reset.css';
/* apply a natural box layout model to all elements, but allowing components to change */
*, *:before, *:after {
box-sizing: inherit;
}
html{
box-sizing: border-box;
font-size: 16px;
}
body{
font-family: 'Open Sans', sans-serif;
}
#page{
margin: 2em;
}
h1, h2, h3, h4{
font-weight: 700;
}
h1{
margin: 0 0 1em 0;
font-size: 2.8em;
}
h2{
margin: 0 0 0.5em 0;
font-size: 1.6em;
}
h3{
font-size: 1.3em;
margin: 0 0 0.5em 0;
}
h4{
font-size: 1em;
margin: 0 0 1.5em 0;
}
p{
margin: 0 0 1em 0;
}
a{
color: #007eff;
}
a:visited{
color: #65b1ff
}
/*header styles*/
header{
background: url('graphics/banner_1200.jpg') center center/cover no-repeat;
display: flex;
height: 430px;
justify-content: space-around;
/*padding: 2em;*/
}
.logo{
height: 66px;
width: 160px;
}
.hero{
flex-basis: 42%;
align-self: center;
}
.hero h1{
color: #fff;
line-height: 1.05em;
}
/*Section styles*/
.main{
margin: 4em;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.main aside{
padding: 0 1%;
flex-basis: 30%;
}
.main aside .content h3{
margin-bottom: 1.45em;
}
.main aside .content p{
line-height: 1.5em;
}
Give them a min-width
.main aside{
padding: 0 1%;
flex-basis: 30%;
min-width: 300px;
}
Sample
/* CSS Document for Screens */
#import url('https://fonts.googleapis.com/css?family=Open+Sans');
#import 'reset.css';
/* apply a natural box layout model to all elements, but allowing components to change */
*, *:before, *:after {
box-sizing: inherit;
}
html{
box-sizing: border-box;
font-size: 16px;
}
body{
font-family: 'Open Sans', sans-serif;
}
#page{
margin: 2em;
}
h1, h2, h3, h4{
font-weight: 700;
}
h1{
margin: 0 0 1em 0;
font-size: 2.8em;
}
h2{
margin: 0 0 0.5em 0;
font-size: 1.6em;
}
h3{
font-size: 1.3em;
margin: 0 0 0.5em 0;
}
h4{
font-size: 1em;
margin: 0 0 1.5em 0;
}
p{
margin: 0 0 1em 0;
}
a{
color: #007eff;
}
a:visited{
color: #65b1ff
}
/*header styles*/
header{
background: url('graphics/banner_1200.jpg') center center/cover no-repeat;
display: flex;
height: 430px;
justify-content: space-around;
/*padding: 2em;*/
}
.logo{
height: 66px;
width: 160px;
}
.hero{
flex-basis: 42%;
align-self: center;
}
.hero h1{
color: #fff;
line-height: 1.05em;
}
/*Section styles*/
.main{
margin: 4em;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.main aside{
padding: 0 1%;
flex-basis: 30%;
min-width: 300px;
}
.main aside .content h3{
margin-bottom: 1.45em;
}
.main aside .content p{
line-height: 1.5em;
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel ="stylesheet" href = "screen.css">
<title>Creating a Responsive Web Design</title>
</head>
<body>
<div id = "page">
<header>
<a class ="logo" href="#" title="Everyday Things">
<img src="graphics/logo.svg" />
</a>
<div class="hero">
<h1>Add interest with natural textures</h1>
<a class="btn" title="Get advice from top designers" href="#">Get advice from top designers</a>
</div>
</header>
<section class="main">
<aside>
<div class="content">
<h3>What's trending</h3>
<p>Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.</p>
</div>
</aside>
<aside>
<div class="content">
<h3>Where to find it</h3>
<p>Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Lorem ipsum dolor sit amet, consect.</p>
</div>
</aside>
<aside>
<div class="content">
<h3>Tools of the trade</h3>
<p>Nullam sit amet enim. Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci rhoncus neque, id pulvinar odio.</p>
</div>
</aside>
</section>
<section class="atmosphere">
<article>
<h2>Creating a modern atmosphere</h2>
<p>Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Lorem ipsum dolor sit amet etuer adipiscing elit. Pulvinar odio lorem non turpis. Nullam sit amet enim lorem.</p>
Learn More
</article>
</section>
<section class="how-to">
<aside>
<div>
<img src="graphics/photo_seating.jpg"/>
<h4>How-To: Seating</h4>
<p>Consectetuer adipiscing elit. Morbi commodo ipsum sed gravida orci magna rhoncus pulvinar odio lorem.</p>
<a title="Learn how to choose the proper seating." href="http://codifydesign.com">Learn more</a>
</div>
</aside>
<aside>
<div>
<img src="graphics/photo_lighting.jpg"/>
<h4>How-To: Lighting</h4>
<p>Morbi commodo, ipsum sed pharetra gravida magna rhoncus neque id pulvinar odio lorem non turpis nullam sit amet.</p>
<a title="Learn how to choose the proper lighting." href="http://codifydesign.com">Learn more</a>
</div>
</aside>
<blockquote>
<p class="quote">Lorem ipsum dolor sit amet conse ctetuer adipiscing elit. Morbi comod sed dolor sit amet consect adipiscing elit.</p>
<p class="credit">Author Name Business Title Company</p>
</blockquote>
</section>
<nav>
<ul>
<li>
About Us
<ul>
<li>
sub-link-one
</li>
<li>
sub-link-two
</li>
<li>
sub-link-three
<ul>
<li>
sub-sub-link-one
</li>
<li>
sub-sub-link-two
</li>
</ul>
</li>
</ul>
</li>
<li>
Design Corner
<ul>
<li>
sub-link-one
</li>
<li>
sub-link-two
</li>
</ul>
</li>
<li>
Products
</li>
<li>
Contact us
</li>
</ul>
</nav>
<footer></footer>
</div>
</body>
</html>
Or use a media query to switch the flex direction
#media screen and (max-width: 600px) {
.main{
flex-direction: column;
}
}
Sample
/* CSS Document for Screens */
#import url('https://fonts.googleapis.com/css?family=Open+Sans');
#import 'reset.css';
/* apply a natural box layout model to all elements, but allowing components to change */
*, *:before, *:after {
box-sizing: inherit;
}
html{
box-sizing: border-box;
font-size: 16px;
}
body{
font-family: 'Open Sans', sans-serif;
}
#page{
margin: 2em;
}
h1, h2, h3, h4{
font-weight: 700;
}
h1{
margin: 0 0 1em 0;
font-size: 2.8em;
}
h2{
margin: 0 0 0.5em 0;
font-size: 1.6em;
}
h3{
font-size: 1.3em;
margin: 0 0 0.5em 0;
}
h4{
font-size: 1em;
margin: 0 0 1.5em 0;
}
p{
margin: 0 0 1em 0;
}
a{
color: #007eff;
}
a:visited{
color: #65b1ff
}
/*header styles*/
header{
background: url('graphics/banner_1200.jpg') center center/cover no-repeat;
display: flex;
height: 430px;
justify-content: space-around;
/*padding: 2em;*/
}
.logo{
height: 66px;
width: 160px;
}
.hero{
flex-basis: 42%;
align-self: center;
}
.hero h1{
color: #fff;
line-height: 1.05em;
}
/*Section styles*/
.main{
margin: 4em;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.main aside{
padding: 0 1%;
flex-basis: 30%;
}
.main aside .content h3{
margin-bottom: 1.45em;
}
.main aside .content p{
line-height: 1.5em;
}
#media screen and (max-width: 600px) {
.main{
flex-direction: column;
}
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel ="stylesheet" href = "screen.css">
<title>Creating a Responsive Web Design</title>
</head>
<body>
<div id = "page">
<header>
<a class ="logo" href="#" title="Everyday Things">
<img src="graphics/logo.svg" />
</a>
<div class="hero">
<h1>Add interest with natural textures</h1>
<a class="btn" title="Get advice from top designers" href="#">Get advice from top designers</a>
</div>
</header>
<section class="main">
<aside>
<div class="content">
<h3>What's trending</h3>
<p>Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.</p>
</div>
</aside>
<aside>
<div class="content">
<h3>Where to find it</h3>
<p>Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Lorem ipsum dolor sit amet, consect.</p>
</div>
</aside>
<aside>
<div class="content">
<h3>Tools of the trade</h3>
<p>Nullam sit amet enim. Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci rhoncus neque, id pulvinar odio.</p>
</div>
</aside>
</section>
<section class="atmosphere">
<article>
<h2>Creating a modern atmosphere</h2>
<p>Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Lorem ipsum dolor sit amet etuer adipiscing elit. Pulvinar odio lorem non turpis. Nullam sit amet enim lorem.</p>
Learn More
</article>
</section>
<section class="how-to">
<aside>
<div>
<img src="graphics/photo_seating.jpg"/>
<h4>How-To: Seating</h4>
<p>Consectetuer adipiscing elit. Morbi commodo ipsum sed gravida orci magna rhoncus pulvinar odio lorem.</p>
<a title="Learn how to choose the proper seating." href="http://codifydesign.com">Learn more</a>
</div>
</aside>
<aside>
<div>
<img src="graphics/photo_lighting.jpg"/>
<h4>How-To: Lighting</h4>
<p>Morbi commodo, ipsum sed pharetra gravida magna rhoncus neque id pulvinar odio lorem non turpis nullam sit amet.</p>
<a title="Learn how to choose the proper lighting." href="http://codifydesign.com">Learn more</a>
</div>
</aside>
<blockquote>
<p class="quote">Lorem ipsum dolor sit amet conse ctetuer adipiscing elit. Morbi comod sed dolor sit amet consect adipiscing elit.</p>
<p class="credit">Author Name Business Title Company</p>
</blockquote>
</section>
<nav>
<ul>
<li>
About Us
<ul>
<li>
sub-link-one
</li>
<li>
sub-link-two
</li>
<li>
sub-link-three
<ul>
<li>
sub-sub-link-one
</li>
<li>
sub-sub-link-two
</li>
</ul>
</li>
</ul>
</li>
<li>
Design Corner
<ul>
<li>
sub-link-one
</li>
<li>
sub-link-two
</li>
</ul>
</li>
<li>
Products
</li>
<li>
Contact us
</li>
</ul>
</nav>
<footer></footer>
</div>
</body>
</html>
Looks like you confused flex-direction: row with flex-direction: column! If you want to stack them in a column, use the column flex direction :)
Related
My titles may be one line or multiple lines.
I'm trying to align the content under the title to the top without have to specify a height for the title.
If I use margin-bottom on the title, the content aligns to the bottom.
Adding min-height to the title gets the result I need but if the title breaks to more lines, the min-height breaks it.
In the image below, I am trying to get the text to align to the top of the red line.
.flexbox-row {
display: flex;
}
.columns .section-title {
margin-bottom: auto; /* ADDED */
}
.columns .item {
display: flex;
flex-direction: column;
max-width: 33.333333%;
flex-basis: 33.333333%;
padding: 0px 45px;
}
.columns .item:first-child {
padding-left: 0;
}
.columns .item:last-child {
padding-right: 0;
}
#buy-sell .columns p {
padding-right: 110px;
}
<section id="" class="columns">
<div class="outer-container">
<div class="flexbox-row item-wrapper">
<div class="item">
<h2 class="section-title">
Title 1
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis elit nec magna placerat pharetra non vitae nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis elit nec magna placerat pharetra non vitae nibh.
</p>
</div>
<div class="item">
<h2 class="section-title">
Title 2 Title 2 Title 2 Title 2
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis elit nec magna placerat pharetra non vitae nibh.
</p>
</div>
<div class="item">
<h2 class="section-title">
Title 3 Title 3 Title 3 Title 3 Title 3
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis elit nec magna placerat pharetra non vitae nibh.
</p>
</div>
</div>
</div>
</section>
Try putting you titles in a different row than your content. For example:
<div class="row">
<h1>title</h1>
<h1>title</h1>
<h1>title</h1>
</div>
<div class="row">
<p>content</p>
<p>content</p>
<p>content</p>
</div>
This way the content will stick to the top of each row. You'll need to use some flex stuff to make it work the way you want it though. Something like this should work:
.row {
flex-direction: 'row';
justify-content: space-between;
min-height: '40px';
}
Without changing anything of the original code all you need to do is force the margin-bottom to a size you need. Fortunately a simple margin-bottom: auto will do the trick:
.columns .section-title {
margin-bottom: auto;
}
The snippet...
.flexbox-row {
display: flex;
}
.columns .section-title {
margin-bottom: auto; /* ADDED */
}
.columns .item {
display: flex;
flex-direction: column;
max-width: 33.333333%;
flex-basis: 33.333333%;
padding: 0px 45px;
}
.columns .item:first-child {
padding-left: 0;
}
.columns .item:last-child {
padding-right: 0;
}
#buy-sell .columns p {
padding-right: 110px;
}
<section id="" class="columns">
<div class="outer-container">
<div class="flexbox-row item-wrapper">
<div class="item">
<h2 class="section-title">
Title 1
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis elit nec magna placerat pharetra non vitae nibh.
</p>
</div>
<div class="item">
<h2 class="section-title">
Title 2 Title 2 Title 2 Title 2
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis elit nec magna placerat pharetra non vitae nibh.
</p>
</div>
<div class="item">
<h2 class="section-title">
Title 3 Title 3 Title 3 Title 3 Title 3
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis elit nec magna placerat pharetra non vitae nibh.
</p>
</div>
</div>
</div>
</section>
I have a div with a title, a description and a button. I want to show the title but hide the description and button until the user hovers over the div.
The problem I am having is that the description is dynamic and the number of lines can be different so you can see some of the content under the title.
.short-description-block {
position: absolute;
z-index: 1;
margin-bottom: 0;
background-color: rgba(93,179,193, .7);
align-items: center;
display: flex;
width: 100%;
transform: translateY(70%); /* push the content down but show the title */
transition: all .5s ease;
bottom: 0;
}
.block-content:hover .short-description-block {
transform: translateY(0%);
}
jsfiddle
What you could do is use the calc() css function to calculate the value in the initial translateY.
What you want is first know the height of the title. The title is an h5 html element that have this styles that impact his height (just use the inspector to get them):
h5 {
font-size: 0.83em;
margin-block-start: 1.67em;
margin-block-end: 1.67em;
}
So the height of the title will be approximatively .8em + (2 * 1.6em).
So now you want to translate .short-description-block so that just the title is visible. That can be done using:
translateY(calc(100% - (.8em + (2 * 1.6em))));
Here is the example:
.main-feature-block {
margin-bottom: 12px;
overflow: hidden;
width: 49.5%;
}
.block-content {
height: 100%;
position: relative;
}
.feature-image {
background-position: center !important;
background-size: cover !important;
padding: 52% 0;
height: 100%;
}
.short-description-block {
position: absolute;
z-index: 1;
margin-bottom: 0;
background-color: rgba(93, 179, 193, .7);
align-items: center;
display: flex;
width: 100%;
transform: translateY(calc(100% - (.8em + (2 * 1.6em))));
transition: all .5s ease;
bottom: 0;
}
.content {
padding: 0px 35px 10px;
}
.main-feature-block .block-content:hover .short-description-block {
transform: translateY(0%);
}
<div class="col-sm-6 main-feature-block">
<div class="block-content">
<div class="feature-image" style="background: url('https://via.placeholder.com/150')"></div>
<div class="short-description-block">
<div class="content">
<h5>Lorem Ipsum</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu lacus euismod, finibus orci ut, interdum velit. Donec sit amet lorem et velit auctor commodo at non purus.</p>
<div class="btn-content">
<a class="c-btn" href="#" target="_self">Learn More</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 main-feature-block">
<div class="block-content">
<div class="feature-image" style="background: url('https://via.placeholder.com/150')"></div>
<div class="short-description-block">
<div class="content">
<h5>Lorem Ipsum</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu lacus euismod, finibus orci ut, interdum velit. Donec sit amet lorem et velit auctor commodo at non purus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu lacus euismod, finibus orci ut, interdum velit. Donec sit amet lorem et velit auctor commodo at non purus.</p>
<div class="btn-content">
<a class="c-btn" href="#" target="_self">Learn More</a>
</div>
</div>
</div>
</div>
</div>
I am struggling with the setting three responsive columns in a row using Bootstrap 4.
.buttons {
border: 1px solid #e86225;
color: #e86225 !important;
padding: 10px 20px;
font-size: 14px;
}
.buttons:hover {
border: 1px solid #ffffff;
background-color: #e86225;
color: #ffffff !important;
transition: background-color 1s, border 1s, color 1s;
}
.container-custom {
padding-top: 80px;
padding-bottom: 80px;
}
.custom-link {
padding: 15px 0;
}
.container p {
margin: 25px 0;
max-width: 400px;
}
#media(max-width: 767px){
.container-custom {
padding-top: 50px;
padding-bottom: 50px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="container">
<div class="row container-custom justify-content-center">
<h2>Blog</h2>
<div class='d-flex flex-wrap pt-5'>
<div class="col-sm-12 col-md-4">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHBMzMRL0g3ELio_DdCRvdajdF812AQPP2AbmM_jYr_66CnwgS" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh sem, ultricies sit amet tellus ut, iaculis interdum ante. Quisque at nibh ac diam faucibus congue.
</p>
<div class="custom-link">
Read more >
</div>
</div>
<div class="col-sm-12 col-md-4">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQh3Afn3A1FKb24tpO6eAdqr8hCdnafjqwCNqgjdSAWK1igoWfk" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh sem, ultricies sit amet tellus ut, iaculis interdum ante. Quisque at nibh ac diam faucibus congue.
</p>
<div class="custom-link">
Read more >
</div>
</div>
<div class="col-sm-12 col-md-4">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFsb6TxovKdTNx-8gdo1R01nZXxRRauett2KQ_ci76VgjK2hR7" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh sem, ultricies sit amet tellus ut, iaculis interdum ante. Quisque at nibh ac diam faucibus congue.
</p>
<div class="custom-link">
Read more >
</div>
</div>
</div>
</div>
The problem is when media screen width is smaller than 767px, they are going to the left. I want to make image in the middle of column, the beginning of the text should be at the beginning of the imaeg and the end of text at the end of image, button should be at the beginning of the image too like here:
enter image description here
Just add width:100% to your images so they take all the space on the column
.buttons {
border: 1px solid #e86225;
color: #e86225 !important;
padding: 10px 20px;
font-size: 14px;
}
.buttons:hover {
border: 1px solid #ffffff;
background-color: #e86225;
color: #ffffff !important;
transition: background-color 1s, border 1s, color 1s;
}
.container-custom {
padding-top: 80px;
padding-bottom: 80px;
}
.custom-link {
padding: 15px 0;
}
.container p {
margin: 25px 0;
max-width: 400px;
}
img{
width:100%;
}
#media(max-width: 767px){
.container-custom {
padding-top: 50px;
padding-bottom: 50px;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="container">
<div class="row container-custom justify-content-center">
<h2>Blog</h2>
<div class='d-flex flex-wrap pt-5'>
<div class="col-sm-12 col-md-4">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHBMzMRL0g3ELio_DdCRvdajdF812AQPP2AbmM_jYr_66CnwgS" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh sem, ultricies sit amet tellus ut, iaculis interdum ante. Quisque at nibh ac diam faucibus congue.
</p>
<div class="custom-link">
Read more >
</div>
</div>
<div class="col-sm-12 col-md-4">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQh3Afn3A1FKb24tpO6eAdqr8hCdnafjqwCNqgjdSAWK1igoWfk" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh sem, ultricies sit amet tellus ut, iaculis interdum ante. Quisque at nibh ac diam faucibus congue.
</p>
<div class="custom-link">
Read more >
</div>
</div>
<div class="col-sm-12 col-md-4">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFsb6TxovKdTNx-8gdo1R01nZXxRRauett2KQ_ci76VgjK2hR7" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh sem, ultricies sit amet tellus ut, iaculis interdum ante. Quisque at nibh ac diam faucibus congue.
</p>
<div class="custom-link">
Read more >
</div>
</div>
</div>
</div>
The image width could be the issue. Add img { width: 100%; } and class="img-fluid" to your img tags.
Add to css:
img { width: 100%; }
HTML:
<img class="img-fluid" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQh3Afn3A1FKb24tpO6eAdqr8hCdnafjqwCNqgjdSAWK1igoWfk" alt="">
or something similar so the images look like the layout in your attached image.
Example codepen using your code: https://codepen.io/brooksrelyt/pen/MZdLYj
I'm having trouble getting my images to resize fully.
Ideally I want the image to resize so that the option fits the screen, currently it only fits the width, why so? Is it possible to get the behavior I wish by just using css, maybe a media query is needed? Scorched over google trying to find a similar problem, but no luck!
Thanks in advance!
UPDATE:
To clarify, my problem is that the image is not resized, if the height of the window gets small enough - the header disappears and I get a scroll bar. I want all of the content to scale down, so that no scroll bar is needed.
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
background-color: aqua;
}
.content {
display: flex;
overflow-x: auto;
flex: 2 1 auto;
flex-wrap: nowrap;
}
.content::-webkit-scrollbar {
display: none;
}
.option {
display: flex;
flex-direction: column;
margin: auto 1em;
width: 90%;
height: 70%;
text-align: justify;
border: 3px solid black;
}
.img {
flex: 1;
}
.title {
flex: 0;
font-weight: bold;
text-align: center;
flex: 1;
margin: auto;
}
.desc {
flex: 0;
}
.header {
flex: 2;
text-align: center;
background-color: red;
}
.footer {
flex: 1;
background-color: brown;
}
<div class="container">
<div class="header">
Fusce pellentesque ante.
</div>
<div class="content">
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Proin hendrerit.</p>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla non lacus tincidunt suscipit. Nam nec arcu a erat convallis.</p>
</div>
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Nullam at.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut congue eros. Aenean sit amet quam efficitur, lacinia ligula ac.</p>
</div>
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Sed nec.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor nisi mauris, ac interdum tellus pulvinar id. Morbi non molestie</p>
</div>
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Morbi in.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non rutrum arcu, ac posuere odio. Nunc in dolor eget nisi.</p>
</div>
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Mauris ac.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pulvinar orci non consectetur accumsan. Aenean posuere, felis commodo congue pulvinar.</p>
</div>
</div>
<div class="footer">
<p>Quisque venenatis volutpat dictum. Praesent.</p>
</div>
</div>
Fiddle
Hope this is what you want. If this is the right answer! Here is what i did.
give the container class of height and width a 100% and set display to flex and flex-direction: column so header, footer and content class get aligned vertically.
Now, if you set content class flex prorperty to 1 it will take rest of width and height.
give option class a property of display: flex and set flex-direction: column so image and the title and description get aligned vertically.
by assign min-height of 30px to the title and p in the options, rest of the space can be assigned to image, which I hope is what you want.
* {
margin: 0;
padding: 0;
}
.content {
min-height: 100%;
width: 100%;
min-width: 100%;
display: flex;
flex-direction: row;
box-sizing: border-box;
padding: 30px 0;
}
.content .option {
flex: 1;
max-height: 100vh;
min-width: 100%;
display: flex;
flex-direction: column;
}
.content .option img {
height: calc(100% - 160px);
width: 100%;
}
.content .option p {
height: 20px;
}
.content .option p:nth-child(2) {
height: 40px;
}
.header,
.footer {
position: fixed;
left: 0;
right: 0;
background-color: #ccc;
height: 30px;
}
.header {
top: 0;
}
.footer {
bottom: 0;
}
<div class="container">
<div class="header">
Fusce pellentesque ante.
</div>
<div class="content">
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Proin hendrerit.</p>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla non lacus tincidunt suscipit. Nam nec arcu a erat convallis.</p>
</div>
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Nullam at.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut congue eros. Aenean sit amet quam efficitur, lacinia ligula ac.</p>
</div>
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Sed nec.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor nisi mauris, ac interdum tellus pulvinar id. Morbi non molestie</p>
</div>
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Morbi in.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non rutrum arcu, ac posuere odio. Nunc in dolor eget nisi.</p>
</div>
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Mauris ac.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pulvinar orci non consectetur accumsan. Aenean posuere, felis commodo congue pulvinar.</p>
</div>
</div>
<div class="footer">
<p>Quisque venenatis volutpat dictum. Praesent.</p>
</div>
</div>
html,
body {
padding: 0;
margin: 0;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
background-color: aqua;
justify-content: space-between;
}
.header,
.footer {
flex: 0 1 auto;
text-align: center;
}
.content {
display: flex;
overflow-x: auto;
flex-wrap: nowrap;
flex: 1 1 auto;
}
.footer {
background-color: brown;
}
img {
max-width: 600px;
}
<div class="container">
<div class="header">
Fusce pellentesque ante.
</div>
<div class="content">
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Proin hendrerit.</p>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla non lacus tincidunt suscipit. Nam nec arcu a erat convallis.</p>
</div>
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Nullam at.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut congue eros. Aenean sit amet quam efficitur, lacinia ligula ac.</p>
</div>
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Sed nec.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor nisi mauris, ac interdum tellus pulvinar id. Morbi non molestie</p>
</div>
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Morbi in.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non rutrum arcu, ac posuere odio. Nunc in dolor eget nisi.</p>
</div>
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Mauris ac.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pulvinar orci non consectetur accumsan. Aenean posuere, felis commodo congue pulvinar.</p>
</div>
</div>
<div class="footer">
<p>Quisque venenatis volutpat dictum. Praesent.</p>
</div>
</div>
Please see this Fiddle...
I have two columns. Left column holds paragraph titles. Right column holds the actual paragraphs. I'm trying to align the paragraph title, with the top line of each paragraph and I'm having the hardest time doing it without using unnecessary and sloppy line breaks.
.col1 {float: left; width: 300px; border: 1px solid black; padding: 10px;}
.col2 {float: left; width: 300px; border: 1px solid black; padding: 10px;}
.line1 { height: auto; margin: 10px 0 20px 0; }
.line2 { height: auto; margin: 10px 0 20px 0; }
.line3 { height: auto; margin: 10px 0 20px 0; }
Thoughts?
This is a perfect example of when good ol' <table> elements are still useful! Also, notice that if the overall width is not big enough, your paragraphs wrap under all the titles completely.
The proper way to do this is to use a definition list
See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl
<dl>
<dt>Firefox</dt>
<dt>Mozilla Firefox</dt>
<dt>Fx</dt>
<dd>A free, open source, cross-platform, graphical web browser
developed by the Mozilla Corporation and hundreds of volunteers.</dd>
<!-- other terms and definitions -->
</dl>
If you did want to do this in div elements and not dt, have a look at this fiddle
HTML
<div class='wrapper'>
<div class="col1">
Paragraph 1
</div>
<div class="col2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eros est, pellentesque in leo at, molestie mattis sem. Phasellus at est in ligula malesuada ullamcorper nec et massa.
</div>
<div style='clear:both;'></div>
<div class="col1">
Paragraph 2
</div>
<div class="col2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eros est, pellentesque in leo at, molestie mattis sem. Phasellus at est in ligula malesuada ullamcorper nec et massa.
</div>
<div style='clear:both;'></div>
<div class="col1">
Paragraph 3
</div>
<div class="col2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eros est, pellentesque in leo at, molestie mattis sem. Phasellus at est in ligula malesuada ullamcorper nec et massa.
</div>
<div style='clear:both;'></div>
</div>
CSS
body{
width:100%;
}
.wrapper{
border: 1px solid black;
}
.col1, .col2 {
float: left; width: 300px; padding: 10px;
}
.col2{
border-left:1px solid black;
}