Creating mobile-friendly buttons: a step-by-step guide

How can I make my button responsive? I have a button on an image within a slider. It looks good and works fine on desktop, but on mobile it appears too big and gets overlapped with the slider radio icons, causing the "read more" link button to not redirect to any page.

Code

<div class="ism-slider" data-play_type="loop" data-interval="3000" id="my-slider">
  <ol>
    <li>
      <img src="ism/image/slides/Editing.png">
     <div class="ism-caption ism-caption-0" style="background-color:#8497b0">
     <a href="editing.aspx" class="myButton">READ MORE</a></div>
    </li>
</ol>
</div>

Image https://i.sstatic.net/pIo5O.png

htmlcssresponsive-design

Answer №1

Your desktop style adjustments can go here.

@media screen and (max-width: screenSize) {
    .myButton{
        width: custom button width;
        height: custom button height;
    }
}

Adjust the screenSize to match the desired window size for applying these styles within the @media query

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

Struggling with properly navigating a JSON file in my JavaScript code... specifically trying to access and retrieve the "responseObject.weather[i].weatherresponseObject.weather[i].description" data

Struggling with extracting data from a PHP file in JSON format to display on an HTML file using JavaScript. I seem to be encountering issues with accessing responseObject.weather[i].weatherresponseObject.weather[i].description, and I suspect it might be d ...

javascripthtmlajax

The find element will yield an empty result when using XPath contains with Text() method

When checking for Gender and Date in the assertion, it returns false and the IWebElement displays an empty string. This anomaly only occurs with Gender and Date, while the rest provide accurate results. CODE IWebElement actualname = BrowserHelper.WebDri ...

c#htmlseleniumselenium-webdriverxpath

Exploring Checkboxes in Hypertext Markup Language

Can anyone advise on the proper HTML input attribute to limit user selection in a list of checkboxes? Specifically, I want users to select no more than three out of five checkboxes without using radio buttons. Please provide solutions using only HTML and n ...

htmlinputattributes

Image of outer space enclosed by a circular boundary

Check out this fiddle I created here. It's a simple concept of an image inside a red circle. Is there a way to add some spacing around the image within the circle? This is the markup I currently have: <div style=" width: 50px; he ...

htmlcss

Can the presence of buttons and links improve mobile responsiveness?

I can't help but wonder about this. Is it user-friendly to create a div that looks like a button and has a 'click' event attached to it? Will all mobile browsers handle it accurately and always trigger the event when the div is clicked? In t ...

javascriptjqueryhtml

Displaying the Indian Rupee symbol in PHP

I'm attempting to show the Indian rupee symbol using HTML code ₹ The HTML code is being echoed in PHP and everything seems to be working fine, except that the rupee symbol is not showing up. I've tested using other currency symbols and the ...

phphtml

Generate a separate div element for each row within a table structure

I currently have a table within my HTML code. My goal is to generate a new div for each row in the table. Each div should contain a <p> element corresponding to the data in the first and second columns of each row. Is there a way to accomplish this ...

html

Exploring the magic of Hover effects using CSS and JQuery

I am exploring ways to enhance the display of an element when hovering over it. I have implemented a button and my objective is for the first click to activate the hover effect, while the second click will reset it. However, I am facing an issue where the ...

javascriptjquerycss

restore the HTML element to its initial position after being moved

I am utilizing document.getElementById('Droping1').style['-webkit-transform'] = translate(0px,'+Ground+'px)'; in order to relocate an HTML element. How can I return it to its original position for reusability without t ...

javascriptjquerycsshtml

Is there a way to automatically increase a value by clicking on it?

Check out this code snippet I'm working with: let funds = document.createElement('funds') funds.style.color = 'green' funds.style.textAlign = 'center' funds.style.fontSize = '50px' funds.style.backgroundCol ...

javascripthtml

Count duplicated values in an array of objects using JavaScript ES6

I am working on creating a filter for my list of products to count all producers and display them as follows: Apple (3) I have managed to eliminate duplicates from the array: ["Apple", "Apple", "Apple"] using this helpful link: Get all non-unique values ...

javascriptarrayshtmlangulartypescript

Transmit information through a router connection

When attempting to pass data from one page to another routing page using [queryParams]="{'usd':usd, 'count' :country, 'name' :name}" through the routing button, it works perfectly fine but an error is displayed in my console. ...

htmlangularwebstorm

AngularJS provides the ability to use cookies when working with an EventSource

I'm exploring the idea of using EventSource to send server events to the client, but I want the client to be able to distinguish itself so it only receives its own events. I've been attempting to utilize cookies for this purpose, but for some rea ...

javascriptangularjshtmlcookieseventsource

Combining ASP.NET MVC with HTML5 for dynamic web development

We are in the process of planning a new project and are interested in utilizing ASP.NET with the MVC pattern. Additionally, we want to incorporate the new features of HTML5. However, we have been having trouble finding sufficient information or connecting ...

asp.net-mvchtml

Arrangement of Divs Using CSS and HTML

Working on a New Website Hey there, I could really use some assistance in recreating the design shown in this image for my website project. I've made some progress but it's not quite coming together as expected. I'm struggling with positio ...

htmlcsspositioning

Can the placement and dimensions of the audio controls be customized?

I am working on an audio tag that initially hides the controls, and only shows them when a user clicks on a specific link. Here is the code snippet: var audio = document.getElementById(audioId); if (audio.paused) { audio.src = clip; audio.play(); ...

csshtmlhtml5-audio

Submitting modal form information using AJAX to PHP

As a novice in the realm of web programming, I find myself seeking some guidance to untangle a riddle. Regrettably, my grasp of the basics still leaves much to be desired. Within my main page, view.adminsettings.php, I've designated a Navigation DIV ...

javascriptphpjqueryhtmlajax

How can you check if a field is blank without allowing any empty spaces to be saved in JavaScript?

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <body> <form id="api_crud_form" name="api_crud_form" action="https://www.google.es"> Name: <input type="text" name="name" id=" ...

javascriptphphtml

A technique for horizontally centering an image while simultaneously ensuring that the bottom is pushed down, even at an unknown resolution, and maintaining center alignment if

Imagine a scenario where I have an image with unknown resolution. My goal is to horizontally center it, even if the window's width is smaller than the picture, while also adjusting the bottom of the window to match the height of this picture. Is ther ...

htmlimagecssbackground-position

Ways to Create a Text Overlay on an Image for your Banner

I have a banner div element with an image overlapping it. I'm trying to display my text without it being covered by the image, but I'm facing some challenges. Here's a visual example of the issue: https://i.stack.imgur.com/JdW75.png This ...

htmlcssbootstrap-4