messing text on mobile or small browser window? - html

Question

I have a problem with mobile or small screen window browser, when the window browser width is small like the mobile screen the text will become above the next paragraph or above the photo image how can fix this issue
figure {
margin:0px;
margin-right:22px;
display:inline-block;
}
figure img {
vertical-align: top;
}
figure figcaption {
max-width:150px;
padding-top:8px;
line-height:1em;
text-align: center;
font-size:15px !important;
}
#text{
display:inline-block;
position:absolute;
margin:10px 0px;
}
<section>
<div style="display:inline-block;padding-top:8px;">
<figure>
<img src="http://placehold.it/200x200" alt="missing" width="150">
<figcaption>Album name goes here
<br>Year goes here
</figcaption>
</figure>
</div>
<div id="text">
<div style="font-size: 16px; margin-top: 0px;">“Knowing what to DO and Don’t with the customers allows them to close more sales and build an engaging, valuable and great experience with the customers. That OSN Super Agent course had a huge impact on our organizational performance across the region.”
<span style="font-size: 14px;">[Firas Suleiman - Learning & Development Delivery Manager - UAE]</span></div>
</div>
</section>
<section>
<div style="display:inline-block;padding-top:8px;">
<figure>
<img src="http://placehold.it/200x200" alt="missing" width="150">
<figcaption>Album name goes here
<br>Year goes here
</figcaption>
</figure>
</div>
<div id="text">
<div style="font-size: 16px; margin-top: 7px;">“The most exciting part is the difference between the normal agent and the super-agent and how the way of super-agent effect or change the idea to the customer and how should we deal with it. The course changes a lot in me in approaching customers, and that helped me to overachieve my target this month.”
<span style="font-size: 14px;">[Mujtaba Mohamed Ali - Direct location Leader – Bahrain]</span></div>
</div>
</section>
<section>
<div style="display:inline-block;padding-top:8px;">
<figure>
<img src="http://placehold.it/200x200" alt="missing" width="150">
<figcaption>Album name goes here
<br>Year goes here
</figcaption>
</figure>
</div>
<div id="text">
<div style="font-size: 16px; margin-top: 7px;">“It was one of the best courses I completed on the LMS. The most exciting part is that one of the sales agents was the actor. He showed me how does it work in the field. I learned about the “Dos and Donts”, asking the customer about his/her preferences not mine. Listen carefully and make the customer feel valued.”
<span style="font-size: 14px;">[Ahmed Hassan Ali - Customer care advisor – Egypt]</span></div>
</div>
</section>

Answer 1

Why are you position absolute in "text" div? That's was the problem come. Just remove it and add below css
#text {
display: inline-block;
/* position: absolute; */
margin: 10px 0px;
width: calc(100% - 200px);
vertical-align: top;
}
figure {
margin:0px;
margin-right:22px;
display:inline-block;
}
figure img {
vertical-align: top;
}
figure figcaption {
max-width:150px;
padding-top:8px;
line-height:1em;
text-align: center;
font-size:15px !important;
}
#text {
display: inline-block;
/* position: absolute; */
margin: 10px 0px;
width: calc(100% - 200px);
vertical-align: top;
}
<section>
<div style="display:inline-block;padding-top:8px;">
<figure>
<img src="http://placehold.it/200x200" alt="missing" width="150">
<figcaption>Album name goes here
<br>Year goes here
</figcaption>
</figure>
</div>
<div id="text">
<div style="font-size: 16px; margin-top: 0px;">“Knowing what to DO and Don’t with the customers allows them to close more sales and build an engaging, valuable and great experience with the customers. That OSN Super Agent course had a huge impact on our organizational performance across the region.”
<span style="font-size: 14px;">[Firas Suleiman - Learning & Development Delivery Manager - UAE]</span>
</div>
</div>
</section>
<section>
<div style="display:inline-block;padding-top:8px;">
<figure>
<img src="http://placehold.it/200x200" alt="missing" width="150">
<figcaption>Album name goes here
<br>Year goes here
</figcaption>
</figure>
</div>
<div id="text">
<div style="font-size: 16px; margin-top: 7px;">“The most exciting part is the difference between the normal agent and the super-agent and how the way of super-agent effect or change the idea to the customer and how should we deal with it. The course changes a lot in me in approaching customers, and that helped me to overachieve my target this month.”
<span style="font-size: 14px;">[Mujtaba Mohamed Ali - Direct location Leader – Bahrain]</span>
</div>
</div>
</section>
<section>
<div style="display:inline-block;padding-top:8px;">
<figure>
<img src="http://placehold.it/200x200" alt="missing" width="150">
<figcaption>Album name goes here
<br>Year goes here
</figcaption>
</figure>
</div>
<div id="text">
<div style="font-size: 16px; margin-top: 7px;">“It was one of the best courses I completed on the LMS. The most exciting part is that one of the sales agents was the actor. He showed me how does it work in the field. I learned about the “Dos and Donts”, asking the customer about his/her preferences not mine. Listen carefully and make the customer feel valued.”
<span style="font-size: 14px;">[Ahmed Hassan Ali - Customer care advisor – Egypt]</span>
</div>
</div>
</section>
Here is JSfiddle Demo