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.
<!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.
<!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.