I'm attempting to create a click-to-call link on my website using the following:
<a class="mobile-only" href="tel:+534306464456"><p class="">Click Here to call us</p></a>
I want this link to only show up on mobile devices, specifically phones. I've tried the following CSS:
@media (max-width: 991px) {
.mobile-only {
display:block !important;
}
}
.mobile-only{
display:none !important;
}
However, it doesn't seem to be working. Is there another way I can achieve this?
.phone-exclusive {
display: none;
}
@media only screen and (max-width: 767px){
.phone-exclusive {
display: block;
}
}
This solution appears to be effective.
.mobile-only {
display: block;
}
@media screen and (min-width: 768px){
.mobile-only {
display: none;
}
}
Make sure to move the .mobile-only class above your media query in order to follow the cascading nature of stylesheets. This means that the media query should be placed at the end of the file. Alternatively, you can place the .mobile-only class inside a media query that only affects desktop resolutions. It's also recommended to avoid using the !important statement in your CSS.
.mobile-only{
display: none;
}
@media only screen and (max-width: 991px) {
.mobile-only {
display: block;
}
}
Another approach could be:
@media only screen and (max-width: 991px) {
.mobile-only {
display:block;
}
}
@media only screen and (min-width: 991px) {
.mobile-only{
display: none;
}
}
I'm encountering an issue while trying to set CSS based on a condition inside quotes. This is causing a syntax error for me. Can anyone provide assistance in finding a solution? <div> <span ng-class='{\' rdng-error-rate&bsol ...
Seeking assistance with an angularjs issue as a newcomer to the platform. Building a photo gallery where the initial page displays thumbnail photos from twitter and instagram using ng-repeat loop. Hovering over an image fades it out, revealing a button f ...
My current issue involves utilizing an AJAX loader to conceal my page until all elements have loaded. Unfortunately, the navbar is not hidden along with the other content as shown in the image below. I need assistance in ensuring that everything, including ...
Currently utilizing Jquery to launch a new Telerik window, as shown below: var win = $('#myWindow').data('tWindow'); win.open(); With the knowledge of the mouse position (x,y), my goal is to initiate the window at that exact location. ...
I am trying to figure out how to call the Java method getMessage() from a jar file whenever a button on my webpage is clicked. Can anyone help me achieve this? File name: index.html <!doctype html> <html> <head> <meta charset="utf-8" ...
Searching for an elegant solution (without resorting to private APIs) to create a widget-style dashboard. The goal is to dynamically load components based on user role. Is there a way to import a component and its dependencies included in the component&ap ...
As I delve into creating vanilla JS web-components, I am exploring methods to keep the template HTML separate from the JS file, ideally in a distinct HTML file. I have examined various implementations of native JS web-component setups found notably here, ...
Within my HTML file, there lies a table with an empty tbody that is dynamically filled by jQuery once the document is fully loaded. The content of the table body is generated using a PHP script, where jQuery fetches the data via a simple GET request. Belo ...
Trying to enhance my responsive table by adding a gradient background, but encountering an issue where the style being applied is repeating in every cell, creating a messy look. Here's the gradient I'm using: background: linear-gradient(to right ...
I recently started diving into the world of CSS and picked up a copy of Eric Meyer's 3rd edition of CSS: The Definitive Guide. While reading through his section on font sizes (page 107), I came across an interesting concept - that the font size deter ...
My website setup includes a page titled "news.html" that contains an iframe with fixed size. The iframe is linked to "innernews.html", which is the actual content to be displayed. I structured it this way for consistent page sizing, as the iframe prevents ...
Despite the fact that iframes are considered outdated, I am attempting to create a browser within an HTML browser. I have implemented a search bar that opens the typed input in a new window which searches Google. However, I would like to modify it so that ...
Can anyone explain why there is an extra line being produced here? I came across another question where it was mentioned that this issue is not due to CSS but rather caused by HTML. Why is that? This is completely new to me, and I'm curious as to wh ...
Recently, I started learning CSS/HTML in school and we just delved into Javascript. Currently, we are working on a website project. However, while trying to integrate the content with the navbar, I encountered a strange issue. When resizing to 620px or le ...
Here's the HTML email code snippet. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co ...
As a newcomer to CSS and HTML, I'm facing an issue with my ul li dropdown menu and login boxes. The background colors are red and blue, but there are gaps within the div that I want to fill with the height of the div. Below is the code snippet: @key ...
When it comes to uploading a video, there are two options available: 1) Provide the web URL for the video, 2) Upload the actual video file. The <video> tag works smoothly with a web URL as the source, but issues may arise when trying to play an uplo ...
I'm currently facing an issue when attempting to align my footer in the center of my Django template. The specific class for the footer is Pagination. Base HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict ...
After realizing it was easier than expected, I simply consolidated all columns into one row and the responsiveness now works perfectly. Thank you to everyone who helped. I am utilizing Bootstrap 4 grid system to structure 3 rows with columns. For lg brea ...
I can't seem to get my link text centered both vertically and horizontally, it keeps aligning to the left. I was under the impression that using flex-based alignments would solve this issue. I have gone through the information on using a flex item as ...