I have an issue where whenever I try to line up my images. It seems to not line up.
I do not know if this is an image issue but I could use some help.
I am new to this so if this is a easy fix from my side I apologize.
.portfolio-item-wrapper2 {
display: flex;
grid-template-columns: 1fr 1fr 1fr;
}
.portfolio-item-wrapper2 {
position: relative;
}
.portfolio-img-background2 {
height: 350px;
width: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.img-text-wrapper2 {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
padding-left: 100px;
padding-right: 100px;
}
<div class="content=wrapper2">
<div class="portfolio-items-wrapper2">
<div class="portfolio-item-wrapper2">
<div class="portfolio-img-background2">
<div class="img-text-wrapper2">
<div class="logo-wrapper2">
<img src="\\kcfs04\StudentHome\20023600\Downloads\C.png" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content=wrapper3">
<div class="portfolio-items-wrapper3">
<div class="portfolio-item-wrapper3">
<div class="portfolio-img-background3">
<div class="img-text-wrapper3">
<div class="logo-wrapper3">
<img src="\\kcfs04\StudentHome\20023600\Downloads\G.png" />
</div>
</div>
</div>
</div>
</div>
</div>
This is the issue:
I need them both to be side by side because I will be adding more below but in the same position.
first, dont use css grid and flexbox with same time and you can use position relative property
Related
I have a container with the left side and right side. i have an image on the right side and it is overflowing hence the experience is bad.
I tried putting overflow: hidden but it is still going outside the box. I want the Right side to have a max-width of 50vw and anything that goes past it should be hidden.
What am I doing wrong?
.halfcontainer {
display: flex;
flex-direction: column;
height: 100vh;
align-items: center;
justify-content: center;
margin: 20px;
}
.righthalf{
overflow: hidden;
max-width:50vw;
}
.hero__image {
display: block;
position: absolute;
width: 70%;
top:10%;
right: -30%;
overflow: hidden;
}
<section >
<div class="halfcontainer">
<div class="lefthalf">
<h1>Hello world</h1>
</div>
<div class="righthalf">
<img class="hero__image" src="images/hero.webp" />
</div>
</div>
</section>
Just add Overflow hidden to parent div .halfcontainer
.halfcontainer {
display: flex;
flex-direction: column;
height: 100vh;
align-items: center;
justify-content: center;
margin: 20px;
position:relative;
overflow-x:hidden;
}
.righthalf{
overflow: hidden;
max-width:50vw;
}
.hero__image {
display: block;
position: absolute;
width: 70%;
top:10%;
right: -30%;
overflow: hidden;
}
<section >
<div class="halfcontainer">
<div class="lefthalf">
<h1>Hello world</h1>
</div>
<div class="righthalf">
<img class="hero__image" src="
https://picsum.photos/seed/picsum/200/300" />
</div>
</div>
</section>
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 1 year ago.
.colum {
display: flex;
align-content: center;
}
.item {
width: 300px;
height: 300px;
background-color: white;
}
<div id="flexn">
<div class="colum cl1">
<div class="item a1">
</div>
<div class="item a2">
</div>
<div class="item a3">
</div>
</div>
<div class="colum cl2">
<div class="item b1">
</div>
<div class="item b2">
</div>
<div class="item b3">
</div>
</div>
</div>
I want the content from from both cl1 and cl2 to have different flexes that put the items in the middle, i tried doing this this way but it didn't work, why?
in case to put them in the middle in x-direction you have to use justify-content: center; and if u want to center them in y-direction u also need align-items: center; but this would only work if u have a height on your colum div.
.colum {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.item {
width: 300px;
height: 300px;
background-color: white;
}
this is how it has to look like if u want to put them in the middle of the page.
And if u want to see the results u have to change the background color to any other color so u can see it . And maybe if u put some margin so u can put the items away from each other which makes it more clear. Like this one:
.colum {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.item {
width: 300px;
height: 300px;
background-color: rgb(194, 55, 55);
margin: 20px;
}
Should be align items not content.
.colum {
display: flex;
align-items: center;
}
Try with this:
.colum {
display: flex;
justify-content: center;
}
.item {
width: 300px;
height: 300px;
background-color: white;
box-shadow: 0 0 4px #ccc;
text-align: center;
}
<div id="flexn">
<div class="colum cl1">
<div class="item a1">rr
</div>
<div class="item a2">rr
</div>
<div class="item a3">rr
</div>
</div>
<div class="colum cl2">
<div class="item b1">rr
</div>
<div class="item b2">rr
</div>
<div class="item b3">rr
</div>
</div>
</div>
I have 3 vertical flexbox bars with different height and I'd like to place 3 different icons on the top of 3 vertical bars.
I tried by using margin and padding to fix the icons at the top of the flexbox but when i switch the window to responsive mode then again icons moves to different places.
Here is an image of how i wanted:
Here's an image of how i am getting like:
My HTML Code:
<div>
<div className="prize">
<div class="prizeimage2">
<img src={prizeTwo} alt="2ndprizeicon"/>
</div>
<div class="prizeimage1">
<img src={prizeOne} alt="1stprizeicon"/>
</div>
<div class="prizeimage3">
<img src={prizeThree} alt="3rdprizeicon"/>
</div>
</div>
<div className="container">
<div class="item item1">
<p className="hourstext">28<br></br> hrs</p>
</div>
<div class="item item2">
<p className="hourstext">25<br></br> hrs</p>
</div>
<div class="item item3">
<p className="hourstext">30<br></br> hrs</p>
</div>
</div>
</div>
CSS:
.container {
position: absolute;
width: 100%;
height: 70%;
left: 0px;
top: 0px;
display: flex;
justify-content: center;
align-items: flex-end;
background: #162983;
}
.prize{
position: relative;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
z-index: 1;
}
.item {
width: 75px;
background: #8C9CE7;
}
.item1 {
height: 35%;
margin-left: 2px;
}
.item2 {
height: 45%;
margin-left: 9px;
}
.item3 {
height: 20%;
margin-left: 10px;
}
.prizeimage1 {
padding-bottom: 5%;
}
.prizeimage2 {
padding-top: 45px;
}
.prizeimage3 {
padding-top: 190px;
}
This question already has answers here:
Targeting flex items on the last or specific row
(10 answers)
Closed 2 years ago.
I have seen this, question has been asked a lot but I have not really gotten an answer that works. I am trying to create 3 centred divs with multiple rows using (flex box) not grid please. Is it possible and what simple way. it should be center aligned.
I am trying to achieve this.
see as its centrally aligned. but mine is kinda alined to the left and if I use Justify content:center for the wrapper the two boxes go in the middle, like this.
this is my code
<div class="wrapper">
<div id="squares">
<img src="images/galleryimage1.jpg"/>
</div>
<div id="squares">
<img src="images/galleryimage2.jpg"/>
</div>
<div id="squares">
<img src="images/galleryimage1.jpg"/>
</div>
<div id="squares">
<img src="images/galleryimage2.jpg"/>
</div>
<div id="squares">
<img src="images/galleryimage2.jpg"/>
</div>
</div>
.wrapper {
background: #ff0000;
text-align: center;
width: 90%;
height: auto;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0 5% 0;
justify-content: center;
}
#squares {
background: #00ff00;
width: 30%;
height: 100px;
margin: 10px;
}
#squares img {
max-height: 300px;
width: 100%;
}
#squares h5 {
margin: 20px 0;
}
here's the link to my jfiddle for a clearer picture.
https://jsfiddle.net/9ros2v4j/6/
Thanks to anyone that can explain.
.wrapper {
background: green;
text-align: center;
width: 80%;
margin-left: auto;
margin-right: auto;
}
.wrapper-inner {
padding: 5px;
display: flex;
flex-wrap: wrap;
}
.square {
flex: 0 1 33.33%;
}
.square img {
width: 100%;
display: block;
}
.square-inner {
padding: 5px;
}
<div class="wrapper">
<div class="wrapper-inner">
<div class="square">
<div class="square-inner">
<img src="http://placekitten.com/200/200" />
</div>
</div>
<div class="square">
<div class="square-inner">
<img src="http://placekitten.com/200/200" />
</div>
</div>
<div class="square">
<div class="square-inner">
<img src="http://placekitten.com/200/200" />
</div>
</div>
<div class="square">
<div class="square-inner">
<img src="http://placekitten.com/200/200" />
</div>
</div>
<div class="square">
<div class="square-inner">
<img src="http://placekitten.com/200/200" />
</div>
</div>
</div>
</div>
One requirement is for justify-content: flex-start which would place your last row as per your need.
The second requirement you're asking for is that they should be centered also. For that I think you can use equal padding on both sides to make the rows look as if they are center-aligned.
Or
If you want you can place all your items in another div inside flex-container. Then you can justify-content: center the newly created div.
You can align items to the left with justify-content: flex-start; instead of justify-content: center but in order to center it all, you might need to start playing with margins and screen size.
If you open the below example on a full page, you will be able to see the expected result.
Please also note that you used id in multiple places (#squares) which could cause issues. I replaced it with a class.
.wrapper {
position: relative;
text-align: center;
height: auto;
background: #ff0000;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
width: 100%;
}
.squares {
background: #00ff00;
width: 30%;
height: 100px;
flex: 0 31.33%;
margin: 1%;
}
#squares img {
max-height: 300px;
width: 100%;
}
#squares h5 {
margin: 20px 0;
}
<div class="wrapper">
<div class="squares">
<img src="images/galleryimage1.jpg"/>
</div>
<div class="squares">
<img src="images/galleryimage2.jpg"/>
</div>
<div class="squares">
<img src="images/galleryimage1.jpg"/>
</div>
<div class="squares">
<img src="images/galleryimage2.jpg"/>
</div>
<div class="squares">
<img src="images/galleryimage2.jpg"/>
</div>
</div>
I have two columns using flexbox but does not have to use flexbox. just using it at the moment but am open to other options. The left side is content with a width of 450px and the right column I have an image that needs to behave as a background image but not use css background property. Is there a way to set the image size / image column and have it overflow out of containers and not push the left column content?
setting container widths and using relative positioning but not scaling or behaving as I would like
.row--flex {
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
margin: 0;
}
.content-col--450 {
max-width: 450px;
}
.content-col {
margin-bottom: auto;
margin-top: 97px;
padding-bottom: 20px;
}
.image-col {
padding-left: 10px;
}
}
.image {
width: 100%;
height: auto;
}
<div class="container container--outer">
<div class="row--flex">
<!--content-->
<div class="content-col content-col--450">
<div class="title-row">
<h2>
testing h2
</h2>
</div>
<div class="content-row">
<p class="p-margin-bottom">
testing P
</p>
<p class="lead">
download test
</p>
<button class="button--arrow">
<span class="button--text">download now</span>
</button>
</div>
</div>
<!--end content-->
<!--image-->
<div class="image-col">
<img src="/img/right-image.png" alt="right column image" class="image-test">
</div>
<!--end image-->
</div>
column 450 stay in place and image overflow out of containers and behave as BG image
You need something like this?
.row--flex {
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
margin: 0;
}
.content-col--450 {
/* max-width: 450px; */
flex-basis: 450px;
}
.content-col {
margin-bottom: auto;
margin-top: 97px;
padding-bottom: 20px;
}
.image-col {
position: relative;
flex-basis: 450px;
align-self: stretch;
padding-left: 10px;
}
.image-test {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
}
.image {
width: 100%;
height: auto;
}
<div class="container container--outer">
<div class="row--flex">
<div class="content-col content-col--450">
<div class="title-row">
<h2>
testing h2
</h2>
</div>
<div class="content-row">
<p class="p-margin-bottom">
testing P
</p>
<p class="lead">
download test
</p>
<button class="button--arrow">
<span class="button--text">download now</span>
</button>
</div>
</div>
<div class="image-col">
<img class="image-test" src="https://picsum.photos/536/354" alt="right column image">
</div>
</div>
</div>