Open In App

How to fit text container width dynamically according to screen size using CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we have given a text paragraph and the task is to fit the text width dynamically according to screen size using HTML and CSS. Some of the important properties used in the code are as follows-

  • display-grid: It helps us to display the content on the page in the grid structure.
  • grid-gap: This property sets the minimum amount of gap between two grids.
  • auto-fit: It takes the required constraints and fits the content according to the size of the screen.
  • <div>: It is the division tag and helps us to define a particular section of the HTML code so that it can be referred to and edited easily later in the CSS style sheet.
  • auto-fit: It makes all the available columns on the screen fit into the available space and expand them as needed to occupy the rows.
  • min() and max() function: This function is very much related to the mathematical function which defines a particular range of the function i.e. greater than or equal to min and less than or equal to max.
  • @media(min-width): It is a CSS property where the condition under this tag is only applied when the minimum screen width reaches 950px.

Example 1: It is a simple example. Here, we will use the <div> tag to specify each quote separately and repeat function in the CSS part.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
  
    <style>
        body {
            margin: 0;
            font-family: 'Nunito';
        }
          
        .top {
            padding: 3em;
            display: grid;
            grid-gap: 3em;
            grid-template-columns: repeat(4, 250px);
            .quote {
                padding: 3em;
                border-radius: .3em;
                box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.1);
                p {
                    margin-top: 0;
                }
                span {
                    font-weight: bold;
                    position: relative;
                    margin-left: 20px;
                    &:before {
                        content: '';
                        position: absolute;
                        height: 1px;
                        width: 20px;
                        border-bottom: 1px solid black;
                        top: 20px;
                    }
                }
            }
        }
          
        @media(min-width:950px) {
            .top {
                grid-template-columns: repeat(4, 1fr);
            }
        }
    </style>
  
</head>
  
<body>
    <div class="top">
        <div class="quote">
  
            <p>
                With the idea of imparting programming 
                knowledge, Mr. Sandeep Jain, an IIT 
                Roorkee alumnus started a dream, 
                GeeksforGeeks. Whether programming 
                excites you or you feel stifled, wondering
                how to prepare for interview questions or
                how to ace data structures and algorithms,
                GeeksforGeeks is a one-stop solution. With 
                every tick of time, we are adding arrows
                in our quiver. From articles on various 
                computer science subjects to programming 
                problems for practice, from basic to 
                premium courses, from technologies to 
                entrance examinations, we have been 
                building ample content with superior quality.
            </p>
            <br>
            <span>GFG</span>
        </div>
        <div class="quote span-2">
  
            <p>
                With the idea of imparting programming 
                knowledge, Mr. Sandeep Jain, an IIT 
                Roorkee alumnus started a dream, 
                GeeksforGeeks. Whether programming 
                excites you or you feel stifled, wondering
                how to prepare for interview questions or
                how to ace data structures and algorithms,
                GeeksforGeeks is a one-stop solution. With 
                every tick of time, we are adding arrows
                in our quiver. From articles on various 
                computer science subjects to programming 
                problems for practice, from basic to 
                premium courses, from technologies to 
                entrance examinations, we have been 
                building ample content with superior quality.
            </p>
            <br>
            <span>GFG</span>
        </div>
  
        <div class="quote">
            <p>
                With the idea of imparting programming 
                knowledge, Mr. Sandeep Jain, an IIT 
                Roorkee alumnus started a dream, 
                GeeksforGeeks. Whether programming 
                excites you or you feel stifled, wondering
                how to prepare for interview questions or
                how to ace data structures and algorithms,
                GeeksforGeeks is a one-stop solution. With 
                every tick of time, we are adding arrows
                in our quiver. From articles on various 
                computer science subjects to programming 
                problems for practice, from basic to 
                premium courses, from technologies to 
                entrance examinations, we have been 
                building ample content with superior quality.
            </p>
            <span>GFG</span>
        </div>
  
        <div class="quote">
            <p>
                With the idea of imparting programming 
                knowledge, Mr. Sandeep Jain, an IIT 
                Roorkee alumnus started a dream, 
                GeeksforGeeks. Whether programming 
                excites you or you feel stifled, wondering
                how to prepare for interview questions or
                how to ace data structures and algorithms,
                GeeksforGeeks is a one-stop solution. With 
                every tick of time, we are adding arrows
                in our quiver. From articles on various 
                computer science subjects to programming 
                problems for practice, from basic to 
                premium courses, from technologies to 
                entrance examinations, we have been 
                building ample content with superior quality.
            </p>
            <span>GFG</span>
        </div>
    </div>
