The fullscreen button in Photoswipe is not showing up on mobile devices

After following the instructions from this link, I successfully integrated photoswipe into my website.

However, I'm facing an issue where the fullscreen button is not visible on mobile devices, even though it appears on the demo website.

Here are some websites for comparison:

(On my site: click on the bottom pictures)

If anyone has a solution to fix this issue, I would greatly appreciate your help. Despite searching extensively online, I haven't been able to find a resolution yet.

Answer №1

In the stylesheet found at line 58 of , the button elements are styled with

background-image: url(default-skin.svg)

specifically for mobile devices – however, this image is not present on your server. Visiting

http://ezg.agaastra.nl/Content/default-skin.svg
leads to a 404 error.

As a result, the background image intended for these buttons on desktop screens has been overridden, leaving no alternative image to display, hence causing them to appear as "nothing".

To resolve this issue, ensure that you upload the missing image to the correct location.

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

Unexpected outcomes when generating jQuery pages using CSS

I have created a piece of JavaScript code that populates 3 divs with icons in even rows. However, I am facing an issue where my first two rows align as expected, but the third row starts aligned with .col-5. Can you help me troubleshoot this? function row ...

Uniformly allocate space to all table cells

I am facing an issue with the CSS property display: table-cell; and the space between the cells. I want all cells to have dynamically the same width. You can view the code on JSFiddle. As you can see, the cell titled "Ausstattung & Skizze" is wider t ...

Exploring ways to adjust font and table dimensions with the use of <style type="text/css"> in rmarkdown

Could someone assist me in adjusting table cell sizes on rmakrdown? I attempted to add the following code, but it did not have any effect on the tables within the document: <style type="text/css"> } td { /* Table */ font-size: 12px; border-c ...

Can I use Ems instead of pixels for Chrome developer tools?

In all my style-sheets, I opt for using ems instead of px. However, in Chrome Developer Tools, the computed styles/metrics always display in px, even for elements where I specifically used ems: (Here is a screenshot of the computed lengths for a button wi ...

How to use AJAX to retrieve data from a JSON file hosted on an external URL?

Is it possible to extract data from a JSON file that belongs to an external source such as ABS, a company that provides weather information? The weather data is stored in a JSON File. Why am I unable to access this information and save it? & ...

Leveraging javascript to invoke a controller function within the MVC framework

My objective is to make a table row act as a link to redirect users to another view on my MVC website. Instead of using the conventional "Details" link generated by the table list, I want the entire row to serve as the link to the "Details" view. In order ...

The Bootstrap slide function encounters issues within the AJAX success callback

Here's the code snippet with a 'slide' event inside an AJAX success call. success: function(data) { $('#my_container').html(data); // Successfully loading #mycarousel into #my_container $('#mycarousel').bind( ...

Uncertainty arises from the information transmitted from the controller to the Ajax function

In one of my coffee scripts, I have an AJAX call that calls a method in a controller. The AJAX call is structured like this: auto = -> $.ajax url : '<method_name>' type : 'POST' data : <variable_name> ...

How can I eliminate or override the CSS property from a content delivery network (CDN)?

Currently, I am utilizing swiper.js through a CDN. However, there seems to be an issue in the swiper-bundle.min.css CDN file where the .swiper-button-next and .swiper-button-prev classes are set to top:50%; like so: .swiper-button-next, .swiper-button-prev ...

Having trouble loading a listbox with JSON data using jQuery

I need help populating a ListBox using jQuery/Json. The code snippet below shows my current approach: jQuery within document.ready: $('#<%=txtSearch.ClientID %>').keyup(function() { if ($('#<%=txtSearch.ClientID %>&apos ...

Exploring methods to retrieve specific data from a JSON object by utilizing the $.each() function

I've been attempting to access specific values from a JSON file using the key lat as I iterate through each entry. Unfortunately, I keep receiving an undefined result when attempting to print them. JSON Data [{"pid":4317129482,"lat":"51.5078","lon": ...

How come my Ajax call is setting the 'Content-Type' to 'application/x-www-form-urlencoded' instead of 'JSON' as specified in the dataType parameter?

I have encountered an issue while responding to a button click using the code snippet below. The console.log() confirms that the function is being called, but the HTTP request it generates contains the header "Content-Type: application/x-www-form-urlencode ...

The 'else' statement does not seem to function properly with the 'src' attribute

I have been attempting to include alt text in a web page using jQuery with the code below. However, I am only able to get the correct value for the first image. The else if and else conditions do not seem to be working properly as I am unable to add alt ...

Positioning lines on either side of h1 headings

I have attempted to adjust the positioning of the lines next to the h1 elements on either side and make them scale accordingly when resizing the window. I envision it looking like this: ----This that this Here we go----- I have provided the fiddle li ...

How can we transfer data to a PHP variable after a successful Ajax call?

I have a script that looks like this: function fetchValue(sel) { var id = sel.value; $.ajax({ type:"POST", url:"./tab.php", data:{id:id,task:'search&a ...

Tips for inserting an icon alongside a list item in HTML

https://i.sstatic.net/sTWRu.png Can you help me with adding an icon to a list item using Font Awesome or any other method? I want the icon to appear on the right side of the text. I have four sections of text that I want to convert into expandable dropdow ...

Is it possible to display a React Component code within a <code> tag?

I am in the process of creating a tester page that allows users to interact with a library component and document how it is being used. Here is the library component: render = () => { let component = ( <Slider onSlid ...

Error: The XML parsing in ASP failed to find a root element at the specified location

When clicking the button, I have jQuery/Ajax code that is supposed to pass the value of a selected radio button to a controller action and open a detail page. However, I am encountering an error. When using Mozilla Firefox, the console displays: XML Par ...

Assistance with organizing date schedules using Javascript

I'm currently assisting a friend with his small project, and we've run into an interesting situation. Imagine a scenario where a doctor informs their patient that starting today, they have X number of consultations scheduled for every Wednesday a ...

React Tabulator - custom header filter for select column - hide 'X' option

Is it possible to remove the 'x' option on header filters in react tabulator columns? The issue arises when users click the 'X' to clear a filter, as expected. However, if they then try to click on the same filter for another list item ...