Utilizing CSS/HTML to optimize code for mobile applications

Looking for some help with implementing the Upcoming Events part from this code snippet: https://codepen.io/AbhijithHebbarK/pen/boKWKE

.events-details-list{
     opacity:0;
    transition: all 0.3s ease-in-out;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    z-index:99;
    list-style-type: none;
    padding:15px 0px;
     background: #22303E;
}
.events-details-list li{
      padding: 0px;
    margin: 5px 15px;
    height: auto;
    text-align: center;
    color: #fff;
}
.events-details-list li,.events-details-list li:hover{
  color: #fff;
  font-size:15px;
  text-decoration: none;
}

Having trouble using it on my mobile phone - hover effects are not working and the font stays red. Any CSS tips to make it work smoothly on mobile devices would be greatly appreciated.

Thank you!

htmlcssmobile

Answer №1

In my opinion, the design may not be optimized for mobile devices since touching and hovering are different interactions. If you really want to keep the animation, consider changing it to :active state.

Answer №2

Thanks for the assistance, I experimented with adding the "active" and "focus" attributes but unfortunately they did not work. The solution turned out to be:

  cursor: pointer;

and now the hover effect is functioning correctly 😉

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

html5-jquery checkbox change event not firing

I successfully implemented an on/off switch using the method outlined in for HTML5. The functionality of the switch itself is working perfectly - click on it to toggle between states and query the checked state of the input/checkbox. However, I am facing ...

javascriptjqueryhtml

What is the relationship between html, body, and window when scrolling through code?

I've been working on adding a scroll-to-top button to my website. After doing some research online, I came across this code snippet: $('html, body').animate({scrollTop:0}, 'slow'); It's interesting that they are trying to scr ...

javascripthtmljquerycss

Error importing reach-router in Gatsbyjs causing website to break

While working on my Gatsby project, I decided to incorporate the React Cookie Consent package. However, upon installation and implementation attempt, my website crashed, displaying this error message: warn ./.cache/root.js Attempted import error: &a ...

javascripthtmlnpmgatsby

Tips for integrating PHP with HTML5 while developing a Blackberry native application that utilizes Blackberry websockets

I'm currently working on a basic HTML5 page that includes inline PHP script. I'm looking for advice on how to transform this app so it can be used with Blackberry WebSockets. For example, I want to develop a native app using HTML5. ...

htmlblackberry

What is an alternative method for creating a horizontal line without the need for the <hr> tag?

Is there a way to create a slim horizontal line without using the <hr> tag ? This is what I attempted: .horizontal-line{ border-top: 1px solid #9E9E9E; border-bottom: 1px solid #9E9E9E; } While it does function, I am hoping for a thinner line. ...

javascripthtmlcsstagsvisual-web-developer-2010

Switching back and forth between classes prevents the animation from playing continuously, causing it to jump straight to the end

Currently, I am in the process of animating a hamburger menu with a unique twist. The idea is to have the top and bottom lines smoothly translate to the middle and then elegantly rotate into an X shape when clicked. My approach involves toggling between tw ...

javascripthtmljquerycsscss-animations

Tips on implementing a Javascript function triggered by a user's click within the video player frame

<script> function greet() { alert("hello"); } </script> <iframe width="100%" height="315" src="https://www.youtube.com/embed/AGM0ibP1MRc" onclick="greet()"></iframe> .Kindly assist me, please. ...

javascriptphphtml

"Title, background hue 3, and color lined up in a single

.title { background-color: #FFC20E; font-size: 23px; font-weight: 600; padding: 5px 0px 5px 22px; font-family: "Open Sans"; } <h3 class="title">Title</h3> I need to create a title with a unique background color, can you ple ...

htmlcssbackground

When using onclick="location.href='page.html'", the page fails to load on Safari browser

I've been having trouble with getting onclick="location.href='link.html'" to work and load a new page in Safari (5.0.4). In my project, I am creating a drop-down navigation menu using the <select> and <option> HTML tags. I have ...

javascripthtmlsafarionclick

Retrieving the text from the img tag of a bs4.element.Tag

I have a question that needs to be addressed. My concern involves a list of bs4.element.Tags, similar to the one illustrated in the image below. The issue at hand is filtering out only the href tags that are preceded by an <img> tag. How can this s ...

pythonhtmlimagebeautifulsouptags

What could be the reason for box-shadows not appearing properly on Safari browsers?

Why are box shadows with decimals sometimes not displayed in Safari? Is there a solution to this issue? Here's an example of the code: div { width: 200px; height: 200px; box-shadow: 0px 0.0351725rem 0.0351725rem 0px, 0px 0px 0px 0.0175862re ...

htmlcsssafaribox-shadow

Begin the animation again by hitting the start button, using the burst-engine and canvas

I have successfully created a simple animation using Burst Engine and HTML5. My goal is to make the start button trigger the animation to restart if pressed twice. Currently, when I press it, the animation just starts and nothing else happens. I suspect t ...

javascripthtmlcanvas

How can AJAX be utilized with both file and text inputs?

I have a basic form enclosed in a modal window, dynamically generated using jQuery: <form name="altEditor-form" id="altEditor-form" enctype="multipart/form-data" role="form"> <div class="form-group"> <div class="col-sm-5 col-md- ...

jqueryhtmlajaxformsfile

What is the best way to send an object to Vue Component?

How can I properly call a Vue Component with a data object? The todo-item tag works as expected, but the todo-item2 tag does not produce any output. I was expecting the same result. Here is the HTML code: <div id="app"> <todo-item v-bind:te ...

javascripthtmlvue.js

jQuery Autocomplete - struggling to pinpoint the exact location where the width of the suggestions div is being defined

I have successfully implemented jQuery Autocomplete, but I am facing an issue with adjusting the width. Currently, it is set to 268px in Firebug, however, I would like it to be 520px. After checking the stylesheet, I couldn't locate where the width o ...

javascriptjquerycssstylesheetclient-side

Is manually coding HTML for email necessary, or are there any practical tools or converters available?

Creating HTML emails is a different challenge compared to designing websites, as it requires working with tables instead of CSS. I'm in need of recommendations for tools specifically designed for HTML email creation, preferably from individuals who h ...

htmlemailhtml-table

React - utilize a variable as the value for an HTML element and update it whenever the variable undergoes a change

I'm on a mission to accomplish the following tasks: 1.) Initialize a variable called X with some text content. 2.) Render an HTML paragraph element that displays the text from variable X. 3.) Include an HTML Input field for users to modify the content ...

javascripthtmlreactjs

Why are my div elements mysteriously adding bottom margin?

I've encountered an unexpected margin bottom issue while working on some HTML and Bootstrap code. No matter how I try to set the div margin to 0 in a separate stylesheet, like this: body { margin: 0; } div { margin-bottom: 0; } The problem persi ...

htmlcssbootstrap-5

The Django static files were uncooperative and refused to function

I've encountered an issue with my HTML files while using Django. Some files work perfectly fine when I load static files, but others don't seem to cooperate. I'm perplexed as to why this inconsistency exists! Have I overlooked something impo ...

djangohtmldjango-templates

Change element position to relative while scrolling

I created a wrapper with an animation similar to the one on Apple's Airpods Pro page. It features a video that plays gradually as I scroll, with the text smoothly scrolling over it within a specific area (text-display). So far, this part is working w ...

javascriptjqueryhtmlcss