Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
How can I make it so I have one image on the left, with a paragraph on the right. Then another image on the right, with a paragraph on the left.
Like this
I think it's simple but i can't get my head around how to do it
Most people use flex or grid to do this, some people use float too.
This is your answer via flex
img {max-width: 100%}
.blog-card {
width: 700px;
margin: 30px auto 0;
padding: 15px;
border-radius: 5px;
background: #f0f0f0;
display: flex;
}
.thumbnail {
-ms-flex: 0 0 300px;
flex: 0 0 300px;
max-width: 300px;
margin-right: 15px;
}
.blog-card:nth-child(even) .thumbnail {
order: 2;
margin: 0;
}
<div class="blog-card">
<div class="thumbnail">
<a href="#">
<img src="https://images.pexels.com/photos/2693529/pexels-photo-2693529.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Thumbnail">
</a>
</div>
<div class="blog-card-blody">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum necessitatibus dolore doloremque laborum iste ad aspernatur praesentium quas magnam deserunt!</p>
</div>
</div>
<div class="blog-card">
<div class="thumbnail">
<a href="#">
<img src="https://images.pexels.com/photos/2693529/pexels-photo-2693529.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Thumbnail">
</a>
</div>
<div class="blog-card-blody">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum necessitatibus dolore doloremque laborum iste ad aspernatur praesentium quas magnam deserunt!</p>
</div>
</div>
<div class="blog-card">
<div class="thumbnail">
<a href="#">
<img src="https://images.pexels.com/photos/2693529/pexels-photo-2693529.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Thumbnail">
</a>
</div>
<div class="blog-card-blody">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum necessitatibus dolore doloremque laborum iste ad aspernatur praesentium quas magnam deserunt!</p>
</div>
</div>
<div class="blog-card">
<div class="thumbnail">
<a href="#">
<img src="https://images.pexels.com/photos/2693529/pexels-photo-2693529.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Thumbnail">
</a>
</div>
<div class="blog-card-blody">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum necessitatibus dolore doloremque laborum iste ad aspernatur praesentium quas magnam deserunt!</p>
</div>
</div>
Related
This question already has answers here:
Floated elements of variable height push siblings down
(3 answers)
Closed 1 year ago.
JSFiddle
<div class="container">
<div class="row">
<div class="col-6">
<div class="card">
<!-- plane icon img -->
<img src="https://i.imgur.com/JhOKdVb.png" alt="plane" class="card__icon">
<div class="card__body">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dolore eaque veniam architecto. Impedit expedita facilis error nostrum harum cumque, iste aspernatur</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<!-- game-pad icon img -->
<img src="https://i.imgur.com/c5O6IOS.png" alt="plane" class="card__icon">
<div class="card__body">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dolore eaque veniam architecto. Impedit expedita facilis error nostrum harum cumque, iste aspernatur</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<!-- plane icon img -->
<img src="https://i.imgur.com/JhOKdVb.png" alt="plane" class="card__icon">
<div class="card__body">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dolore eaque veniam architecto. Impedit expedita facilis error nostrum harum cumque, iste aspernatur</p>
</div>
</div>
</div>
</div>
</div>
.container{
max-width: 1200px;
margin-right: auto;
margin-left: auto;
}
.row:before,.row:after{
content: '';
display: block;
clear: both;
display: table;
}
.col-6{
width: 50%;
float: left;
}
.card{
margin-bottom: 50px;
}
img{
max-width: 100%;
height: auto;
}
I created the columns using the CSS float property. No framework! Everything is working fine but the last column in the row isn't floating left. can anyone explain?
Interesting Fact:
I'm using only two icons called Plane and Gamepad. Interestingly when I changed the Gamepad icon with the 'Plane' icon, it fixes the problem! Still can't figure out why this is happening.
You need to use:
float: right;
That's what you need.
I am creating a website with materializecss and having some issue with FAB and responsive image. For FAB issue I already did a post here.
floating button issue in material css
But I need some help for responsive image. Its always coming in oval shape. Ii I use respoonsive image in collection it is working fine. Not sure how to get a prefect shape,
html :
<div class="user-feed-main-box box">
<ul class="collection">
<li class="collection-item avatar">
<img src="" alt="" class="circle">
<span class="title"><p>user Shared a post Art </p></span>
<p> <label for="icon_prefix"><i class="material-icons left">timer</i>a min ago.</label> <br>
</p>
</li>
</ul>
<div class="row">
<div class="col s2">
<div class="container">
<img src="" alt="" class="responsive-img circle">
</div>
</div>
<div class="col">
<p>User Shared a post Art </p>
<label for="icon_prefix"><i class="material-icons left">timer</i>a min ago.</label>
</div>
</div>
<div class="container">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam eos in ea dolor eligendi repudiandae
praesentium
modi. Consequuntur, accusantium culpa! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni
sapiente ipsa amet eos officiis aperiam atque. Nemo corporis quibusdam ipsa placeat voluptate fugiat fuga
veniam possimus maxime doloremque veritatis ullam quam odit eligendi, id, sequi quas consequuntur
perferendis accusamus, harum culpa quis animi. Minima, est minus? Optio dolor mollitia perspiciatis.</p>
<div class="carousel carousel-slider">
<a class="carousel-item" href="#one!"><img
src=""></a>
<a class="carousel-item" href="#two!"><img
src=""></a>
<a class="carousel-item" href="#three!"><img
src=""></a>
<a class="carousel-item" href="#four!"><img
src=""></a>
<a class="carousel-item" href="#five!"><img
src=""></a>
</div>
</div>
</d
There was a reported issue similar to this in the Materialize GitHub repo. It appears the solution for that was to not use materialize and instead implement the below.
.ratio {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 0;
padding-bottom: 100%;
position: relative;
width: 100%;
}
.img-circle {
border-radius: 50%;
}
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
And then change the img html to
<div class="ratio img-responsive img-circle" style="background-image:url('somepicture.jpg');"></div>
image doesnt fit parent element
here is the full code
https://jsfiddle.net/601q9j7c/1/
<section class="cards">
<div class="card">
<div class="img-data">
<div clas="bgimg"> <img src="https://cdn.pixabay.com/photo/2015/01/10/16/45/home-office-595476_960_720.jpg" alt=""> </div>
<div class="cardDetails">
<span class="date"><i class="fas fa-calendar-alt"></i> March 30, 2020 </span>
</div>
</div>
<div class="post-data">
<h1 class="title">Vuestic – Free Vue Admin Template</h1>
<p class="description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium ullam ratione id nihil quis officia voluptas vitae molestiae provident natus exercitationem, praesentium maiores quo quas ducimus. Voluptatibus debitis ea perferendis?</p>
<div class="cta">
Read more →
</div>
</div>
</div>
</section>
If you don't set any defined width in either the CSS or the <img> tag, the image will be displayed at full size regardless of its container. This is your issue. So you need to ensure the image is at maximum 100% of it's parent's width.
HTML only
<section class="cards">
<div class="card">
<div class="img-data">
<div clas="bgimg"> <img src="https://cdn.pixabay.com/photo/2015/01/10/16/45/home-office-595476_960_720.jpg" alt="" width="100%"> </div>
<div class="cardDetails">
<span class="date"><i class="fas fa-calendar-alt"></i> March 30, 2020 </span>
</div>
</div>
<div class="post-data">
<h1 class="title">Vuestic – Free Vue Admin Template</h1>
<p class="description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium ullam ratione id nihil quis officia voluptas vitae molestiae provident natus exercitationem, praesentium maiores quo quas ducimus. Voluptatibus debitis ea perferendis?</p>
<div class="cta">
Read more →
</div>
</div>
</div>
</section>
It is best practise to do this with CSS rather than directly into HTML, but you have not shown any CSS in your question.
A CSS example is below:
CSS example
.bgimg > img {
max-width: 100%;
width: 100%;
height:auto;
}
<section class="cards">
<div class="card">
<div class="img-data">
<div class="bgimg"> <img src="https://cdn.pixabay.com/photo/2015/01/10/16/45/home-office-595476_960_720.jpg" alt=""> </div>
<div class="cardDetails">
<span class="date"><i class="fas fa-calendar-alt"></i> March 30, 2020 </span>
</div>
</div>
<div class="post-data">
<h1 class="title">Vuestic – Free Vue Admin Template</h1>
<p class="description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium ullam ratione id nihil quis officia voluptas vitae molestiae provident natus exercitationem, praesentium maiores quo quas ducimus. Voluptatibus debitis ea perferendis?</p>
<div class="cta">
Read more →
</div>
</div>
</div>
</section>
First of all ! your spelling your class is wrong, that's why image is not fitting.
Make the width of the image to be 100% and its height is auto so that is don't stretch but then your image may be come out of parent container make there overflow:hidden
.cards {
display: flex;
justify-content: center;
}
.card {
width: 60%;
justify-content: center;
display: grid;
grid-template-columns: 50% 50%;
box-shadow: 10px 0px 20px rgba(0,0,0,0.08);
height: 25rem;
}
.img-data {
height: 100%;
z-index: 1;
background-color: salmon;
display: grid;
grid-template-rows: 50% 50%;
}
.bgimg {
overflow: hidden;
}
.bgimg img {
height: auto;
width: 100%;
}
<section class="cards">
<div class="card">
<div class="img-data">
<div class="bgimg"> <img src="https://cdn.pixabay.com/photo/2015/01/10/16/45/home-office-595476_960_720.jpg" alt=""> </div>
<div class="cardDetails">
<span class="date"><i class="fas fa-calendar-alt"></i> March 30, 2020 </span>
</div>
</div>
<div class="post-data">
<h1 class="title">Vuestic – Free Vue Admin Template</h1>
<p class="description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium ullam ratione id nihil quis officia voluptas vitae molestiae provident natus exercitationem, praesentium maiores quo quas ducimus. Voluptatibus debitis ea perferendis?</p>
<div class="cta">
Read more →
</div>
</div>
</div>
</section>
This should work and is dynamic:
This gives the image an inherited width and height, which means that it replicates the width of the previous object. It is given with the property style="width: inherit; height: inherit;"
.bgimg {
width: 500px; /*Or whatever you want...*/
}
/* this CSS can be directly inserted in a tag with style="width: 500px;"*/
<section class="cards">
<div class="card">
<div class="img-data">
<div class="bgimg"><!--*NOTE: you wrote <div clas="bgimg">(you missed an 's')--><img src="https://cdn.pixabay.com/photo/2015/01/10/16/45/home-office-595476_960_720.jpg" alt="" style="width: inherit; height: inherit;"> </div>
<div class="cardDetails">
<span class="date"><i class="fas fa-calendar-alt"></i> March 30, 2020 </span>
</div>
</div>
<div class="post-data">
<h1 class="title">Vuestic – Free Vue Admin Template</h1>
<p class="description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium ullam ratione id nihil quis officia voluptas vitae molestiae provident natus exercitationem, praesentium maiores quo quas ducimus. Voluptatibus debitis ea perferendis?</p>
<div class="cta">
Read more →
</div>
</div>
</div>
</section>
Hope this helps!
I just wonder what is the idea by HTML and CSS?
You only need a css, a markup like that
<div class="circle-border">
<div class="circle-image">
<img ....>
</div>
</div>
and in css
.circle-border{
overflow:hidden;
border-radius:50%;
position:relative;
width: 200px; //for example
height:200px; //for example
}
.circle-image{
position:absolute;
top:0;
left:0;
border-radius:50%;
border:8px rbba(255,255,255,.6);
}
.circle-border img{
width:100%;
object-fit:cover;
}
With this you create the form, only need adjust the desing. Other and maybe simplest way is use a library like iHover, that provide you the design with awesome effects, probably helpfully for what you need.
For the vertical line, is no problem. you only need make "relative" the div where you have the images and the content, after, envolve the image markup in other div and set these div with absolute position and set the "top": 50% and margin-top: with the - pixels that the size of your circle image, set the left position with the same value. The HTML may be like that:
<article>
<section class="container-image">
<div class="circle-border">
<div class="circle-image">
<img ....>
</div>
</div>
<section class="content">
<!-- your content here-->
</section>
Oh! I know this one, I did this example myself some time ago. Probably not the best solution, but i used .class:after (so a vertical line that goes after a circle).
Then you write the usual stuff: content:''; background-color:#______; height; width.
To put it in the center you can use the position:relative, position:absolute, left:50%.
You could also use css animation to do that but since it is 1 or 2 px it wouldn't make a difference.
Hope it helps.
You can use CSS Flexbox. Have a look at my snippet:
.timeline-holder {
position: relative;
}
.timeline-holder:before {
content: '';
position: absolute;
top: 75px;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: calc(100% - 75px);
background: #ccc;
z-index: -1;
}
.box {
display: flex;
align-items: center;
margin: 60px 0;
}
.box .text {
flex: 1;
padding: 0 20px;
}
.box img {
border-radius: 50%;
}
.box:nth-child(even) {
margin-right: calc(50% - 75px);
}
.box:nth-child(odd) {
flex-direction: row-reverse;
margin-left: calc(50% - 75px);
}
<div class="timeline-holder">
<div class="box">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</div>
<img src="http://placehold.it/150x150" alt="" />
</div>
<div class="box">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</div>
<img src="http://placehold.it/150x150" alt="" />
</div>
<div class="box">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</div>
<img src="http://placehold.it/150x150" alt="" />
</div>
<div class="box">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</div>
<img src="http://placehold.it/150x150" alt="" />
</div>
<div class="box">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</div>
<img src="http://placehold.it/150x150" alt="" />
</div>
</div>
Hope this helps!
Good day folks,
I am struggling with this for a couple of hours now and could really use some good help!
On my website I am trying to move an image to the right side of a paragraph of text.
My code snippet:
.innercontent {
display: inline-block;
position: relative;
width: 90%;
padding: 3% 5%;
}
.snap {
display: inline-block;
}
div.expitem {
margin: 100px 25px;
min-height: 300;
padding: 15px;
}
.text {
width: 50%;
}
<div class="innercontent">
<div class="expitem">
<h1>'Projectnaam 1'</h1>
<p class="text" >
'Projectomschrijving'
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda unde culpa, ratione exercitationem minus vel quidem eum blanditiis, nobis sint corrupti, neque, rem! Quod aliquid voluptates at consequatur, praesentium.
</p>
<a href="#" target="_blank">
<img alt="screenshot" src="http://www.webactiv.ro/poze/portofoliu_c/vest_grup_install_2014.jpg" width="320px" height="270px" class="snap" />
</a>
</div>
<div class="expitem">
<h1>'Projectnaam 2'</h1>
<p class="text" >
'Projectomschrijving'
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda unde culpa, ratione exercitationem minus vel quidem eum blanditiis, nobis sint corrupti, neque, rem! Quod aliquid voluptates at consequatur, praesentium.
</p>
<a href="#" target="_blank">
<img alt="screenshot" src="http://www.webactiv.ro/poze/portofoliu_c/vest_grup_install_2014.jpg" width="320px" height="270px" class="snap" />
</a>
</div>
</div>
For compatibility reasons I do not want to use float, but if there is no other way, I guess I should have to deal with that. Thank you in advance for trying to answer my question!!
You should try using a grid system like Bootstrap for the layout, but for your code:
Use display: inline-block on the paragraph since you want to allow
some space for the next item to come up on its line.
vertical-align: top to align the paragraph with the images as it
leaves some gap above it.
In order to align on smaller screens, you need to reduce the width of the paragraph using media queries.
Notice that while reducing the screen size further, the images align to the bottom. This is the use case for responsive images to get in. Wrap the image inside a % width div and give max-width: 100%, height: auto for the image. As you can see, you will not face any above difficulties if you use any grid system.
JSfiddle Demo
.innercontent {
display: inline-block;
position: relative;
width: 90%;
padding: 3% 5%;
}
.snap {
display: inline-block;
}
div.expitem {
margin: 100px 25px;
min-height: 300;
padding: 15px;
}
.text {
display: inline-block;
vertical-align: top;
width: 50%;
}
#media (max-width: 768px) {
.text {
width: 33%;
}
}
<div class="innercontent">
<div class="expitem">
<h1>'Projectnaam 1'</h1>
<p class="text">
'Projectomschrijving' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda unde culpa, ratione exercitationem minus vel quidem eum blanditiis, nobis sint corrupti, neque, rem! Quod aliquid voluptates at consequatur, praesentium.
</p>
<a href="#" target="_blank">
<img alt="screenshot" src="http://www.webactiv.ro/poze/portofoliu_c/vest_grup_install_2014.jpg" width="320px" height="270px" class="snap" />
</a>
</div>
<div class="expitem">
<h1>'Projectnaam 2'</h1>
<p class="text">
'Projectomschrijving' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda unde culpa, ratione exercitationem minus vel quidem eum blanditiis, nobis sint corrupti, neque, rem! Quod aliquid voluptates at consequatur, praesentium.
</p>
<a href="#" target="_blank">
<img alt="screenshot" src="http://www.webactiv.ro/poze/portofoliu_c/vest_grup_install_2014.jpg" width="320px" height="270px" class="snap" />
</a>
</div>
</div>
I changed the .text class by adding display: inline-block to it and that seems to push the image to right of the text on a full screen view for me (testing with Safari). Please check if that works like the way you want.
.innercontent {
display: inline-block;
position: relative;
width: 90%;
padding: 3% 5%;
}
.snap {
display: inline-block;
}
div.expitem {
margin: 100px 25px;
min-height: 300;
padding: 15px;
}
.text {
width: 50%;
display: inline-block;
}
<div class="innercontent">
<div class="expitem">
<h1>'Projectnaam 1'</h1>
<p class="text" >
'Projectomschrijving'
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda unde culpa, ratione exercitationem minus vel quidem eum blanditiis, nobis sint corrupti, neque, rem! Quod aliquid voluptates at consequatur, praesentium.
</p>
<a href="#" target="_blank">
<img alt="screenshot" src="http://www.webactiv.ro/poze/portofoliu_c/vest_grup_install_2014.jpg" width="320px" height="270px" class="snap" />
</a>
</div>
<div class="expitem">
<h1>'Projectnaam 2'</h1>
<p class="text" >
'Projectomschrijving'
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda unde culpa, ratione exercitationem minus vel quidem eum blanditiis, nobis sint corrupti, neque, rem! Quod aliquid voluptates at consequatur, praesentium.
</p>
<a href="#" target="_blank">
<img alt="screenshot" src="http://www.webactiv.ro/poze/portofoliu_c/vest_grup_install_2014.jpg" width="320px" height="270px" class="snap" />
</a>
</div>
</div>
you can solve the problem using bootstrap also.
.innercontent {
display: inline-block;
position: relative;
width: 90%;
padding: 3% 5%;
}
.snap {
display: inline-block;
}
div.expitem {
margin: 100px 25px;
min-height: 300;
padding: 15px;
}
.text {
width: 50%;
}
html code with bootstrap
<div class="innercontent">
<div class="row">
<div class="expitem">
<h1>'Projectnaam 1'</h1>
<div class="col-md-6">
<p class="text" >
'Projectomschrijving'
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda unde culpa, ratione exercitationem minus vel quidem eum blanditiis, nobis sint corrupti, neque, rem! Quod aliquid voluptates at consequatur, praesentium.
</p>
</div>
<div class="col-md-6">
<a href="#" target="_blank">
<img alt="screenshot" src="http://www.webactiv.ro/poze/portofoliu_c/vest_grup_install_2014.jpg" width="320px" height="270px" class="snap" />
</a>
</div>
</div>
<div class="expitem">
<h1>'Projectnaam 2'</h1>
<div class="col-md-6">
<p class="text" >
'Projectomschrijving'
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda unde culpa, ratione exercitationem minus vel quidem eum blanditiis, nobis sint corrupti, neque, rem! Quod aliquid voluptates at consequatur, praesentium.
</p>
</div>
<div class="col-md-6">
<a href="#" target="_blank">
<img alt="screenshot" src="http://www.webactiv.ro/poze/portofoliu_c/vest_grup_install_2014.jpg" width="320px" height="270px" class="snap" />
</a>
</div>
</div>
</div>
</div>