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 a beginner with jQuery and I could use some assistance. My goal is to have the text move upwards and a static box slowly disappear as you scroll down the website. Something similar to what you see here: p, body { margin: 0; padding: 0; } b ...
When viewed in Chrome, the design appears clean and compact, but when seen in Internet Explorer, it looks large and overwhelming. Check out the screenshots below.. Do you have any suggestions to fix this issue? Know of any mp3 hosting platforms with an emb ...
I have a requirement to use a single image on two different Bootstrap navbars. However, the issue is that the image appears split between the two navbars.https://i.stack.imgur.com/jUnIL.png My goal is to display the full image without it being divided bet ...
I'm trying to understand the meaning behind the message in the Chrome profiler that says "Layer was separately composited because it could not be squashed." Recently, while modifying my HTML, I added a fixed position div inside a relative div and app ...
I came across an interesting concept about designing a website that utilizes AJAX to load each page section without compromising SEO. It involved incorporating !# in the URL, similar to the approach adopted by Twitter. However, I've been unable to loc ...
I have been working on a menu list where some menus contain URLs and others do not. When a menu item includes a URL, the href attribute is displayed, otherwise just the span tag is shown. I tried checking it like this but ended up with href="#" when the me ...
When the screen is minimized, the toggle button appears. However, clicking it does not reveal the contents of the navbar on a small screen. I have tried loading jQuery before the bootstrap JS file as suggested by many, but it still doesn't work. Can s ...
Starting off my PHP page, there is a form with a save button. Beneath that, I display a list of items fetched from the database. Now, I want users to be able to select the items they desire by ticking them off. The issue I'm facing is that all the inf ...
If you have the HTML snippet below: ... <fieldset> <div>above or below</div> <div>content</div> </fieldset> ... Is there a way to use CSS to position the <div>above or below</div> above or below the < ...
Seeking a more concise and potentially more streamlined approach using jQuery. I have an object called lbl which represents a div. Inside this div, there is a span tag that contains the properties firstName and lastName of the lbl object. Here's how t ...
Every time I attempt to run node commands or create a new Angular project, I encounter the following error. Node version 20.11.0 NPM version 10.2.4 ...
My goal is to have unique behavior for each instance of the calendar that I include multiple times in my main HTML view. Specifically, I want to display 3 different dates based on the day selected in each calendar. In my main HTML view, I have included th ...
I'm looking to have the post_to_delete function in python delete data without displaying the "formNewPost" div. Instead, I want the 'tablePosts' div to be refreshed. These view functions are in Flask. Thank you. How can I prevent the page fr ...
I am looking for a way to ensure that there are no line breaks between two forms that I have on my website. Here is the code snippet: <form action="..."> <input type="submit" /> </form> LINE BREAK HERE <form action="..."> <inpu ...
I need help re-arranging my input boxes on a web page. Currently, they are stacked on top of each other vertically and I would like them to be displayed horizontally with two boxes per row. Here is an example of how I'd like them to look: https://i.ss ...
I am currently working on designing a page that requires multiple columns to be displayed. The columns should float left and never appear stacked on top of each other. Ideally, I would like the columns to extend beyond the screen without a scrollbar, makin ...
Everything appears correctly when looking at the website in Firefox and Chrome. However, Safari is displaying the mobile version of the site instead. I did not make any CSS changes specifically for desktop screens while working on the responsive design for ...
While using material-ui v4, I encountered an issue where my collapsible row columns are not aligning properly with my regular columns. Below is a photo and the code snippet for reference. As you can see in the image, when I expand the Frozen Yogurt row, th ...
Trying to achieve a functionality where clicking on a list item with a radio button input selects it, but clicking again deselects it. The issue is despite various attempts, nothing seems to work properly. function setupToptions() { if ($('ul.top ...
When attempting to create a form, I encountered an unexpected behavior. <form> <input type="text" autocomplete="username" style="display:none;"> <label for="password">password:</label><input type="password" autocomplete="c ...