Not the right method for css? - html

Question

im trying to reproduce this piece of website:
here's mine now and im gonna explain why im struggling
Im struggling with the way to do it, i can move the description close to the logo playing with margin but when i move the size of my screen everything gonna be messed up and i feel like its not the right move to do. Im trying to use flex-boxe but i feel like i messed up the whole part and i should restart again i show you the big picture now:
And here's the whole code for all that part
<div class="container-services_display">
<img src="images/main-feature.png">
<div class="circle">
<div class="icon_placement">
<i class="material-icons">android</i>
</div>
<div class="icon_placement2 ball_design">
<i class="fas fa-circle"></i>
</div>
</div>
<div class="description-services_right">
<h2> UX design </h2>
<p>Coucou les amis je suis entrain de faire un site chiant</p>
<p>Coucou les amis je suis entrain de faire un site chiant</p>
</div>
</div>
css:
.container-services_display
{
margin-top: 110px;
display: flex;
justify-content: space-around;
}
.ball_display
{
display: flex;
justify-content: center;
}
.ball_design
{
color: rgb(82, 162, 201);
font-size: 14px;
}
.circle
{
width: 75px;
height: 75px;
background-color: white;
border-radius: 75px;
border: 1px solid rgb(237, 238, 239, 1);
border-opacity: 0.5;
}
.icon_placement
{
position: relative;
left: 24px;
top: 22px;
color: rgb(96, 174, 209);
}
.icon_placement2
{
position: relative;
left: 68px;
}
So basically its wrapper on a container, im trying to display it on the horizontal with flex and they space it but i feel like i miss a part of this, what i would do is making another div for the logo + description and displaying again with flex but it seemed like its not working, i just need some hint and sorry i only got less than 20 hours of css =D

Answer 1

since you are using css flex then you need to add flex: 1 and little margin if you want it for spacing
.description-services_right {
flex: 1;
margin-left: 20px;
}
see the fiddle
here is bootstrap version if you want to go with bootstrap
.side-pic{
max-width: 100%;
width: 100px;
height: auto;
}
.mtop{
margin-top: 20px;
}
.side-pic-holder{
text-align: center;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-2 side-pic-holder">
<img class="side-pic" src="http://random-ize.com/lorem-ipsum-generators/lorem-ipsum/lorem-ipsum.jpg" />
</div>
<div class="col-md-10">
<h4>some title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet</p>
</div>
</div>
<div class="row mtop">
<div class="col-md-10">
<h4>some title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet</p>
</div>
<div class="col-md-2 side-pic-holder">
<img class="side-pic" src="http://random-ize.com/lorem-ipsum-generators/lorem-ipsum/lorem-ipsum.jpg" />
</div>
</div>
</div>
make sure you view it as full screen

Answer 2

Media Query
In Order to have a clean and responsive Website you will need to use some Media Queries. If your are new to Media Query, check it out here.
In the Media Query you can define your CSS Classes and stylings like
usually, the only difference is it will be only applied if the
condition is true. For Example: If the screen-width is less than 768px
#media(max-width: 768px){
.description-services_right{
width: 100%;
}
}
Bootstrap
There is an other Way, probably the easier and quicker one, using Bootstrap 3/4, if your never heard of Bootstrap you can read their Doc here.
Bootstrap lets you create Quickly Responsive Websites just by adding
premade classes to your HTML Elements.
Bootstrap biggest Advantage is its Grid System, before i get into too much explanations you should check it out if you are interested.
I created two Pens where i made your Code Responsive, i kept all the HTML Elements but deleted all unnecessary CSS.
You can even compare the Bootstrap and Non-Bootstrap Version i made to see how much Coding you can avoid.
Pen without Bootstrap
Pen with bootstrap
And here a Demo how Bootstraps Grid System works