Display the button exclusively on responsive mobile views

I'm looking to enhance my website by adding a call support button with a responsive design feature. The goal is to display the button exclusively in mobile view and replace it with text in other views.

Encountering challenges in toggling the visibility of the button for a responsive website.

This is what I have tried:

Contact page:

<div>
     <p class ="Call-Customer-Support">Contact customer support at 555-555-5555.   </p>
     <div class="Rectangle">
     <img class="call icon-image" src="images/call.png" />
     <a class="Call-Support" href="tel:555-555-5555">Call Support</a>
     </div>
</div>

In the style.css file:

.Call-Customer-Support {
      width: 709px;
      height: 18px;
      font-family: BentonSans-Bold;
      font-size: 16px;
      font-style: normal;
      font-stretch: normal;
      color: #ffffff;
      margin: 50px auto;
    }

    .Rectangle {
      width: 292px;
      height: 57px;
      border-radius: 8px;
      background-color: #0e74af;
      margin: 50px auto;
    }

    .call {
      width: 24px;
      height: 24px;
      object-fit: contain;
      margin-left:72px; 
      margin-top:16px;
      vertical-align:middle; 
      float: left;
    }

    .Call-Support {
      width: 116px;
      height: 23px;
      font-family: BentonSans-Regular;
      font-size: 20px;
      font-style: normal;
      font-stretch: normal;
      color: #ffffff;
      margin-left: 8px;
      vertical-align:middle; 
      text-decoration: none;
      float:left;
      display:block;
      margin-top:17px;
    }

Responsive styling in responsive.css:

@media only screen and (max-width: 767px) {

        .Rectangle {
          ...styles...
        }

        .call {
          ...styles...
        }

        .Call-Support {
          ...styles...
        }
}

@media only screen and (max-width: 479px) {

        .Rectangle {
          ...styles...
        }

        .call {
          ...styles...
        }

        .Call-Support {
          ...styles...
        }
}

Default properties for other sizes:

  .Rectangle {visibility:hidden}
  .call {visibility:hidden}
  .Call-Support{visibility:hidden}

Despite setting these styles, experiencing issues with the visibility of the items...

htmlcssresponsive

Answer №1

Below is the basic implementation to help you achieve your goal:

.call-support {
  display: inline-block;
  padding: 5px 10px;
  background: #aaa;
  color: white;
  font-family: Arial;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 5px;
}
.support {
  text-align: center;
}
.show-large {
  display: none;
}
@media only screen and (min-width: 767px) {
  .show-large {
    display: block;
  }
  .show-mobile {
    display: none;
  }
}
<div class='support'>
  <a class="call-support show-mobile" href="tel:555-555-5555">Call Support</a>
  <span class='show-large'>Call customer support at 555-555-5555.</span>
</div>

Answer №2

Concealing an element goes beyond just adjusting its visibility. To truly hide it, you must use display:none;.

In this particular scenario, altering the display property within the responsive file to block for the button and display:none for the text is necessary. Conversely, in the main css file, the opposite will be required.

Furthermore, eliminating redundant code across files, which are both likely incorporated into the site, such as width, height, etc., can streamline the process.

Thus, the optimized code snippet for the responsive file can be summarized as follows:

@media only screen and (max-width: 767px) {
   .Rectangle {
      display:block;
   }
   .Call-Customer-Support {
      display:none;
   }
}

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 input range in ChromeVox is behaving incorrectly by skipping to the maximum value instead of following the correct step value

Attempting to get an input type="range" element to function correctly with ChromeVox has presented me with a challenge. Here's what I'm facing: When I press the right arrow key to move forward, it instantly jumps to the maximum value of 100 in ...

htmlaccessibilityvoice-recognition

Enhance your CSS link in Yii framework 2.0 by incorporating media printing capabilities

While working on Yii framework 2.0, I typically include a CSS file by adding the following code snippet to assets/AppAsset.php: public $css = [ 'css/style.css', ]; Upon inspecting the element in the web browser, I notice the following code ...

cssattributesmediayii2

Having trouble displaying several thumbnails side by side

