Encountered a Bootstrap issue specifically on mobile devices, can only reproduce the problem on the actual live website. Currently

I've been working on my website, and the Call-to-Action buttons look fine on computers. However, on mobile devices, they appear with a gradient. I'm unable to replicate this gradient issue using dev tools.

I've tried everything I can think of to reproduce the bug but have run out of ideas.

I am new to coding, so my code might be a bit messy. Please bear with me. You can find the code on CodePen here: CodePen

Live site where you can see the bug on mobile: Bug Demo Site

@import url(//fonts.googleapis.com/css?family=Montserrat:300,400,500);
      /* CSS Styles */

Mobile Version

[Web Version 2

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

The issue seems to be more related to Safari than mobile devices, as I can see it working fine on desktop and macOS / iOS mobile browsers.

The problem lies in the use of type="button" on your hyperlink. In Bootstrap, this CSS rule is causing interference:

[type=button], [type=reset], [type=submit], button {
  -webkit-appearance: button;
}

This rule is conflicting with elements of the .btn class. If you remove type="button", your hyperlink should display 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

Sometimes, the @font-face feature decides to take a break and stops functioning out of the blue

I created the webfont kits using Font Squirrel and they are working perfectly. To address an issue with aliasing in Chrome, I reordered the fonts by moving SVG fonts to the top of the order. Usually, everything loads perfectly and looks great. However, th ...

cssfont-face

What is the process for closing the lightbox?

My code is supposed to display a lightbox as soon as the page loads, similar to a popup window. However, there seems to be an issue with closing the lightbox when clicking on the 'x' button at the corner of the box. Unfortunately, the current cod ...

javascripthtmlcsslightbox

Is there a way to hide the borders between cells within these divs?

I am working on an application screen using Vue.js and facing an issue with the divisions between cells. I want to hide these divisions so that the lines of the items appear continuous. I attempted to modify the classes of the columns to "col-md" and "col ...

javascripthtmlcssvue.jsbootstrap-4

`Addressing issues with table cell layout for improved horizontal scrolling`

I am currently facing a challenge involving fixing the first and last column (.headcol, .lastcol) in a horizontally scrolling table, ensuring they always align to the left & right of the visible panel. My understanding was that position: absolute elements ...

css

"The Bootstrap collapse feature allows you to hide and

I've been struggling for hours to make the bootstrap collapse plugin work. I apologize if this question has already been asked multiple times, but I have searched tirelessly for a suitable solution. Below is my HTML code: <html lang="en"> < ...

javascriptcsstwittertwitter-bootstrap

How can I incorporate an icon on the right side of a jQuery UI accordion?

How can I use CSS or HTML to position a jQuery UI icon on the right side of an accordion widget's headers? For example, if I have the following HTML: <!-- Accordion --> <div id="accordion"> <div> <h3><a href="# ...

javascriptjqueryhtmlcssaccordion

Troubleshooting Problem with jQuery UI Resizable: Ghosting Glitch

Recently, I encountered a strange issue with the jQuery UI Resizable event that involves the "ghost" property being set. Normally, when I set the sizing direction to south without enabling ghost, the resizing works perfectly fine. For example: <div id ...

jqueryhtmljquery-uijquery-ui-resizable

Creating a Spotify-inspired overlay scrollbar on a website using a combination of CSS and Javascript techniques

UPDATES (4th March, 2024): I have revised my question to eliminate unnecessary code and wording. It should now be clearer and more readable. I've learned that Spotify's scrollbar was created using javascript I'm looking to create a scrollb ...

javascripthtmlcsswebkit

What is the best way to implement CSS Background-size: cover; while also making room for a menu?

Recently, I came across the CSS property background-size: cover, but I encountered a problem. I want the area behind my navigation on the left to be black. However, when I leave black space in the image itself, it gets cropped off when the image resizes. ...

htmlimagecssbackground-image

What is the method for dynamically assigning navigator handles in highstock programmatically?

Can I dynamically adjust the markers in the highstock navigator? I'd like to keep the marker set as { type: "day", count: 1, text: "1d" }, but without displaying "Zoom 1d." ...

cssangularjshighcharts

What is the best way to implement CSS in a web application?

I've encountered an issue where the CSS styles are not applying when I add my web app to the home screen of an iPhone and launch the app using a shortcut icon. To illustrate, consider the following examples. First, opening the app with Safari. Below ...

ioscssiphonesafari

The jQuery navbar's active class fails to function properly when an href is added

I'm facing a puzzling situation. I created a navbar using jQuery Mobile following the instructions on their official website: jQuery Mobile Navbar Demos Everything functions smoothly until I introduce href attributes in the list elements within the u ...

jquerycssjquery-mobilenavbarhref

Toggle the visibility of items based on the user's login status

Below is the code snippet for when the user is logged out: <div class="fusion-secondary-main-menu"> <div class="fusion-row"> <?php avada_main_menu(); ?> <?php avada_mobile_menu_search( ...

javascriptphphtmlcss

The cascading style sheet used by a lightbox

I constructed a lightbox using the following HTML code: <a id="show-panel" href="#">Show Panel</a> <div id="lightbox-panel"> <h2>Lightbox Panel</h2> <p>You can add any valid content here.</p> <p align="center" ...

jqueryhtmlcsslightbox

The radio button fails to remain checked after submission without filling out the entire form, and the select tag does not display the correct values

Trying to implement code for user details submission with pre-checked radio buttons and select tag showing proper values. Currently facing issues with radio buttons not staying checked after form submission without filling all details, and the select tag ...

phphtml

Insert round sphere shapes in the corners of the cells on the Table

I am working on a GUI representation table that features cells with spheres in the corner. Additionally, the footer contains a plus symbol (font-awesome icon) in the corner. I have attempted to place the sphere so that it aligns only inside the cell. Here ...

htmlcsshtml-tablecss-shapes

"Customize the dimensions and scroll behavior of a division

I've been struggling to make a single-page site full-width, and I can't seem to get it right. My goal is to create sections that are: Full width Background image full width The height of the div should be at least the same as the image, adjust ...

htmlcss

Animation not properly synced with Bootstrap 4 Dropdown hide event

Could you please check out my codepen for clarification: http://codepen.io/anon/pen/oLZOyp Essentially, I have integrated two animations using animate.css into Bootstrap 4 show.bs.dropdown and hide.bs.dropdown events. The animations work on the first show. ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for storing color picker values in MySQL database

How can I save the value of a color picker into MySQL? I have code that changes the background color, but I want to store the selected color in my database using a PHP script. Can someone please help me with this? Thanks in advance ^^ <!DOCTYPE HTML& ...

phpmysqlhtml

Remove HTML formatting from excel cells and fill separate cells

Is there a way to condense HTML code and fill different columns in Excel? For instance, If my HTML code looks like this: <p></p>10-16-2013 22:35<br/>I love pizza! Ordering was a breeze!<p></p>10-16-2013 13:19:46<br />t ...

htmlexcelvba