Position of text in mobile version of web page - html

Question

I have a slider, and text inside it, and I need to make this text responsive. I mean in computer version it looks like as I want, but in mobile version it shifts and I can`t see my icons under each other.
css:
.sliderr__item .slid{
display: flex;
flex-direction: column;
width: 100%;
margin-left: 50px;
margin-top: 50px;
text-align: left;
align-items: flex-start;
justify-content: flex-start;
}
/*END*/
.sliderr {
background-color: #fff;
position: relative;
overflow: hidden;
width: 100%;
}
.sliderr__wrapper {
display: flex;
transition: transform 0.6s ease;
/* ADDED: */
margin-bottom: 10px;
}
.sliderr__item {
flex: 0 0 50%;
}
.sliderr .date {
display: inline-block;
margin-left: 1em;
}
/* Added: */
.sliderr__controls {
display: flex;
justify-content: center;
flex-flow: row;
}
.sliderr__control {
/* Added: */
border-radius: 50%;
/* Updated: */
position: relative;
top: 0;
width: 25px;
/* The Same: */
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-align: center;
height: 25px;
background: #5FA467;
/*
REMOVED: transform: translateY(-50%);
*/
}
html:
<div class="sliderr"><br>
<div class="sliderr__wrapper">
<div class="sliderr__item" style="border: 1px solid #DCE2EC;">
<div style="height: 150px;" class="slid">
<p style="font-family: Roboto; font-size: 14px; color: #5FA467;">My first text</p><br>
<p style="font-family: Roboto; font-size: 16px; color: #000; font-weight: bold;">My second text</p><br>
<p style="display: inline-block; font-family: Roboto; font-size: 14px; color: #000;"><img src="https://via.placeholder.com/20" style="width: 18px; height: 18px;"><span>My User</span><img src="https://via.placeholder.com/20" style="margin-left: 20px;"> 21.08.2018</p>
</div>
</div>
<div class="sliderr__item" style="border: 1px solid #DCE2EC;">
<div style="height: 150px;" class="slid">
<p style="font-family: Roboto; font-size: 14px; color: #5FA467;">My first text</p><br>
<p style="font-family: Roboto; font-size: 16px; color: #000; font-weight: bold;">My second text</p><br>
<p style="display: inline-block; font-family: Roboto; font-size: 14px; color: #000;"><img src="https://via.placeholder.com/20" style="width: 18px; height: 18px;"><span>My User</span><img src="https://via.placeholder.com/20" style="margin-left: 20px;"> 21.08.2018</p>
</div>
</div>
</div>
</div>
So, I have 3 paragraph of text and in mobile version I need to see them in the center and under each other and icons need to be under each others with their text. How can I make that? Full sample in this JSFiddle https://jsfiddle.net/ofzpnL2k/4/

Answer 1

You can use CSS media queries to achieve different stylink for mobile. It's like if conditionals for CSS.
Here you can find more explanation about it: https://www.w3schools.com/csSref/css3_pr_mediaquery.asp.