Issue with the placement of the bottom background when viewed in responsive mode

I'm encountering an issue with the placement of a bottom white image when I switch to responsive mode. It seems to not align at the bottom of the parent ul element as expected.

If possible, could you provide assistance in addressing this issue? The image has a position:absolute setting with 0 (highlighted by a red rectangle in the attached screenshot) from the bottom of its parent element, so it should theoretically be working properly.

You can view and inspect the elements on the page by following this link: Slider

javascriptjqueryhtmlcssslideshow

Answer №1

The issue lies in the fixed height of the background pseudo element:

To solve this problem, you can try setting the height dynamically using the calc function in CSS3 and adjusting the background-size to 100%:

.slideshow:after {
    content: "";
    background: url(../img/bottom.png);
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(31%);
    z-index: 999999;
}

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

Error: Attempting to assign a value to the 'firstData' property of an object that is undefined

I am encountering two identical errors in my service. Below are the details of my service and controller: Service code snippet: getData: function (dataRecievedCallback, schemeid, userid) { //Average JSON api averageData = functi ...

javascripthtmlangularjsexpression

AJAX function in Chrome console is throwing an error message stating "Unexpected Token }"

Dealing with this issue has been quite unusual for me. I've spent the last 3 days trying to troubleshoot it, but now it's no longer bothering me. The situation involves a button and a textbox that sends the data from the textbox to a PHP page whe ...

javascriptphpjqueryajax

The text box is intersecting with the photo

Struggling to craft a clean layout with an upvote button, I encountered an issue where the textarea appears to overlap with the image. Below is my sample code snippet: .my-component-row { display: flex; justify-content: center; align-items: center ...

htmlcssbootstrap-5

Javascript doesn't seem to be executing properly after being echoed from PHP

I'm facing an issue where I am attempting to display some PHP code after a button click event in JavaScript, but the code is not executing and no errors are visible. <script type="text/javascript src="https://code.jquery.com/jquery- 3.4.1.min.js ...

javascriptphpjquery

Converting an Integer to a String and then manipulating the String format

<p class="card"> Credit Limit: <b style="color: #00e500 ;"> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcf89c91b3b8b9b0f29faeb9b8b5a890b5b1b5a8f288b38fa8aeb5b2bb">[email protected]</a>().ToLocaleSt ...

c#htmlstringvisual-studioint

ReactiveJS - Adding elements to an array and encountering the error of undefined

In two separate JavaScript files, I have 2 arrays declared as shown below: Index.JS: const [product, setProduct] = useState([]); const [item] = useState([ { name: 'Blue Dress', Image: '/static/media/Dress.1c414114.png', Pr ...

javascriptreactjs

Most effective method for automatically scrolling down upon page load

Below is the code snippet that I am using: <script type="text/javascript"> window.onload = function () { window.scrollBy(0, 100); } </script> The purpose of this code is to scroll down after the page has fi ...

javascriptphpjqueryasp.netjquery-events

Manipulating CSS styles through Javascript with passed parameters

I need a feature that allows users to pick the color of the buttons displayed on the website. Currently, I am working with Angular 6 and JavaScript to achieve this functionality. I am focusing on setting the primary color, affecting buttons with the Bootst ...

javascriptcssangularjstypescript

The description in the lower design must not be on the same line or at the same height as the element

I'm facing an issue with CSS regarding achieving the same height. I have a list of designs, each with a description at the bottom. While I've successfully aligned the designs vertically between portrait and landscape orientations, the problem ari ...

htmlcssbootstrap-4

Service Worker's fetch event is not triggered upon registering the service worker

Service Worker is a new concept to me. As I delved into learning how to incorporate Service Worker into My Next.js Application, I encountered an issue with the fetch event handler. Oddly enough, the fetch event handler doesn't trigger upon initially r ...

javascriptnext.jsfetchprogressive-web-appsservice-worker

Why is my AngularJS controller receiving 'undefined' data from my service request?

Question: I am facing an issue where my service is successfully retrieving the necessary data, but my controller is not able to access it. What could be causing this problem? Service: Below is the code that my controller calls. // search.service.js (func ...

javascriptangularjs

What's the best way to refactor the `await nextEvent(element, 'mousemove')` pattern in my code once it is no longer necessary?

Within my React component, the code includes the following: class MyComponent extends React.Component { // ... trackStats = false componentDidMount() { this.monitorActivity() } componentWillUnmount() { this.trackStat ...

javascriptreactjstypescriptmemory-leakscode-cleanup

Unable to retrieve the length of HTMLCollection

I've been having an issue with accessing all the dynamically created list elements (<li>) on my page using getElementsByTagName. The console keeps showing that the length of my li array is 0. Despite going through documentation and examples rel ...

javascript

Having difficulty accessing information on utilizing .htaccess

Below is the .htaccess code I am currently using: RewriteEngine On RewriteRule ^([a-zA-Z0-9-_]+)$ topics.php?cat=$1 RewriteRule ^([a-zA-Z0-9-_]+)/$ topics.php?cat=$1 RewriteRule ^([^/]*)/([^/]*)$ /topics.php?cat=$1&bsid=$2 RewriteRule ^([^/]*)/([^/ ...

phpjqueryajax.htaccess

What significance does the slash hold in a package name when using require for an npm package?

When we "require" non-local NodeJS modules, what does the slash in the module name signify? For instance: from the GitHub page of the ShellJS npm module (link: https://github.com/shelljs/shelljs#javascript) require('shelljs/global'); requir ...

javascriptnode.jsnpm

Utilizing AJAX in Wordpress to Dynamically Update HREF Links

My website now has AJAX functionality, and you can see a live example at www.mathewhood.com. I am interested in changing the URL format when clicked from To something like , without the /sitefiles/ for security reasons. Below is my code. If anyone is ex ...

javascriptjqueryhtmlajaxwordpress

Verify if the connection to MongoDB Atlas has been established for MongoDB

When working with MongoDB, I find myself switching between a local database during development and MongoDB Atlas in production. My goal is to implement an efficient text search method that utilizes $search when connected to MongoDB Atlas, and $text when co ...

javascriptnode.jsmongodbmongodb-atlasmongodb-atlas-search

React Alert: __WEBPACK_IMPORTED_MODULE_4_jquery___default(...) is throwing an error and modal function is not working

I've been working on a React project that utilizes Bootstrap 4, which I've imported through a CDN. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis ...

jqueryreactjsbootstrap-4

What is the process for evaluating the variable `results` in this scenario?

Can anyone provide some insight on how this code is functioning? I grasp the concept of callbacks but during a tutorial video, I encountered this code snippet: function addAndHandle(n1, n2, cb) { const result = n1 + n2; cb(result); } addAndHandle ...

javascript

Buttons that are set to float will not be positioned below an inline edit popup

In my setup, there is a table with an inline edit popup in the tbody section that is absolutely positioned. Within the table footer, there is a display of inline-block that holds buttons floated to the left and right, as shown below: <div class="table ...

htmlcsscss-float