</body>
  
</html>


Output:

Upon minimizing the output screen we are unable to see half of the text of the second row and are getting a scroll bar at the bottom of the window to scroll through. This doesn’t look nice and can cause trouble if the user is viewing the website on their mobile phone.

Example 2: This is a better approach as it gives us a more organized and hassle-free output with the addition of just one property known as auto fit. 

HTML




<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
      
    <style>
        body {
            margin: 0;
            font-family: 'Nunito';
        }
          
        .top {
            padding: 3em;
            display: grid;
            grid-gap: 2em;
            grid-template-columns: repeat(
                    auto-fit, minmax(250px, 1fr));
  
            .quote {
                padding: 2em;
                border-radius: .3em;
                box-shadow: 10px 10px 30px 
                        rgba(0, 0, 0, 0.1);
                p {
                    margin-top: 0;
                }
                span {
                    font-weight: bold;
                    position: relative;
                    margin-left: 15px;
                    &:before {
                        content: '';
                        position: absolute;
                        height: 1px;
                        width: 10px;
                        border-bottom: 1px solid black;
                        top: 10px;
                        left: -15px;
                    }
                }
            }
        }
    </style>
</head>
  
<body>
    <div class="top">
        <div class="quote">
            <p>
                With the idea of imparting programming 
                knowledge, Mr. Sandeep Jain, an IIT 
                Roorkee alumnus started a dream, 
                GeeksforGeeks. Whether programming 
                excites you or you feel stifled, wondering
                how to prepare for interview questions or
                how to ace data structures and algorithms,
                GeeksforGeeks is a one-stop solution. With 
                every tick of time, we are adding arrows
                in our quiver. From articles on various 
                computer science subjects to programming 
                problems for practice, from basic to 
                premium courses, from technologies to 
                entrance examinations, we have been 
                building ample content with superior quality.
            </p>
            <br>
            <span>GFG</span>
        </div>
  
        <div class="quote span-2">
            <p>
                With the idea of imparting programming 
                knowledge, Mr. Sandeep Jain, an IIT 
                Roorkee alumnus started a dream, 
                GeeksforGeeks. Whether programming 
                excites you or you feel stifled, wondering
                how to prepare for interview questions or
                how to ace data structures and algorithms,
                GeeksforGeeks is a one-stop solution. With 
                every tick of time, we are adding arrows
                in our quiver. From articles on various 
                computer science subjects to programming 
                problems for practice, from basic to 
                premium courses, from technologies to 
                entrance examinations, we have been 
                building ample content with superior quality.
            </p>
            <br>
            <span>GFG</span>
        </div>
  
        <div class="quote">
            <p>
                With the idea of imparting programming 
                knowledge, Mr. Sandeep Jain, an IIT 
                Roorkee alumnus started a dream, 
                GeeksforGeeks. Whether programming 
                excites you or you feel stifled, wondering
                how to prepare for interview questions or
                how to ace data structures and algorithms,
                GeeksforGeeks is a one-stop solution. With 
                every tick of time, we are adding arrows
                in our quiver. From articles on various 
                computer science subjects to programming 
                problems for practice, from basic to 
                premium courses, from technologies to 
                entrance examinations, we have been 
                building ample content with superior quality.
            </p>
            <span>GFG</span>
        </div>
  
        <div class="quote">
            <p>
                With the idea of imparting programming 
                knowledge, Mr. Sandeep Jain, an IIT 
                Roorkee alumnus started a dream, 
                GeeksforGeeks. Whether programming 
                excites you or you feel stifled, wondering
                how to prepare for interview questions or
                how to ace data structures and algorithms,
                GeeksforGeeks is a one-stop solution. With 
                every tick of time, we are adding arrows
                in our quiver. From articles on various 
                computer science subjects to programming 
                problems for practice, from basic to 
                premium courses, from technologies to 
                entrance examinations, we have been 
                building ample content with superior quality.
            </p>
            <span>GFG</span>
        </div>
    </div>
  
</body>
  
</html>


Output: 

In this method, we can see that upon minimizing the screen all the rows are adjusted as columns one below the other. And we are given a vertical scroll bar for the last quote. Here no text is omitted from a line and we are able to read the whole quote.



Last Updated : 12 Feb, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads