While building a website for small-screen devices like smartphones, it becomes important that we use every bit of screen space wisely, we could not afford to waste any area. To achieve this, we can hide some peripheral elements in phone mode.
Hiding button text in phone mode:
Example: This example is implemented using CSS. We can use media queries in CSS to hide button text according to the screen size of the device.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
/* Basic styling */
#btn {
width: auto;
}
/* It is triggered when screen
size becomes <=768px */
@media(max-width:768px) {
#btn-text {
/* It hides the button text
when screen size <=768px */
display: none;
}
}
</style>
</head>
<body>
<h2 style="color:green">
GeeksforGeeks
</h2>
<b>
Hiding button text
in phone mode</b><br /><br />
<button id="btn">
<img src=
id="icon">
<span id="btn-text">Delete</span>
</button>
</body>
</html>
|
Example 2: The following example is implemented using bootstrap.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
crossorigin="anonymous">
<style>
#btn {
width: auto;
}
</style>
</head>
<body>
<h2 style="color:green">
GeeksforGeeks
</h2>
<b>
Hiding button text
in phone mode
</b>
<br /><br />
<button>
<img src=
id="icon">
<span class="d-none d-md-inline-block">
Delete
</span>
</button>
</body>
</html>
|
Output:
Note: Both codes will give the same output, only the font style will change in the case of bootstrap due to the default bootstrap styling