The slider image on my Bootstrap website is not properly displaying on mobile devices

Check out my bootstrap website which features a slider: here

Although the slider image is displaying correctly on desktops, it's not fitting properly on mobile devices. I've tried adjusting the CSS with the following code:

@media only screen and (max-width: 600px)
.n2-ss-slider [data-mode=fill] .n2-ss-slide-background-image {
    background-size: 400px !important;
}

The CSS was effective previously, but now it seems to have stopped working. Any suggestions on how to make sure the slider image fits perfectly on mobile screens would be greatly appreciated. Thank you in advance.

htmljquerycssimagebootstrap-4

Answer №1

After analyzing the code, it seems that the following CSS is responsible for ensuring that the images cover the entire panel, adjusting the image height to match the panel's height and extending the left and right edges off-screen.

.n2-ss-slider .n2-ss-slide-background-image img {
    object-fit: cover;
}

To override this behavior, you can use the following CSS:

.n2-ss-slider .n2-ss-slide-background-image img {
    object-fit: fill;
}

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

Retrieving text from a draggable div using jQuery

I have a draggable div that I can move over another element with the class .outerDiv which contains text content. Is there a way for me to retrieve the text from .outerDiv that overlaps with the draggable div? $(".outerDiv .isStore").draggable({ contain ...

javascriptjqueryhtmlcss

Learn how to pass data from the client to the server with MVC Ajax techniques

As a beginner in Ajax, I need guidance on how to bind values from .cshtml to .cs files. I am working with Mvc and using Jquery Ajax. <script> $(document).ready(function () { $('#BtnSubmit').click(function () { ...

jqueryajaxasp.net-mvc

Change the div element to a different div element as the window size is adjusted

Here is the HTML snippet I am dealing with: <div id="div_top"></div> <div id="div_bottom"></div> When viewing the website on a mobile device or resizing the window, I need div_bottom to appear before div_top. To achieve this, I h ...

jquerycsshtml

JQuery: The $.ajax function is not defined

Having trouble making an AJAX call in Symfony 5? Getting the error message "$.ajax is not a function"? You're not alone. Even after installing jQuery using composer require components/jquery, things might not work as expected. One common solution is t ...

jqueryajaxsymfony

Upon shutting down the Alert Window, the submit button remains unresponsive

I am facing an issue where, upon detecting an identical value during submission and triggering an error, the button becomes unclickable and feels like it is stuck on saving. Can anyone provide assistance with this situation? Here is the jQuery code I am u ...

javascriptjquerybuttonclicksave

Reduced resolution decreases image size significantly (bootstrap-5 Fluid)

What's Currently Happening: While using the Chrome browser's device toolbar tool to test my site at various resolutions, I observed that when I shrink the device screen to "Mobile-s" 320px, the content on my page becomes nearly unreadable. Additi ...

htmlcssbootstrap-4bootstrap-5

How can I prevent an HTML element from losing focus?

Currently, I am developing an online editor that requires accurate character inputs. To achieve this, I have implemented the jQuery.onKeyPress event on a textarea element. This approach was chosen because obtaining character inputs from the body directly p ...

javascriptjqueryhtmltextarea

ways to instantly showcase the input's value within a DIV element

For example, I have a div with the ID of "someDiv" and an input text field with the ID of "someInput". How can I make it so that the value entered into the input field displays in the DIV in real time? For instance, if I type the letter "a" in the input fi ...

javascriptjqueryinputaddeventlistener

node js returning undefined value

I'm currently working on configuring my node.js to retrieve and display the value submitted through an HTML form. Here's a snippet of the node.js file: const app = express(); var path = require('path'); var fs = require('fs' ...

htmlnode.jsamazon-ec2

Building a responsive CardMedia component with React Material UI

I am currently working on creating a gallery using React Material UI (utilizing Card, ...). I am facing some challenges in making the gallery responsive, especially with varying cover sizes: https://i.stack.imgur.com/2n6vf.png Here is the code snippet I ...

cssreactjsflexboxresponsive-designmaterial-ui

When the condition is false, Angular 8's ngIf creates an empty element

Encountering an issue with Angular8 and ngIf: I have a piece of code that generates a div element loading images and their associated details onto a webpage from a JSON file based on a condition: HTML Code: <div class="row" > < ...

htmlangularangular-ng-if

Issue with the alignment of cards in the group of cards

Struggling to align the bottom sections of these elements. Despite consulting Bootstrap references, I can't figure out what's causing this misalignment. I thought using the card-group class would align the bottoms of its children, but it doesn&a ...

angularbootstrap-4

Description for script tag in HTML body

How can I embed a GitHub gist on my website using the script tag? I currently use the following code: <script src="https://gist.github.com/uname/id.js"></script> I've been wondering if there is a way to add alt text in case the gist fail ...

javascripthtml

Performing mathematical operations in JavaScript, rounding to the nearest .05 increment with precision up to two

Apologies in advance. After reviewing multiple posts, it seems like the solution involves using the toFixed() method, but I'm struggling to implement it. $('.addsurcharge').click(function() { $('span.depositamount&ap ...

javascriptjquerymathdecimalrounding

The controller is unable to accept JSON data from the JQuery.ajax function

I have thoroughly checked my web.xml and spring-servlet.xml files, but I couldn't find any issues. I then reviewed my Controller and .ajax() call, but still couldn't identify the problem. I experimented with using JSON.stringify, @RequestParam, a ...

jqueryjsonspring

What are the advantages of incorporating JSON for retrieving data from MySQL?

So I have developed a website that retrieves data from a MySQL database using PHP, and then transforms it into JSON format for use with JavaScript. This process can be broken down into 5 steps: Query -> PDO Statement -> PHP Array -> JSON Strin ...

phphtmlmysqljsonajax

Removing special characters in ASP

Can someone please advise me on how to remove special characters in ASP (classic)? I am using an MS Access database. Is there a function similar to stripslashes() or addslashes() in PHP that can help with this? Any assistance would be greatly appreciated ...

htmlms-accessencodingasp-classic

`Problem with the layout of the form on the website`

Experiencing some challenges with the container design for a job sheet project. As a beginner, I have been learning on the fly and following online tutorials to create functional forms. However, this particular form is not rendering correctly when viewed o ...

htmlcssflexboxalignmentcentering

Struggling to align Jssor slider perfectly within a Bootstrap container

Struggling to center my slider images while using bootstrap with jssor. Despite trying to zero out the margins in the code below, the images within the slider remain aligned to the left side of the container. Any suggestions on how I can properly center ...

jqueryhtmlcsstwitter-bootstrapjssor

Can anyone point out where the mistake lies in my if statement code?

I've encountered an issue where I send a request to a page and upon receiving the response, which is a string, something goes wrong. Here is the code for the request : jQuery.ajax({ url:'../admin/parsers/check_address.php', meth ...

javascriptjqueryajaxrequestresponse