Create a Dashboard App using React-Native

How to Create a Responsive Text using CSS ?

Last Updated : 22 Jul, 2024

This article will show you how to create responsive text with HTML and CSS. Responsive text means the text size will change in different screen sizes.

We can create Responsive Text using CSS Media Query or using viewport width (vw).

Example 1: In this example, we will create a responsive text using CSS Media Query.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content=
		"width=device-width, initial-scale=1.0">

	<title>Responsive Text Example</title>

	<style>
		body {
			font-family: 'Arial', sans-serif;
			margin: 0;
			padding: 0;
			text-align: center;
		}

		.container {
			width: 60%;
			margin: auto;
		}

		h1 {
			color: green;
			font-size: 40px;
		}

		p {
			font-size: 28px;
		}

		@media (max-width: 768px) {
			h1 {
				font-size: 30px;
			}

			p {
				font-size: 20px;
			}
		}

		@media (max-width: 576px) {
			h1 {
				font-size: 20px;
			}

			p {
				font-size: 12px;
			}
		}
	</style>
</head>

<body>
	<div class="container">
		<h1>GeeksforGeeks</h1>

		<p>
			A Computer Science portal for geeks. It contains
			well written, well thought and well explained
			computer science and programming articles, ...
		</p>
	</div>
</body>

</html>

Output:

Example 2: In this example, we will create a responsive text using "viewport width" (set font size in vw).

HTML

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content=
		"width=device-width, initial-scale=1.0">

	<title>Responsive Text Example</title>

	<style>
		body {
			font-family: 'Arial', sans-serif;
			margin: 0;
			padding: 0;
			text-align: center;
		}

		.container {
			width: 60%;
			margin: auto;
		}

		h1 {
			color: green;
			font-size: 5vw;
		}

		p {
			font-size: 2vw;
		}
	</style>
</head>

<body>
	<div class="container">
		<h1>GeeksforGeeks</h1>

		<p>
			A Computer Science portal for geeks. It contains
			well written, well thought and well explained
			computer science and programming articles, ...
		</p>
	</div>
</body>

</html>

Output:

Create a Dashboard App using React-Native

V

vkash8574

Improve

Article Tags :

Similar Reads

How To Create a Responsive Table in CSS ?

A responsive table in CSS automatically changes to fit any screen size. It stays easy to read on small screens, like phones, by scrolling or adjusting columns as needed. To make a responsive table in CSS, place it inside a <div> with overflow-x: auto;. This lets the table scroll sideways on sm

How to Create a Responsive Image Grid using CSS?

A responsive image grid is a layout technique used to display images in a grid-like structure that adjusts dynamically based on the screen size to ensure that the grid looks good and functions well across various devices and screen resolutions. Below are the approaches to creat a responsive image gr

How to Create Responsive Sidebar using HTML & CSS ?

Creating a responsive sidebar using HTML and CSS means designing a navigation menu that adapts seamlessly to different screen sizes. It provides a user-friendly experience on both desktop and mobile devices, adjusting its layout for better readability and easy access to content. ApproachBasic Struct

How to create a Responsive Inline Form using CSS ?

When the browser window is resized, the labels and inputs will stack on top of each other for smaller screens. To create a responsive inline form using CSS, use a container with flexible styling, such as Flexbox or Grid, to arrange form elements horizontally. Utilize media queries to adjust the layo

How to create Perspective Text using HTML & CSS ?

In this article, we are going to create an illusion of images below the main image. This is a simple article, we can achieve our target only by using HTML & CSS. Approach: Create a main div in which we have added a heading tag and then use the selectors in CSS to create the effects. HTML Code: F

how to create a responsive checkout form using CSS

Creating a responsive checkout form using CSS ensures that users can efficiently and comfortably enter their billing and payment information on any device. ApproachCreate a form that is wrapped inside a <form> tag.Inside the form create two sections for "Address Details" and "Payment Informati

How to Create a Responsive Image Gallery using CSS?

Creating a responsive image gallery using CSS is a common task in web development. A responsive gallery adjusts to different screen sizes and ensures that images look good on devices ranging from mobile phones to desktop monitors. In this article, we will explore different approaches to creating a r

How to Create a Ribbon using CSS?

In this article, we will learn how to create a ribbon using CSS. PrerequisitesHTMLCSSApproachThe structure consists of a <button> element with the class "btn" containing the text "GFG DSA Course". Inside the button, there is an <span> element with the class "ribbon" containing the text "

How to create a Menu Icon using CSS ?

The Menu Icon is mostly used on smaller screens, there's limited space to display a full navigation menu. A menu icon helps in hiding the navigation items initially and revealing them when the user needs them. In this article, we will see how To Create a Menu Icon using CSS. There are many ways to c

How to Create Responsive Testimonials with CSS?

Testimonials are a powerful way to build trust and credibility for your brand. They showcase the positive feedback and experiences of your clients or users. To ensure your testimonials look great on all devices, itâ€™s essential to make them responsive. Here, weâ€™ll explore different approaches to crea