I am looking to display thumbnails in a row, but they are currently showing up in a single column. I have tried correcting the row class in the HTML template provided, but it is not displaying as desired. Here is how it looks like now {% extends "ba ...

cssdjangodjango-templates

putting a division element above a image carousel

Is there a way to overlay a div tag on top of a slideshow, similar to the one shown in this link? In the example provided, a div with the title "DISCOVER THE JOY OF COOKING" is positioned over a slideshow. Any tips on how I can achieve this effect? ...

htmlcss

Extracting CSS from a cell in a Datatable and applying it to other cells within the table

I am currently utilizing the datatables plugin in my project. One of the columns in my table is named "CSS" and it contains CSS code for styling the columns in that row. For example, the table structure in the database looks like this: Name Priority ...

jquerycssdatatable

How to Make a Div Element Expand to Fill Unknown Space?

I have a box with the word "Test" inside it. I need to adjust its width to be 100% of its containing div, but I'm unsure about how to do this without using Javascript. The example in the jsFiddle linked below demonstrates what I am trying to achieve. ...

htmlcss

Modify the text and purpose of the button

I have a button that I would like to customize. Here is the HTML code for the button: <button class="uk-button uk-position-bottom" onclick="search.start()">Start search</button> The corresponding JavaScript code is as follows: var search = n ...

javascriptjqueryhtml

Tips for avoiding deleting content within a span element when using contenteditable

I am working on an HTML 5 editor that utilizes the contenteditable tag. Inside this tag, I have a span. The issue arises when all text is removed as the span also gets removed. I want to prevent the removal of the span, how can I achieve this? Here is a s ...

javascriptjqueryhtmlcss

Having trouble understanding the differences between Bootstrap 4's .list-inline class and .list-inline-item class?

I am currently utilizing Bootstrap 4 within Wordpress. Strangely, I am facing an issue where I am unable to have list items appear inline (horizontally) solely by using the class .list-inline on the list itself, as shown below: <ul id="dances" class="l ...

htmlcsswordpressbootstrap-4

CSS-Enabled Panels held in place with Draggable Feature

Currently immersed in my first ASP.net/HTML/CSS Application, I am exploring the realm of draggable panels using the Ajax-Control-Toolkit. So far, it's been a successful endeavor as I have managed to implement a single panel into my application! As de ...

htmlcssasp.netajaxcontroltoolkit

The navigation bar is missing from the screen

Where is the navbar in this snippet? Did I overlook something important? If so, what? <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="navbar nav ...

csstwitter-bootstrap

`Generating an ever-changing masonry layout on a website using live data`

I'm currently working on a new web project and I want to incorporate a masonry view for the images on the homepage. The plan is to host this project on Azure, using blob storage for all the images. My idea is to organize the images for the masonry vi ...

javascripthtmlcss

Positioning HTML elements using CSS and avoiding the use of tables

I'm struggling with my clear CSS declarations. This is how I'd like it to appear: View the Fiddle demo HTML: <div id="timesheeteditor"> <div id="weekselector"> <div>Week 1</div> <div>Week 2</div> ...

htmlcss

Is the GET method failing to record your request?

On one of my pages, I have the following code: <form method="get" action="client_specific_task.php"> <input type="hidden" value="x" /> <input type="submit" value="Add Client-Specific Task"> </form> The client_specific_task.php fil ...

phphtmlformsget

Restrict Scrolling on Login Page

I am experiencing an issue where my login screen does not scroll on PC, but when accessed on mobile, it starts to scroll. I have tried implementing various solutions recommended in other threads on this platform, but unfortunately, nothing seems to be work ...

htmlscrollscrollbar

Decrease the amount of empty space when adjusting the window size

Struggling to make a section of my website responsive and encountering an issue that's proving difficult to solve. The current setup involves 3 rectangular inline-block divs per "row" with a margin-right of 100px in a wrapper, all dynamically added. ...

htmlcss

The console is not displaying the data from the useForm

I am working on a project to create a Gmail clone. I have implemented the useForm library for data validation. However, when I input data into the form and try to print it to the console, nothing is being displayed. const onSubmit = (data) => { ...

javascripthtmlcssreactjsredux

Adjust the height of the `<input type="file">` element to match the containing div by utilizing Bootstrap 4.5 styling

Can I update the .html file to give the "Choose File" and "Upload" options the same height as the "Upload" button in the second div, which has the py-4 tag? <div class="input-group"> <div class="custom-file py-4"> < ...

htmlinputbootstrap-4height

Troubleshoot: Issues arising when loading DataTables using AJAX with MYSQL

For some reason, I'm receiving an invalid JSON response from this code. The objective is to showcase SQL data in a table with search and sort functionalities using https://datatables.net/. Can you pinpoint where the issue might lie? GET.PHP $mysqli ...

javascripthtmlmysqlajaxdatatables

Singling out a particular navigation tab

When attempting to link specific table IDs so that the corresponding tab is active when opened (i.e. www.gohome.com/html#profile), I am facing an issue where the active tab remains unchanged. Even after specifically calling out tab IDs, there seems to be n ...

javascriptphphtmlcss