Conceal mobile button

Welcome to my website:

Is there a way to hide the button on mobile phones? I want to create different buttons specifically for mobile devices. Below is the HTML code for the buttons.

HTML

<a href="http://site9171756.91.webydo.com/Info.html" target="page3"
class="Button1" style="position: absolute; left: 60%; top: 400px; z-index:
1000;">Become a Partner</a>

CSS:

.Button1 {
font-family: Arial;
color: #FF0000;
font-size: 20px;
background: #ffffff;
padding: 10px 20px 10px 20px;
border: solid #FF0000 2px;
text-decoration: none;
} 

.Button1:hover {
  background: #FF7A7A;
  text-decoration: none;
}

Best Regards =)

htmlcssmobilehideinformation-hiding

Answer №1

If you want to hide the button on mobile devices, you can use media queries.

@media (max-width: 480px) {
  .Button1 {
    display: none;
  }
}

For more information on media queries, you can check out this resource and this guide.

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

The width of sibling divs in IE7 does not match their sibling's width

Currently facing a challenge with resolving an IE7 problem. My goal is to ensure that my sibling div has the same width as its counterparts. The initial sibling serves as the header, whereas the subsequent siblings have specific dimensions. Any advice woul ...

csshtmlinternet-explorer-7

What's the best way to horizontally align two logos in the navigation bar?

Has anyone successfully placed 2 logos on the navbar in Materialize Framework side by side? I'm struggling to make it work and could use some help. Here is my CodePen for reference. I've experimented with the display property but haven't ...

htmlcssmaterialize

The Angular Shepherd Tour Guide is experiencing a bug where it does not scroll when the next page is clicked

I'm facing an issue where scrolling to the next element is not working properly. When I click on the next element, it moves there but does not scroll down automatically. I have tried various solutions but have been unsuccessful so far. If anyone can p ...

htmlcssangular6

Can a line be created using only CSS without the need for an additional HTML element?

There have been many inquiries regarding drawing lines without adding an additional HTML element. Consider this scenario with an HTML div element: <div class="myDiv"></div> Accompanied by the following CSS: .myDiv{ width: 100px; height: ...

htmlcss

Launch a modal from a separate webpage

I've been trying to implement a modal using Bootstrap 4, and after referring to the documentation, it seems to be working smoothly. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <scri ...

javascripthtmlbootstrap-4

How to Create a React Material UI Switch with Minimal Padding

I need a compact Switch component without any additional dimensions or spacing Check out this custom Switch component <Switch checked={isSubscriptionStatusActive} onChange={onHandleChangeSubscriptionStatus} disabled={subscriptionStat ...

cssreactjsmaterial-ui

Decrease in font size observed after implementing Bootstrap 5

The issue arises when I include the Boostrap CDN link, resulting in a change in font size. I discovered that Bootstrap has a default font size, which is why attempts to adjust it using an external style sheet with !important do not succeed. Interestingly, ...

htmlcssbootstrap-5font-sizecss-specificity

Which tool is best for comparing and minimizing duplicated CSS style sheets?

In my current project, I am working with 2 CSS files. The first one serves as a "default" style sheet that is used in all websites created from the same templates. The second file contains the specific styles for our application. Both of these files are in ...

csscomparediff

How to set up a multi-select box for tagging purposes

I tried to implement a multi select box to create tags using the code below. I downloaded select2.min.css and select2.min.js from https://github.com/select2/select2, then copied them into the project's css and js folders. Here is the HTML code snippe ...

javascripthtmlcsstwitter-bootstrap

What is the reason for index.html requesting the css or js modules as if they were directories when loading?

I am currently developing a server using expressjs: 'use strict'; var express = require('express'); var logger = require('morgan'); var path = require('path'); var bodyParser = require('body-parser'); va ...

javascripthtmlcssexpress

Incorporate Vimeo video with full-width display

When embedding a Vimeo video on my website, I use the following code: <div class="fys-fp-content-wrapper"> <div id="fys-fp-video"> </div> </div> #fys-fp-video { position: relative; padding-bottom: 56.25%; padding-top: ...

htmlcssvideovimeo

Determine the total character count in every paragraph

Looking for a way to tally up the number of characters in each paragraph on a webpage. Came across this handy snippet that counts words in paragraphs and it works like a charm. Wondering if it can be tweaked to also calculate the character count. There are ...

htmljquery

When a div slides down on page load, the div will slide up when a button is clicked

I am trying to make a div slideDown on page load. The goal is to have the div automatically slideDown after 2 seconds, which contains a responsive image and a button named "z-indexed". However, I am having trouble getting the same div to slideUp when the z ...

jqueryhtmlcssslidedownslideup

Filling a table cell with a div that spans 100% height

I am currently working with Bootstrap and I am attempting to create three columns filled with text overlaying a rectangle. The squares within the columns should have equal height and there needs to be spacing between them. Through the use of display:table ...

htmlcsstwitter-bootstrap

Button group malfunctions on smaller screens

After integrating a button group into my new website, I noticed that the first two buttons stop functioning properly on smaller screens. Surprisingly, if I remove the text-center div, all buttons cease to work entirely. Despite attempting various solution ...

htmlcssbuttontwitter-bootstrap-3

Acquiring the index of a selector event within a list of dynamic elements

I am seeking guidance on how to go about solving the issue of obtaining an event index. I have a hunch that closures might play a role in the solution and would appreciate some insights. Initially, I dynamically build an HTML5 video container using an aja ...

javascriptphpjqueryhtml

"Creating a HTML Table with Merged Cells using colspan and rowspan

Creating an HTML table with a unique layout is my latest project. I envision it to look like this: +-------+---+ | | | +-------+ + | | | +-----+-----+ | | | +-----+-----+ To achieve this, I'm utilizing a colgroup to split t ...

htmlcsshtml-table

The <main> element is not inheriting the height of its parent

Using Chrome DevTools, I removed unnecessary elements from the DOM. The body is set to relative and takes up all available space in the document, which is exactly what I want. My toolbar is also set to relative and adjusts to the height I desire: The is ...

htmlcss

Retrieving input data from FormSubmit command

I have implemented Formsubmit to manage forms on my websites, but I do not want users to be redirected to another page when submitting the form. My website is hosted on Netlify and when I tested the forms, I did not receive the information in my email. I a ...

htmlformspostform-submitcontact-form

CSS hover image resizing not functioning as expected

Is there a way to dynamically scale up an image when hovered over? I'm trying to achieve an effect where the image increases from 100x75 pixels to 300x225 pixels. Everything seems to be working fine with the layout, but the width doesn't seem to ...

htmlcss