Responsive Text in html/css

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;
}

1 answer

  • answered 2021-02-22 22:55 BrianZhang

    Use flex-wrap: wrap on the container element. See more about it here.