I am trying to achieve this design
I used flex box to achieve this but facing some problems to align the contents the way the design demanding
I used self-align property of flex box to align the three items to achieve the steps like design.
My code:
#main {
background: #fff2fd;
padding: 120px 0;
}
#main h2 {
font-family: 'Circular-Std-Bold';
text-transform: capitalize;
font-size: 50px;
max-width: 700px;
}
#main div.contents {
display: flex;
align-items: flex-start;
justify-content: space-between;
height: 100vh;
}
#main div.contents div.item {
width: 32%;
border-bottom: 2px solid #c8c8c8;
margin-right: 50px;
}
#main div.contents div.item:last-child {
margin-right: 0;
}
#main div.contents div.item div.img-container {
width: 300px;
}
#main div.contents div.item div.img-container img {
display: block;
width: 100%;
}
#main div.contents div.item h3 {
font-family: 'Circular-Std-Bold';
font-size: 25px;
margin-top: 40px;
text-transform: capitalize;
}
#main div.contents div.item p {
font-size: 21px;
margin-top: 20px;
text-transform: capitalize;
}
#main div.contents div.item:first-child {
align-self: flex-end;
}
#main div.contents div.item:nth-child(2) {
align-self: center;
}
#main div.contents div.item:last-child {
align-self: flex-start;
}
<body>
<section id="main">
<section class="wrapper">
<h2>how patch works for everyone involved?</h2>
<div class="contents">
<div class="item bottom">
<div class="img-container"><img src="https://i.ibb.co/26bwqT5/image1.png" alt="image" /></div>
<h3>patch can you a new deposit or unlock an existing one</h3>
<p>giving tenants choice to spend their money on whatever they like</p>
</div>
<div class="item middle">
<div class="img-container"><img src="https://i.ibb.co/C9DNWWh/image2.png" alt="image" /></div>
<h3>patch can you a new deposit or unlock an existing one</h3>
<p>giving tenants choice to spend their money on whatever they like</p>
</div>
<div class="item top">
<div class="img-container"><img src="https://i.ibb.co/ZT6f77F/image3.png" alt="image" /></div>
<h3>patch can you a new deposit or unlock an existing one</h3>
<p>giving tenants choice to spend their money on whatever they like</p>
</div>
</div>
</section>
</section>
</body>
I'm having trouble to aligning text with the third item where the text says "the how patch works for everyone involved?" Are there other ways to achieve this?
If you're referring to the image with the text (it seems that's the main difference) you simply need to change your selector:
#main div.contents div.item div.img-container {
width: 100%;
justify-content: center;
display: flex;
}
Then you'll have to fix the size of each block, giving it a fixed width or working with padding.
I hope this was what you meant.
Related
So I have a 3 flexboxes and flex items inside of them. I need them to be on the left, like on the following image:
But for some reason my image and header are stuck on the right, and can't even be aligned with align-items.
So I have the following result:
I'm not really sure what's the problem here, I tried to do float:left for image, but it doesn't move.
art_container is a huge container, inside of which are 3 flexboxes - art_block, and flex items inside of them.
.article img{
position: absolute;
top:0;
right:0;
}
.art_container {
position: relative;
top: 10%;
left: 0;
/* transform: translateY(30%) translateX(30%); */
width: 100vh;
height: 110vh;
background-color: white;
}
.art_block {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
min-width: 100%;
height: 300px;
background-color: black;
border-bottom: 1px solid white;
}
.art_block img {
flex: 1 1 auto;
width: 300px;
height: 200px;
object-fit: cover;
border: 2px solid red;
}
.art_block h2 {
color: #fff;
font-size: 1.5rem;
font-weight: 800;
font-family: "Open Sans", sans-serif;
}
<article class="article">
<div class="art_container">
<div class="art_block" id="block1">
<img src="https://via.placeholder.com/300">
<h2>Sony's new releases for 2018</h2>
</div>
<div class="art_block" id="block2">
<img src="https://via.placeholder.com/300">
<h2>10 tips to be a better gamer</h2>
</div>
<div class="art_block" id="block3">
<img src="https://via.placeholder.com/300">
<h2>Microsoft has some new tips</h2>
</div>
</div>
</article>
Edit: so i've found that i have another image style for outside container, which i guess may affect my flex image:
.article img{
position: absolute;
top:0;
right:0;
}
So that's a style for a bigger div, inside of which is my art_container, and now i'm wondering, how could i make .art_container img style, while not being affected by .article img style?
Sometimes the best strategy is just to step back and simplify. I'm not sure why you have all the fixed sizing on the images and containers, but that's probably not necessary. If you have minimum sizes in mind, use other means to ensure that, such as wrapping to vertical using media queries. The more you stay flexible the simpler your layout will be.
Here's a start.
.art_block {
display: flex;
justify-content: start;
align-items: center;
flex-wrap: wrap;
background-color: black;
border-bottom: 1px solid white;
}
.art_block img {
flex: none;
max-width: 200px;
object-fit: cover;
border: 2px solid red;
margin: 15px;
}
.art_block h2 {
color: #fff;
font-size: 1.5rem;
font-weight: 800;
font-family: "Open Sans", sans-serif;
margin: 15px;
}
<div class="art_container">
<div class="art_block" id="block1">
<img src="https://via.placeholder.com/300">
<h2>Sony's new releases for 2018</h2>
</div>
<div class="art_block" id="block2">
<img src="https://via.placeholder.com/300">
<h2>10 tips to be a better gamer</h2>
</div>
<div class="art_block" id="block3">
<img src="https://via.placeholder.com/300">
<h2>Microsoft has some new tips</h2>
</div>
</div>
Simply use flex-wrap: no-wrap; so your image and text remains on the same line.
I've add a wrapper for your text so you can add some p tags inside
.art_container {
position: relative;
top: 10%;
left: 0;
/* transform: translateY(30%) translateX(30%); */
width: 100%;
height: 110vh;
background-color: white;
}
.art_block {
position: relative;
display: flex;
flex-wrap: no-wrap;/* use this */
min-width: 100%;
height: 300px;
background-color: black;
border-bottom: 1px solid white;
}
.art_block img {
flex: 1 1 auto;
width: 300px;
height: 200px;
object-fit: cover;
}
.art_block h2 {
color: #fff;
font-size: 1.5rem;
font-weight: 800;
font-family: "Open Sans", sans-serif;
}
<div class="art_container">
<div class="art_block" id="block1">
<img src="https://via.placeholder.com/300">
<div class="wrap-text">
<h2>Sony's new releases for 2018</h2>
</div>
</div>
<div class="art_block" id="block2">
<img src="https://via.placeholder.com/300">
<div class="wrap-text">
<h2>10 tips to be a better gamer</h2>
</div>
</div>
<div class="art_block" id="block3">
<img src="https://via.placeholder.com/300">
<div class="wrap-text">
<h2>Microsoft has some new tips</h2>
</div>
</div>
</div>
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 1 year ago.
I have a problem that although I used padding-bottom:0; in style for the class .title but there are still white spaces between .title and #about_restaurant. May I ask if I want to cut the excess white spaces between two elements what is the best way to solve it?
#about_restaurant {
background-color: yellow;
width: 100%;
height: 240px;
padding-top: 0;
display: flex;
align-items: center;
}
.delivery_image {
flex: 0 0 auto;
padding: 1em;
}
.delivery_image img {
display: block;
border-radius: 50%;
}
.describe_restaurant {
float: left;
}
.describe_restaurant h2 {
flex: 1 1 auto;
padding: 1em;
}
.title {
text-align: center;
background-color: aqua;
padding-bottom: 0;
}
<div class="container-fluid">
<div id="About">
<h2 class="title">About Restaurant</h2>
<div id="about_restaurant">
<div class="delivery_image">
<img src="delivery.jpg" width="250" height="250">
</div>
<div class="describe_restaurant">
<h2>Our restaurant aimed to provide delivery service to the customers. We hope the service and the quality of food could satisfy the customers' expectations. Welcome to support our delivery service.
</h2>
</div>
</div>
</div>
</div>
That white space is the default margin of the header (<h2></h2>). you can reset it by using: h2 { margin: 0; } in your css file.
Paddings are the inside spacing of an element. However the white-space is not added in the inside of an element but outside. The outside spacing is called margin. As such, padding: 0; wont help you here.
h2 {
margin: 0;
}
#about_restaurant {
background-color: yellow;
width: 100%;
height: 240px;
padding-top: 0;
display: flex;
align-items: center;
}
.delivery_image {
flex: 0 0 auto;
padding: 1em;
}
.delivery_image img {
display: block;
border-radius: 50%;
}
.describe_restaurant {
float: left;
}
.describe_restaurant h2 {
flex: 1 1 auto;
padding: 1em;
}
.title {
text-align: center;
background-color: aqua;
padding-bottom: 0;
}
<div class="container-fluid">
<div id="About">
<h2 class="title">About Restaurant</h2>
<div id="about_restaurant">
<div class="delivery_image">
<img src="delivery.jpg" width="250" height="250">
</div>
<div class="describe_restaurant">
<h2>Our restaurant aimed to provide delivery service to the customers. We hope the service and the quality of food could satisfy the customers' expectations. Welcome to support our delivery service.
</h2>
</div>
</div>
</div>
</div>
.title{
text-align:center;
background-color:aqua;
padding-bottom:0;
margin-bottom:0;
}
or :
<h2 class="title" style="margin-bottom:0;">About Restaurant</h2>
HTML CODE
<div class="wrapper">
<div class="flex-container">
<div class="box one">
<img src="img\xii.jpg" alt="phone1" />
<section class="section1">
<p>Xiaomi X15</p>
<br />
<h2>New Powerhouse Phone From The Xiaomi Brand</h2>
<br />
<button> BUY NOW</button>
</section>
</div>
</div>
</div>
CSS CODE
.flex-container {
display: flex;
background-color: #fff;
border: 2px solid black;
flex-wrap: wrap;
}
.wrapper {
width: 100px;
max-width: 960px;
margin: 0 auto;
}
.one p {
position: absolute;
bottom: -350px;
color: white;
font-size: 50px;
left: 500px;
text-align: center;
font-weight: lighter;
font-family: calibri;
}
.section1 h2 {
position: absolute;
bottom: -500px;
left: 300px;
color: white;
}
please help im a beginner in css and this is my first stackoverflow post
my texts are not horizantally in place and keeps breaking down that each word forms a new paragraph how can i solve this please? i have tried the display:inline- block but it didnt work.as you can see from my code i made the div tag that the image is on to be position relative so i can move the h2 and span and button elements to be nn the image. i intend on using flexbox because on i want to position more images to be on the side of the initial image
What you can do is:
Define some width and height (max-width and min-width to be more flexible) for your box;
Use background-image CSS prop instead of HTML <img />, which will ensure the image fills the background of your container;
Use flex-box with its all properties to lay out your elements. There will be no need for position: absolute for the text and header.
Other notes to your code: there are some closing tags missing in your HTML as well as closing } braces in the CSS. That is never a good practice to leave your code without them, even though in some cases the browser can fill them out for you.
Here is an example of how you can achieve what you were asking about:
.wrapper {
width: 100%;
max-width: 960px;
margin: 0 auto ;
display: flex;
justify-content: space-between;
}
.flex-container{
display: flex;
background-color:#fff;
border: 2px solid black;
flex-wrap: wrap;
width: auto;
height: 200px;
min-width: 100px;
max-width: 400px;
}
.one {
background-image: url('https://cdn.thewirecutter.com/wp-content/uploads/2018/05/smartphone-tp-top-2x1-lowres1024-7951.jpg');
background-size: cover;
}
.section1 {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.section1 p{
color: white;
font-size: 25px;
text-align: left;
font-weight: lighter;
font-family: calibri;
padding: 10px;
margin: 0
}
.section1 h2{
color: white;
padding: 10px;
margin: 0
}
button {
max-width: 100px
}
<div class="wrapper">
<div class="flex-container">
<div class="box one">
<section class="section1">
<p>Xiaomi X15 </p>
<h2>New Powerhouse Phone From The Xiaomi Brand</h2>
<button> BUY NOW</button>
</section>
</div>
</div>
<div class="flex-container">
<div class="box one">
<section class="section1">
<p>Xiaomi X15 </p>
<h2>New Powerhouse Phone From The Xiaomi Brand</h2>
<button> BUY NOW</button>
</section>
</div>
</div>
</div>
I have a section that has a list of jokes where each joke is individually contained within divs. In each joke are two paragraphs that I'm trying to align to display at the left (start of the flex container). Right now the two main issues I'm facing is that the first paragraph (Q:) is not aligning to the very start of the container
I'm trying to align the paragraphs so that both the abbreviation and question wrap to leftmost boundary of the container's content.
The second issue I'm facing is that the second paragraph (A:) keeps centering itself in the container instead of displaying on the left side. I am not sure why the first paragraph does not center itself but the second paragraph does when displaying the webpage. I've been told that this can be achieved with a single flex rule which I've been trying to find in my div p ruleset.
Overall, I am trying to achieve this expected display:
HTML
<section id="jokes">
<h2>Out Of This World Joke Inventory!</h2>
<p>Hover over each joke to see the answer!</p>
<div id="joke-cards">
<div id="sun-joke">
<img src="img/icon1.png" alt="Icon of shooting star">
<hr>
<p><span class="abbrv">Q:</span> Why did the sun go to school?</p>
<p><span class="abbrv">A:</span> <span class="answer">To get brighter!</span></p>
</div>
<div id="tick-joke">
<img src="img/icon2.png" alt="Icon of rocket blasting off">
<hr>
<p><span class="abbrv">Q:</span> What do you call a tick on the moon?</p>
<p><span class="abbrv">A:</span> <span class="answer">A luna-tick</span></p>
</div>
<div id="restaurant-joke">
<img src="img/icon3.png" alt="Icon of flag on the Moon">
<hr>
<p><span class="abbrv">Q:</span> Why did the people not like the restaurant on the moon?</p>
<p><span class="abbrv">A:</span> <span class="answer">Because there was no atmosphere.</span></p>
</div>
</div>
</section>
CSS
#joke-cards {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-evenly;
}
#joke-cards div {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 15px;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;
height: 400px;
width: 300px;
background-color: #9B580D;
opacity: 80%;
padding: 20px;
}
#joke-cards div img {
height: 150px;
width: 150px;
}
hr {
width: 65%;
}
div p {
align-content: flex-start;
}
.abbrv {
font-size: 28px;
color: #E0DBD7;
}
.answer {
display: none;
font-size: 24px;
color: #191919;
}
#joke-cards div:hover .answer {
display: inline;
}
Use align-items: flex-start; for the divs, width + margin for img and text-align: left; for p
img{ width: 50%; outline: 1px solid blue; margin: 0 auto; }
#joke-cards {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-evenly;
}
#joke-cards div {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-top: 15px;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;
height: 400px;
width: 300px;
background-color: #9B580D;
opacity: 80%;
padding: 20px;
}
#joke-cards div img {
height: 150px;
width: 150px;
}
hr {
width: 65%;
}
div p {
text-align: left;
}
.abbrv {
font-size: 28px;
color: #E0DBD7;
}
.answer {
display: none;
font-size: 24px;
color: #191919;
}
#joke-cards div:hover .answer {
display: inline;
}
<section id="jokes">
<h2>Out Of This World Joke Inventory!</h2>
<p>Hover over each joke to see the answer!</p>
<div id="joke-cards">
<div id="sun-joke">
<img src="img/icon1.png" alt="Icon of shooting star">
<hr>
<p><span class="abbrv">Q:</span> Why did the sun go to school?</p>
<p><span class="abbrv">A:</span> <span class="answer">To get brighter!</span></p>
</div>
<div id="tick-joke">
<img src="img/icon2.png" alt="Icon of rocket blasting off">
<hr>
<p><span class="abbrv">Q:</span> What do you call a tick on the moon?</p>
<p><span class="abbrv">A:</span> <span class="answer">A luna-tick</span></p>
</div>
<div id="restaurant-joke">
<img src="img/icon3.png" alt="Icon of flag on the Moon">
<hr>
<p><span class="abbrv">Q:</span> Why did the people not like the restaurant on the moon?</p>
<p><span class="abbrv">A:</span> <span class="answer">Because there was no atmosphere.</span></p>
</div>
</div>
</section>
You have to wrap your paragraph tags into a container which will have place-items attribute and not each paragraph. Also, you need change display value from block to inherit for each content paragraph.
<div class="content">
<p><span class="abbrv">Q:</span> Why did the sun go to school?</p>
<p><span class="abbrv">A:</span> <span class="answer">To get brighter!</span></p>
</div>
div.content{
display: flex;
flex-direction: column;
width: 100%;
place-self: flex-start;
}
div.content p {
display:inherit;
}
I have 3 div boxes which were perfectly aligned and centered, and then when I added text inside the divs, the parent div would stretch and resize to what was inside. I tried using resize: none on the child and parent elements, but that didn't do anything. Also tried using position:absolute; and relative.
HTML
<div class="boxes-parent">
<div class="left-box">
<div class="blue-boxes">
<h1 class="blue-box-header-text">About</h1>
<p class="blue-box-text">I used to be better at CSS and HTML. Sorry!</p>
</div>
</div>
<div class="center-box">
<div class="blue-boxes">
<h1 class="blue-box-header-text">Info</h1>
<p class="blue-box-text">Info info info.</p>
</div>
</div>
<div class="right-box">
<div class="blue-boxes">
<h1 class="blue-box-header-text">Contact</h1>
<p class="blue-box-text">Phone: (888) 888-8888</p>
</div>
</div>
</div>
CSS
.boxes-parent {
margin: 0px auto;
text-align: center;
}
.left-box, .center-box, .right-box {
padding-top: 10px;
padding-left: 2%;
padding-right: 2%;
display: inline-block;
position: relative;
min-width: 25%;
}
.blue-boxes {
background-color: #3498db;
height: 250px;
position: absolute;
resize: none;
}
.blue-box-header-text {
padding-top: 20px;
font-size: 26px;
color: #fff;
}
.blue-box-text {
resize: none;
max-width: 500px;
position: relative;
display: inline;
}
Result: https://jsfiddle.net/0wvyaqbo/
Also, my questions sometimes get downvoted. Have any advice on how I can better format this question? Trying to make it applicable for others. Thanks for all the help!
There are a couple things going on:
First, you have your .right, .center, .left divs set to inline-block. By default, they will always be the width of the content, because of inline-block. You need to set them to block. Also, .blue-boxes should be set to relative positioning, not absolute.
Here's updated CSS:
.boxes-parent {
margin: 0px auto;
text-align: center;
}
.left-box, .center-box, .right-box {
padding-top: 10px;
padding-left: 2%;
padding-right: 2%;
display: block;
position: relative;
width: 25%;
float:left;
}
.blue-boxes {
background-color: #3498db;
height: 250px;
position: relative;
}
.blue-box-header-text {
padding-top: 20px;
font-size: 26px;
color: #fff;
}
.blue-box-text {
resize: none;
max-width: 500px;
position: relative;
display: inline;
}
And the updated fiddle:
https://jsfiddle.net/0wvyaqbo/1/
Another way to do this would be to use flexbox. Simply add display: flex and justify-content: center to .boxes-parent and change min-width to simply width for .left-box, .center-box, and .right-box. Resulting code looks like this:
.boxes-parent {
margin: 0 auto;
text-align: center;
display: flex;
justify-content: center;
}
.left-box,
.center-box,
.right-box {
width: 25%;
padding: 10px 2% 0;
}
.blue-boxes {
background-color: #3498db;
height: 250px;
}
.blue-box-header-text {
padding-top: 20px;
font-size: 26px;
color: #fff;
}
<div class="boxes-parent">
<div class="left-box">
<div class="blue-boxes">
<h1 class="blue-box-header-text">About</h1>
<p class="blue-box-text">I used to be better at CSS and HTML. Sorry!</p>
</div>
</div>
<div class="center-box">
<div class="blue-boxes">
<h1 class="blue-box-header-text">Info</h1>
<p class="blue-box-text">Info info info.</p>
</div>
</div>
<div class="right-box">
<div class="blue-boxes">
<h1 class="blue-box-header-text">Contact</h1>
<p class="blue-box-text">Phone: (888) 888-8888</p>
</div>
</div>
</div>
Alternatively, you could use flex: 1 1 25% for .left-box, .center-box, and .right-box. This forces them to grow and shrink with each other.
.boxes-parent {
margin: 0 auto;
text-align: center;
display: flex;
justify-content: center;
}
.left-box, .center-box, .right-box {
flex: 1 1 25%;
padding: 10px 2% 0;
}
.blue-boxes {
background-color: #3498db;
height: 250px;
}
.blue-box-header-text {
padding-top: 20px;
font-size: 26px;
color: #fff;
}
<div class="boxes-parent">
<div class="left-box">
<div class="blue-boxes">
<h1 class="blue-box-header-text">About</h1>
<p class="blue-box-text">I used to be better at CSS and HTML. Sorry!</p>
</div>
</div>
<div class="center-box">
<div class="blue-boxes">
<h1 class="blue-box-header-text">Info</h1>
<p class="blue-box-text">Info info info.</p>
</div>
</div>
<div class="right-box">
<div class="blue-boxes">
<h1 class="blue-box-header-text">Contact</h1>
<p class="blue-box-text">Phone: (888) 888-8888</p>
</div>
</div>
</div>
For more info on flexbox, css-tricks has a good reference sheet. Here's the support tables as well.
Parent elements likes divs are flexible by default and will resize to contain whatever you put in them (height) or whatever their parent element(s)/the browser is doing (width) unless you specify their dimensions. Use CSS width and height or max-width and max-height on the parent to limit its growth.
Generally, a flexible parent is preferred (see: responsive design), as some users may choose to modify the font your site is using, increase the font size to improve visibility, or view the site from a different device, and these actions can change the relative size of your content.
More info: http://www.w3schools.com/cssref/pr_dim_height.asp
You used min-width, and expected adding content wouldn't cause them to grow? Just use width.
Setting .blue-boxes { position: absolute; } caused those to shrink to the size of the content. You could add width: 100%;.
Since using absolute positioning can mess up layout, a solution that avoids it would be nice. When you remove the absolute positioning, the blue boxes are no longer aligned vertically. Set vertical-align: top; to fix that.
.boxes-parent {
margin: 0px auto;
text-align: center;
}
.left-box, .center-box, .right-box {
padding-top: 10px;
padding-left: 2%;
padding-right: 2%;
display: inline-block;
width: 25%;
vertical-align: top;
}
.blue-boxes {
background-color: #3498db;
height: 250px;
}
.blue-box-header-text {
padding-top: 20px;
font-size: 26px;
color: #fff;
}
.blue-box-text {
display: inline;
}
<div class="boxes-parent">
<div class="left-box">
<div class="blue-boxes">
<h1 class="blue-box-header-text">About</h1>
<p class="blue-box-text">I used to be better at CSS and HTML. Sorry!</p>
</div>
</div>
<div class="center-box">
<div class="blue-boxes">
<h1 class="blue-box-header-text">Info</h1>
<p class="blue-box-text">Info info info.</p>
</div>
</div>
<div class="right-box">
<div class="blue-boxes">
<h1 class="blue-box-header-text">Contact</h1>
<p class="blue-box-text">Phone: (888) 888-8888</p>
</div>
</div>
</div>