How to fit text container width dynamically according to screen size using CSS ?
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.
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.
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.