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

Include the attribute exclusively for the initial division within a group of corresponding elements

Looking to change the appearance of this HTML code without being able to edit it directly? <form method="POST" id="go123pago"> <div align="center" style="width:220px"> <div style="float:left;padding:10px;width:190px"> ...

jqueryhtmlcss

Styling elements using the nth-child selector in JavaScript

I am trying to apply a CSS class based on the combined height of the 2nd and 3rd child elements. For example, if the height of the 2nd child plus the height of the 3rd child equals a certain value, I want to add a specific class. Here is my JavaScript cod ...

javascriptcss

Arranging serialized information from a tabular format and retrieving specific data

: I'm currently attempting to utilize an AJAX POST request to send data from a dynamic webpage that includes information gathered from a table form, a date selection box, and comment text input. The webpage is generated as a PHP file on a GET request ...

javascriptphphtmlajax

Creating a CSS key animation for resizing an image: What is the correct way to make an image expand and contract

Check out this CSS key animation example: http://jsfiddle.net/ryurage/Q2ELp/ I'm attempting to make an image grow and occupy most of the window when triggered by user interaction like hovering or click-and-hold. Subsequently, I want the image to shr ...

jquerycsscss-animations

converting an entire HTML layout into a PDF using JavaScript

I am attempting to convert an HTML design to PDF using the following script: <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>. I have designed a table to my liking, here is how it looks in HTML: https://i. ...

htmlangularjsjspdf

Align bootstrap button to the center on xs screens

I've spent countless hours on this issue - I just can't seem to get the button centered properly in xs mode. It keeps aligning itself based on the left side, no matter what I try. I've searched through Bootstrap but couldn't find a clea ...

htmlcsstwitter-bootstrap

Utilizing Django to recycle an HTML block for multiple for loops within the same template

I have three specific states for an object - 1. to start, 2. started, and 3. finished. Upon filtering the objects in view, I pass three variables to the template - tostart_objects, started_objects, and finished_objects. My current approach involves loop ...

pythonhtmldjangodjango-templates

Navigate to the location using AngularJS elements in the JavaScript iframe1

Dealing with an issue while working on AngularJS. I am facing a frustrating problem where I am attempting to use one link to open links in two separate iframes. All aspects of this function correctly, except for the actual links. The issue arises when usin ...

javascripthtmlangularjs

Tips for improving the styling of a django form with mixed elements

Here are two different forms I am working with: class InitialForm(Form): trn = IntegerField(widget=NumberInput, required = False) klient = ChoiceField(choices=KLIENTS, required = False) class SecondForm(Form): faktura = CharField(max_length = ...

cssdjangodjango-forms

Is it better to apply the font-family to the body or to the html element?

Is it more appropriate to specify the font-family CSS property on the html element or the body element? html { font-family: sans-serif; } or body { font-family: sans-serif; } I've looked into this issue online, but there doesn't seem to ...

htmlcss

Capture any clicks that fall outside of the specified set

I am facing an issue with my navigation drop down menu. Currently, the pure CSS functionality requires users to click the link again to close the sub-menu. What I want is for the sub-menu to close whenever a click occurs outside of it. I attempted a solu ...

javascriptjqueryhtmlcss

The background suddenly vanishes once the background-image property is set to no-repeat

I'm currently attempting to add a background image to my WordPress website. .content:before { content: ""; background-image: url("gfx/SevenWonders.jpg"); /*background: #fff;*/ background-size:600px 700px; background-repeat: no-repeat; position: absol ...

csswordpressbackground-repeat

What could be causing this table to exceed its dimensions by 2 pixels?

Why is the height of this table 102px instead of 100px? Is there another CSS attribute that needs to be set besides: table { border-spacing:0; border-collapse:collapse; } For example, check out this example link. ...

css

Innovative Tools for Interactive Sites and Dynamic Animations

I'm interested in developing interactive websites soon and I'm curious about the various technologies I can use to create an engaging web page. I know that HTML5 now supports drawing on a Canvas, even in 3D. Can you recommend any helpful tutoria ...

htmlhtml5-canvaswebglinteractive

Using a custom function, automatically initiate audio playback when an Android WebView JS loads

I have a unique JS function specifically designed for the audio tag, which also controls the progress bar. It works perfectly when I click on the associated tag <a onclick="playSound(1)">. However, if I try to initiate it on page load, the function s ...

javascripthtmlaudio

Converting an NPM package into a gulp workflow

I'm currently generating html files from Nunjucks using my gulp file. Now, I need to convert these html files into text files. I came across a useful NPM package called html-to-text that can help with this task. However, I'm facing some challenge ...

htmlnode.jsnpmgulp

Tips for limiting the .click function to only the initial image in order to prevent loading all images within the container

I am facing a situation where multiple images are being returned into a specific div, which is working as intended. <div class="go" id="container"></div> Upon clicking on an image, it is loaded into a modal popup. However, instead of capturin ...

javascriptjqueryhtml

Is there a method to instruct crawlers to overlook specific sections of a document?

I understand that there are various methods to control the access of crawlers/spiders to documents such as robots.txt, meta tags, link attributes, etc. However, in my particular case, I am looking to exclude only a specific portion of a document. This por ...

javascripthtmlseoweb-crawler

The ng-repeat ng-switch combination is not functioning as expected

My data can be simplified to the following in my code: function DemoCtrl($scope) { $scope.myData= [ {text: "blah", other: 3, V: 'caseOne'}, {text: "blah", other: 3, V: 'caseTwo'}, {text: "blah", other: 3, V ...

javascripthtmlangularjs

Position pictures in the same row in a straight line

I am struggling to align a set of images properly. The screenshot below shows the current layout: My goal is to have all four images lined up in a single row, with any additional images starting on a new row. I have attempted various methods, but none ha ...

htmlcss