Display a button with an icon only when in responsive mode using HTML, CSS, and Materialize

Is there a way to hide the text on a button but keep the icon visible when viewing on a mobile device?

For instance, if a button displays a face icon from MaterializeCSS along with the text "support", I would like to eliminate the text while still showing the icon so that the button becomes smaller. I am using the MaterializeCSS framework and Materialize icons.

This is how the button is structured in HTML:

<a class="waves-effect waves-light white-text top-button z-depth-2">
  <i class="material-icons left">
    face
  </i>
    Contact support
 </a>

htmlcssresponsive-designmaterialize

Answer №1

<a class="waves-effect waves-light white-text top-button z-depth-2">
   <i class="material-icons left">
      face
   </i>
     <span class="hide-on-small-only"> Contact support </span>
</a>

It is important to remember to include the span tag with the hide-on-small-only class from Materialize in order to hide the button text on mobile devices only.

Answer №2

Give this a try

Implement a media query specifically for mobile devices like the one below.

@media only screen and (max-width: 767px) {
  .top-button {
    font-size: 0;
  }
  .top-button i {
    font-size: 16px;
  }
}

Check out the functional code snippet

.top-button {
  font-size: 16px;
}

@media only screen and (max-width: 767px) {
  .top-button {
    font-size: 0;
  }
  .top-button i {
    font-size: 16px;
  }
}
<a class="waves-effect waves-light white-text top-button z-depth-2"><i class="material-icons left">face</i>Contact support</a>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The current layout of the div is hindering the ability to switch from vertical scrolling to horizontal scrolling

I'm currently utilizing this scroll converter tool to transform vertical scrolling into horizontal scrolling. However, despite correct script inclusion and initialization, the conversion is not working as expected. It seems like there might be an issu ...

javascriptjqueryhtmlcss

The hover function stops working once the dropdown class has been removed

I am currently experimenting with a bootstrap template. In the navigation bar, there is an option for "Blog" and "Test". For the "Test" button, I decided to remove the li class="dropdown " because I wanted to create a button that changes color on hover si ...

htmlcss

Creating an animated full-width SVG with a background image

This has been quite a challenge for me. I have successfully implemented the main functionality that I wanted in this codepen. The SVG is divided into 3 sections, with the middle section sliding away from the others when you click the "Find Out More" button ...

jqueryhtmlcssanimationsvg

After utilizing the function, the forward and back arrows are no longer visible

After setting up my slideshow, I encountered an issue where clicking the next or previous buttons caused them to shrink down and turn into small grey boxes. Has anyone experienced this before? This relates to PHP/HTML if ($_SERVER['REQUEST_METHOD&ap ...

javascriptphpjqueryhtmlcss

Steps for smoothly transitioning an element into a row and animating its neighboring elements to adjust their width using VueJS

Is there a way to smoothly slide-in an element in a row and have the other elements adjust their widths accordingly while maintaining their relative sizes? <div style="width: 100%; display: flex"> <div id="firstColumn" ...

cssvue.jscss-animationscss-transitions

Horizontal alignment of Bootstrap columns is not working as expected

While attempting to integrate Bootstrap elements into my portfolio, I encountered issues with aligning columns. Currently, the only columns I have added are in the "welcome-section" (Lines 40-52), but they refuse to align horizontally. I've tried tro ...

htmlcsstwitter-bootstrapbootstrap-4

Should WordPress files be kept separate (php, css, and js) or combined into a single file?

Currently, I am updating my WordPress website with a goal of minimizing the number of plugins used. To achieve this, I prefer writing code only for essential functionalities. In order to optimize my work with php, css, and javascript files, I have been exp ...

javascriptphphtmlcsswordpress

Gensim's Word2Vec is throwing an error: ValueError - Section header required before line #0

Hello everyone! I am diving into the world of Gensim Word2Vec and could use some guidance. My current task involves using Word2Vec to create word vectors for raw HTML files. To kick things off, I convert these HTML files into text files. Question Number O ...

pythonhtmlnlpgensimword2vec

What are the strategies employed by Wix in utilizing mobile and desktop CSS?

While browsing through Wix, I stumbled upon something quite intriguing that left me puzzled. On a desktop with a width of 2560px, the Wix page loaded normally. But what caught my attention was when I resized the screen to make it smaller, either by using ...

htmlcssvelo

Design a custom scrolling navigation bar for enhanced user experience

Struggling with web design as I develop a site in ASP.NET. I have a database full of courses, each with numerous modules. The challenge is creating a navigation bar that dynamically adjusts to accommodate the varying number of modules per course without o ...

jqueryhtmlcssangularjs

Error encountered when attempting to trigger a Bootstrap dropdown within a designated div

When using React JS, I encountered an issue when trying to trigger a dropdown that was nested inside a div with the class name "row". Initially, I placed the data-toggle and data-target attributes inside the div, like so: <div className="row"> < ...

javascripthtmlcssreactjsbootstrap-4

Deciphering HTML with the Eyes

So, I find myself in a bit of a bind trying to come up with a title for this question. I have stumbled upon some HTML files that seem so complex, they could only have been crafted by the one and only Lord Lucifer himself. These files contain segments like ...

c#htmlparsing

In Chrome browser, the orientation of the options in the datalist remains consistent

Is there a way to change the direction of the datalist's options to RTL? While I'm able to change the direction of the input element, the same doesn't apply to the options of the datalist. I've attempted setting the dir attribute to r ...

htmlcssgoogle-chrome

Interactive website that transitions to a fresh page as we scroll further

As a beginner in web design, I've noticed a trend of companies using websites that automatically transition to the next page when scrolling down. An example of this is . What is this type of template called and are there any open source designs availa ...

cssscroll

Displaying content on a webpage using PHP, AJAX, and HTML

Looking to update my current form setup. I have a basic Form below: <form action="" method="POST"> <input type="button" value="Generate Numbers" onclick="on_callPhp1()"/> </form> Accompanied by this javascript code: <script type="te ...

javascriptphpjqueryhtmlajax

Utilize MySQL to populate highcharts with data

Learning the ropes of web programming, I have a personal project to monitor expenses. Simply put, my database stores data on total expenditures for this month and last month. I am able to display it manually (via echo), but I'm struggling to pass the ...

phphtmlmysqlhighcharts

Create a dynamic feature that allows users to easily add text fields within a form in

I'm looking to create a form that adds another input text field automatically when the user fills out one. Here is an example of the HTML structure: <form method="post" action="http://localhost/save" class="save"> <fieldset> <div&g ...

jqueryhtml

Fluid Grid System with columns of specific dimensions

Recently delving into the world of Foundation Framework, I've just begun utilizing it for my projects. My current task involves crafting a responsive design with the help of the Foundation Grid system. Specifically, I've set up a grid layout for ...

javascriptcssgridresponsive-designzurb-foundation

Having issues with my code. Attempting to interact with a specific element on a webpage using its ID, but encountering difficulties

Is there a way to automatically click on an element on a webpage based on its ID in the HTML code? The ID for this particular button is "input-optionXXX" where XXX represents a 3-digit number ranging from 100 to 400. I need a python script that can scan ...

pythonhtmlpython-3.xseleniumselenium-chromedriver

Encircle a particular row in a table with a border

I'm having trouble creating a border around only the top row of my table. Right now, the border is only displayed around the outside of the entire table. I also want to add a border specifically to the first row that contains 'Team, Correct Picks ...

phphtmlcsshtml-tableborder