Im creating an application which includes the home screen. This will have a biography of the client. Im trying to create a header, which will include the title and a round display image. From the code i used 3 divs, which will hold the wrapper, title and picture. I done the display:flex which will have them in 1 line, and flex:1 to move the image to the right. When doing the radius 50% its squishing the photo . Can you help me out?
Thanks. Heres the code.
.headerOfBio {
display: flex
}
.displayPic {
flex: 1 background-image: url("../images/displayPicture.jpg") border-radius: 50%
}
<div class="quote titleBio">
<div class="headerOfBio">
<h3>
MEET THE <span class="diffColor">FOUNDER</span>
</h3>
<div class="displayPic">
</div>
</div>
</div>
After adding height and width it becomes like this:
Instead of adding a background image to a div, adding a img tag will give a better result.
.headerOfBio {
display: flex;
}
.displayPic img {
flex: 1;
width:50%;
border-radius:100%
}
<div class="quote titleBio">
<div class="headerOfBio">
<h3>
MEET THE <span class="diffColor">FOUNDER</span>
</h3>
<div class="displayPic">
<img src="https://placeimg.com/250/250/nature" />
</div>
</div>
</div>
Mention width, height for the div holding the image and change border-radius to half of the width/height.
.displayPic{
flex: 1
background-image: url("../images/displayPicture.jpg")
width: 300px;
height: 300px;
border-radius: 150px;
}
Why have you used flex:1?
Try this...
.headerOfBio {
display: flex;
align-items: center;
justify-content: space-between;
}
.displayPic {
background: url("https://aeutas.org.au/wp-content/uploads/2014/12/people-icon.png") no-repeat;
border-radius: 50%;
height: 100px;
width: 100px;
border-radius : 50%;
}
https://jsfiddle.net/cd3czf30/1/
Related
By design, I have a site container. I need to create one block so that there are no container restrictions on the right, but they are on the left.
On the design below, the image should be pressed to the right edge of the page, and the container limits should be on the left.
How can I make such a block?
My HTML:
.container {
width: 100%;
max-width: 1260px;
padding-right: 30px;
padding-left: 30px;
margin-right: auto;
margin-left: auto;
}
.main-screen {
width: 100%;
background: linear-gradient(180deg, #dedde2 0%, #e3e6ed 44.29%, #dde6ef 100%);
}
.main-screen-content {
display: flex;
justify-content: space-between;
padding-top: 118px;
}
<section class="main-screen">
<div class="container">
<div class="main-screen-content">
<div class="main-screen-title">
<h1>
Replace awkward lab visits with at-home <span class="blue-text-style">STI testing</span> and
<span class="orange-text-style">treatment</span>.
</h1>
<div class="site-button main-screen-button">
<button class="text-button">
Get started
</button>
</div>
</div>
<div class="main-screen-img">
<img src="./img/main-screen-img.png" alt="">
</div>
</div>
</div>
</section>
I prefer to add the blue bg with the image as a single image and add it as a background. But I could see in the comment section this method is not suitable for your need.
Alternative way,
How about adding blue color as a background to the main section And positioning the person image using position: absolute; right: 0; bottom: 0; to the section.
I'm trying to position three images with flexbox inside a container, but the images have a transparent background, that somehow interfere with each other.
Here is the html:
<div className="buttonContainerLeft">
<img className="images" src={player1Dis}></img>
<img className="images" src={player2Dis}></img>
<img className="images" src={player3Dis}></img>
</div>
The css:
.buttonContainerLeft {
border-color: red;
border-style: solid;
position: absolute;
z-index: 1;
width: 25%;
height: 22%;
left: 5%;
top: 38%;
display: flex;
flex-direction: row;
object-fit: contain;
}
.images {
margin-right: -15px;
}
Here is the visual example, without the .images class applied, with it works fine:
What I want is to know if there is a better solution to this problem?
The best solution is using a div container for each image then specify the width for this container and use overflow hidden to remove the transparent background.
<div className="buttonContainerLeft">
<div className="image-container">
<img className="images" src={player1Dis} />
</div>
<div className="image-container">
<img className="images" src={player2Dis} />
</div>
<div className="image-container">
<img className="images" src={player3Dis} />
</div>
</div>
Styles :
.image-container{
display: flex;
align-items: center;
width: 200px; //This can be changed depend on how much of the image you want to be shown
overflow: hidden;
justify-content: center;
}
To fit all the 3 images into the container, just add to the images width: 100%.
Here is a working demo.
I have this simple script where i have 2 responsive images. If you minimize the window you will that the images will accordingly.
But i put 2 images in the same div like this:
<div class="wrapper">
<div class="block">
<img
src=
"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"
></img>
<img
src=
"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"
></img>
</div>
</div>
i wont take the same effect, WHY?
https://jsfiddle.net/zqgy89k7/
Because you still had a width of 100% per image. Setting the width to 50% makes them scale again. Also set the height to auto to remain proportions.
See example below:
.wrapper {
box-sizing: border-box;
display: flex;
justify-content: center;
border: solid red;
}
.block {
display: flex;
width: 100%;
border: solid blue;
}
.block img {
width: 50%;
max-width: 400px;
height: auto;
}
<div class="wrapper">
<div class="block">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">
</div>
</div>
You can comment the heigh: 200px line code. And that would be a solution.
Another one is to add flex-wrap: wrap to the flex-father container, and this would be visualy more likely.
Here is the example:
JS Fiddle with responsive images
I have created a showcase section where in I have used flexbox to align images to the right. However when I shrink the size of the window, the images go out of the window. I am looking for something like this: http://jsfiddle.net/xLc2Le0k/15/
Here is the snippet for HTML:
<div class="showcase shadow">
<div id="places">
<p class="category">Places</p>
<div>
<img src="img\Taj Hotel.png" alt="">
</div>
<div>
<img src="img\Gateway of India.png" alt="">
</div>
<div>
<img src="img\Shack at Goa.png" alt="">
</div>
</div>
<p class="more-text">View more...</p>
</div>
Here is the snippet for SCSS:
.showcase {
width: 100%;
margin-top: 5%;
display: inline-block;
#places {
width: 100%;
display: flex;
div:nth-of-type(1) {
align-self: flex-end;
}
div {
margin-left: 0.5%;
}
}
}
Here is the link for the live web page: https://swizzx.github.io/Photography-Portfolio/
Just a heads up, I have tried setting the width of the parent and the element to 100%, when I do so, it shrinks but does not work as how I want it to like in the JSFiddle provided above. On the contrary setting the width to 100% makes the first image equal to the size of the others which I don't want.
You should add below css property to the flex container. It wraps elements automatically to the next line when you shrink the window.
flex-wrap: wrap;
One thing you are missing in your code is applying 100% width to your img tag. Give img 100% width and it will work the same way you want.
#places div img {
width: 100%;
}
Actually it was the paragraph in the #places div that was causing the images to shrink much more than required. Figured out that had to place it out of the #places div and inside the .showcase div like :
<div class="showcase shadow">
<p class="category">Places</p> // like this
<div id="places">
<div>
<img src="img\Taj Hotel.png" alt="">
</div>
<div>
<img src="img\Gateway of India.png" alt="">
</div>
<div>
<img src="img\Shack at Goa.png" alt="">
</div>
</div>
<p class="more-text">View more...</p>
</div>
and than setting the width of the images to 100% like gagan mentioned :
.showcase {
width: 100%;
margin-top: 5%;
display: inline-block;
#places {
width: 100%;
display: flex;
justify-content: flex-end;
div:nth-of-type(1) {
align-self: flex-end;
}
div {
margin-left: 0.5%;
img {
width: 100%; //width to 100%
}
}
}
}
Why is this not working?
I have this:
<div class="center">
<div class="line">
text
</div>
<div class="line">
text2
</div>
<div class="line">
text3
</div>
</div>
in css:
.line {
display: inline-Block;
width: 150px;
}
.center {
margin: 0 auto;
}
Why isn't .center css working? I want it to be in center of my screen but it puts it on left corner.
It's because your center div takes up the full width of the page. The line divs are aligned to the left of the center div. If you specify a width for the center div, it will appear in the center of the page. I made an example for you:
http://jsfiddle.net/LGuAq/
If you remove the width: 470px; line, you'll see what's going on. I added a black div border just to show where each div is and how big it is.
Change .center to this:
.center {
text-align: center;
}
JSFiddle
Give .center a width, or it assumes 100% and there is no margin to be had:
.center {
margin: 0 auto;
width: 50%;
}
Why don´t you try this:
.line {
text-align:center;
display: inline-Block;
width: 150px;
}
.center{
display: inline-block;
}