How to make text responsive in html/css?

Question

I want to make a text responsive and it should accordingly change its size depending on the device width.

Code:

 .aligned { display: flex; align-items: top; }.p{ padding: 15px; } img{ border: 5px solid #555; } blockquote { font-family: Georgia, serif; font-size: 18px; font-style: italic; width: 800px; margin: 0.25em 0; padding: 0.35em 40px; line-height: 1.45; position: relative; color: #383838; } blockquote:before { display: block; padding-left: 10px; content: "\201C"; font-size: 80px; position: absolute; left: -20px; top: -20px; color: #7a7a7a; } blockquote cite { color: #999999; font-size: 14px; display: block; margin-top: 5px; } blockquote cite:before { content: "\2014 \2009"; }

 <section> <link rel="stylesheet" href="assets/img/profile.jpg"> <img src="assets/img/profile.jpg" align="left" width="370" height="500"> <:-- <div style="display;inline-block,"> to put text under something or start new --> <div class="aligned"> <div class="p"> <p>I am currently exploring different options that will allow me to combine my interests in Business and Technology. and pursue a combined-degree in those fields, Motivated by my love for numbers. I started to explore the many ways I can use my Mathematical knowledge and implement it into different areas, While I always had a passion for business, I was introduced to Computer Science in my junior years of high school. and I came to know that I was genuinely passionated about learning it, It offers a holistic approach to solve problems which I admire, and since then. I have transformed my interest into a personal hobby;</p> <p>I would always like to challenge myself and learn new programming langauges to increase the size of my toolbox, I was inspired by one of my friends to take my programming skills and put it into a good use, thus, I was introduced to competitive programming and large coding events such as hackathons.</p> <p>The intellectual challenges, creativity. and logic programming offers has always further strengthened the inevitable bond between us, All you need is a notepad, and the world becomes your <i>canvas.</i></p> <p>Challenging myself allows me to not only grow outside my comfort zone, but gives a new perspective towards life. and how there are no limitations/boundaries that halt you from growing. It is everlasting. Once you develop the growth mindset, your journey just never comes to a complete stop! You are able to focus on self-development and different ways to come out of the comfort zone.</p> <blockquote> Nothing Is Impossible. The Word Itself Says 'IM Possible' <cite>Audrey Hepburn</cite> </blockquote> </div> </section><!-- End About Section -->

So I want to make the text and the blockquote (that appears at the bottom) responsive, and it should change size depending on the width of the device.

On a mobile device, I would like everything to be aligned vertically right after the image but on a larger device, it should look like what it is in the output of the code I sent.

This is what I was suggested by a user but it did not seem to work:

@media screen and (max-width: 250px) {
    font-size: 10vh; // Or the unit you want
    flex-direction: column;
}

Basically, I want the text to be vertically displayed under the picture on a mobile device but on a large device, it should be displayed what I sent in the code above.

Update

This is what my output looks like:

I do not want the image to be small, I do not know why it is small after the changes applied, and the text should be right under it.

Answer 1

First, remove align="left" from the img tag in HTML. Then add float: left; to the img ruleset in CSS. Finally, modifying your media query to include the section and img selectors:

 .aligned { display: flex; align-items: top; }.p{ padding: 15px; } img{ border: 5px solid #555; float:left; } blockquote { font-family: Georgia, serif; font-size: 18px; font-style: italic; width: 800px; margin: 0.25em 0; padding: 0.35em 40px; line-height: 1.45; position: relative; color: #383838; } blockquote:before { display: block; padding-left: 10px; content: "\201C"; font-size: 80px; position: absolute; left: -20px; top: -20px; color: #7a7a7a; } blockquote cite { color: #999999; font-size: 14px; display: block; margin-top: 5px; } blockquote cite:before { content: "\2014 \2009"; } @media screen and (max-width: 250px) { img{ display: block; float: none; } section{ font-size: 10vh; // Or the unit you want } }

 <section> <link rel="stylesheet" href="assets/img/profile.jpg"> <img src="assets/img/profile.jpg" width="370" height="500"> <:-- <div style="display;inline-block,"> to put text under something or start new --> <div class="aligned"> <div class="p"> <p>I am currently exploring different options that will allow me to combine my interests in Business and Technology. and pursue a combined-degree in those fields, Motivated by my love for numbers. I started to explore the many ways I can use my Mathematical knowledge and implement it into different areas, While I always had a passion for business, I was introduced to Computer Science in my junior years of high school. and I came to know that I was genuinely passionated about learning it, It offers a holistic approach to solve problems which I admire, and since then. I have transformed my interest into a personal hobby;</p> <p>I would always like to challenge myself and learn new programming langauges to increase the size of my toolbox, I was inspired by one of my friends to take my programming skills and put it into a good use, thus, I was introduced to competitive programming and large coding events such as hackathons.</p> <p>The intellectual challenges, creativity. and logic programming offers has always further strengthened the inevitable bond between us, All you need is a notepad, and the world becomes your <i>canvas.</i></p> <p>Challenging myself allows me to not only grow outside my comfort zone, but gives a new perspective towards life. and how there are no limitations/boundaries that halt you from growing. It is everlasting. Once you develop the growth mindset, your journey just never comes to a complete stop! You are able to focus on self-development and different ways to come out of the comfort zone.</p> <blockquote> Nothing Is Impossible. The Word Itself Says 'IM Possible' <cite>Audrey Hepburn</cite> </blockquote> </div> </section><!-- End About Section -->

Answer 2

First of all, put your display: flex at your section because it will serve as the container for your image and text.

so change this

.aligned { 
  display: flex; 
  align-items: top; 
}

to this

section { 
  display: flex; 
  align-items: top; 
}

or you can just transfer the .align class to section

Next, your media query is in wrong syntax and the max screen is too small. Even the smallest screen (Iphone5s) is 375px. In my opinion, 500px is a safe max-width for mobile devices (just my preference). Here's the correct code

@media screen and (max-width: 500px) {
  section {
    font-size: 10vh; // Or the unit you want
    flex-direction: column;
  }
}

I forgot to mention: For display: flex to work, you need to place your elements inside a div so flex can align it the way you want. So what you do is place your image into a div like this

<div>
  <link rel="stylesheet" href="assets/img/profile.jpg">  
  <img src="assets/img/profile.jpg" align="left" width="370" height="500">
</div>

In short, your html structure should look like this

<section>
  <div>
     place your image here
  </div>
  <div>
     place all your texts here
  </div>
</section>