Adjust the size of the buttons based on the width of the screen

I have successfully implemented a dropdown menu with both text and an icon. However, I am now faced with the challenge of removing the text while retaining the icon when the screen width is reduced to a maximum of 768px. Is it possible to modify the content of the div dynamically based on the screen size, or should I consider creating another div and toggling their visibility according to the screen width?

Below is the code snippet used for my dropdown:

<button onclick="myFunction()" class="dropbtn">My List <i class="fa fa-arrow-circle-down" aria-hidden="true"></i></button

My goal is to eliminate the text and only display the icon.

Any suggestions or guidance would be greatly appreciated!

htmlcsswidthscreen-size

Answer №1

To avoid creating another div, utilize @media queries in CSS to specify when and where you want icons to appear based on screen size.

Simply enclose your text within tags.

<button onclick="myFunction()" class="dropbtn"><span>My List</span> <i class="fa fa-arrow-circle-down" aria-hidden="true"></i></button>

Then apply CSS like this:

@media screen and (max-width: 768px) {
  button span{
    display: none
  }
  button{
    padding: 10px;
  }
}

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

Issue with style display:none not functioning in IE8, IE9, and IE10 when in Compatibility View mode

I am facing an issue with two DIVs on my webpage. One of them is set to have display:none based on certain conditions. Surprisingly, it works perfectly fine on IE10, Firefox, and Chrome. However, the problem arises on IE8, IE9, and IE10 Compatibility Vie ...

javascriptjqueryhtml

OnePageCheckout may result in empty boxes being displayed due to OneStepCheckout CSS styling

Seeking advice for an issue with the Magento OneStepCheckout module. Upon checkout, there are three columns: customer data (working fine), payment options (selectable via checkbox), and details about the chosen payment method. Unfortunately, the informati ...

htmlcssmagentopaypalonestepcheckout

My HTML gets rearranged by browsers, causing a change in appearance

UPDATE: I have discovered that the issue lies with Internet Explorer which alters the class attribute of an HTML element from: "<img class="blah".." to "<img class=blah..". This inconsistency only occurs in IE for me. It does not affect other attr ...

javascriptjqueryhtmlcss

Extracting information from an HTML table with Jsoup

Currently, I am attempting to utilize jsoup in order to parse an HTML table. As a newcomer to jsoup, I have taken the time to review some tutorials on how it operates. My objective is to retrieve values from each column within this specific website's ...

javahtmlparsingweb-scrapingjsoup

Reducing Image Size for Logo Placement in Menu Bar

Hello all, I am a newcomer to the world of web coding. Please bear with me if I ask something that may seem silly or trivial. I recently created a menu bar at the top of my webpage. Below that, there is a Div element containing an image. My goal is to make ...

jqueryhtmlcss

What is the best way to smoothly transition in an image that is dynamically set using Angular?

I am using Angular to set a background image for my page, but the current loading behavior is not visually appealing as the image loads from top to bottom. I would like to implement a fade-in effect or load the image from a blurry view to enhance the user ...

javascripthtmlcssangularjs

Creating a well-structured HTML layout following the BEM Methodology

I'm unsure about this HTML structure. Does it follow the BEM approach correctly? <div class="boxWithBorder"> <div class="header"> <h2 class="boxWithBorder__element"></h2> </div> </div> In my opinion, it sh ...

htmlbem

Styling your Kendo grid in ASP.NET MVC with custom CSS styling

I am facing a challenge with displaying two kendo grids side by side on a single view page. To modify the CSS style of a kendo grid using ASP.NET, I typically use: .HtmlAttributes(new { style="width:50%"}) However, when attempting to change more than one ...

cssasp.netasp.net-mvckendo-uikendo-grid

Ways to retain specific div elements following the execution of .html(data) command

Imagine I have a div structured in this way: <div id = "foo" style = "display: grid"> <div id = "bar"> keep me! </div> </div> If I use JQuery's .html(data) method like shown below: $('#foo').html(data); when m ...

javascriptjqueryhtml

Issue with CSS styling on a content slider causing the last picture to display incorrectly

I recently updated a Content Slider and tweaked the styles to my preference. Check out the changes I made on this link. In addition, I included an extra Thumbnail Picture on the right (7th one) along with the Main Picture. Oddly enough, the Slider seems ...

css

Contrast between action="" and action="#" attributes in HTML

There are two ways I've come across for setting a form's action attribute. #1. Using an empty string as the action attribute value: action="" #2. Specifying a hash symbol (#) as the action attribute value: action="#" What distingishes these ...

phphtmlforms

What is the best way to customize a video in Bootstrap 5 so that it remains at the bottom of the screen with centrally aligned text

When using Bootstrap 5, I am facing a challenge with a video on the index page that plays beneath the navigation. I want to maintain the 16x9 aspect ratio and have centered text overlayed on the video. However, I encounter an issue when attempting to set a ...

cssvideooverlaybootstrap-5

Can you identify the HTML table format and suggest effective web scraping methods?

I have been attempting to retrieve data from the following link, http://www.rchsd.org/doctors/index.htm? strt = 0 & ln = & fn = & sp = & grp = & loc = & lng = & gen = , using R but finding it quite challenging. I have observed that the URL remains constan ...

javascriptjqueryhtmlrweb-scraping

Utilizing CSS to print specific columns on a separate page at regular intervals

I am facing a challenge with printing a very large HTML table, which is dynamic in the sense that the number of rows and columns can vary. When printing, the rows that exceed the page length are automatically continued on the next page. However, I also nee ...

htmlcssprinting

Master the art of creating click events using only CSS

Is it possible to achieve this example using only CSS? If not, what would be the alternative solution? Any JSFiddle examples would be greatly appreciated! How can I also add slashes - should I use an image or can it be done with CSS? And what about the t ...

htmlcss

Eliminate the loading spinner from the tab on Google Chrome

Recently, I've been working on a project to create a website and have been searching for some innovative ideas. One interesting discovery I made was . What caught my eye was the unique feature where clicking on any tab did not result in the typical sp ...

jqueryhtmlcssgoogle-chromespinner

External CSS file unable to load background image as referenced

I am facing an issue with this code in my external CSS file as it doesn't seem to work at all. Strangely, when I move it internally, everything functions perfectly. Any thoughts on what could be causing this discrepancy? html { background-image:url(i ...

htmlcssrelative-path

Having trouble with vendor CSS not being recognized during brunch compilation

I am currently exploring the use of Pure.css in my application. After installing it via npm, I have configured my brunch-config.js as follows: stylesheets: { joinTo: { 'app.css': /^app/, 'vendor.css': /^(?!app)/ } } At thi ...

cssbrunch

Enhancing the functionality of the onclick function within the ng-repeat by incorporating a scope

I am looking to pass a parameter to a function that is called via onclick within an ng-repeat: <!-- Sliding bar (bottom) --> <div ng-show="currentSVG && currentLanguage && currentWidth && bannerHeight" pageslide ps-open=" ...

javascripthtmlangularjsonclickangularjs-ng-repeat

Ways to expand flexbox to occupy the entire container

I have a scenario where I want two flexboxes in a container to fill the entire height of the container. The left flexbox should display an image that fills its entire space, while the right flexbox contains other content. However, I'm facing difficult ...

htmlcsstwitter-bootstrapbootstrap-4