Design elements - Responsive vertical images

I am facing an issue with resizing the slider I have on my website. Currently, it is set at 1200 x 400 pixels, and while the width adjusts correctly when the page is resized, the height remains fixed at 400px. I would like the height to resize proportionally to the width of the image when viewed on smaller devices.

How can I achieve this?

When viewed on a phone, the slider appears as follows:

https://i.sstatic.net/xl33m.png

The current CSS for the image is:

max-width: 100%;
height: auto;

Here are some solutions I've attempted:

  • Setting the height to 33.3% (with html, body, and #container set to width: 100%)

  • Trying various settings with vh and vm, but they did not produce the desired effect

Additionally:

I am utilizing Bootstrap 4, so if there is a specific Bootstrap class that can help solve this issue, that would be ideal.

You can also view a live version of the site at

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Successfully completed the task by adjusting the display of these elements to block.

carousel-item-next, .carousel-item-prev, .carousel-item.active {
  //display: -webkit-box;
  //display: -webkit-flex;
  //display: -ms-flexbox;
  //display: flex; 

  display: block;

}

One thing to consider is that a small slider may appear on smaller screens. To address this, it is suggested to set the images as background-image, and then adjust the background-size to cover. This method ensures that the image is scaled proportionally from the center (or any desired position). Additionally, using media queries for the slider's height provides greater customization options for the slider.

Answer №2

To address this issue promptly, you can customize your bootstrap settings and adjust the height based on the size of your screen.

@media screen and (min-width: 480px) {
#yourContainer {
    height: 200px; //or 50%;
}    

@media screen and (min-width: 1024px) {
#yourContainer {
    height: 400px; //or 100%;
}

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 align-items property in Flexbox is not functioning as expected when applied to Link components contained within

I'm in the process of creating a simple navigation bar using flexbox, but I'm encountering an issue where the content within the unordered list is not vertically centered. Below is the HTML code snippet: *,*::before,*::after{ margin: 0; ...

htmlcssreactjsflexboxnext.js

Solving issues with flexboxes in Safari 5.1.7 on Windows

I am currently utilizing flex boxes for managing the layouts of my website. However, it seems that the Safari version for Windows (5.1.7) is outdated and causing all flex boxes to be dysfunctional. On MacOS systems, the same version 12.x works correctly. ...

htmlcsssafariflexbox

What is the best method for choosing all elements located between two specific elements?

If I have the following HTML code, what CSS selector can I use to target all elements between #one and #two without using jQuery? <p id="one"></p> <p></p> <p></p> <p></p> <p></p> <p></ ...

csscss-selectors

bespoke design picture holder

Is it possible to create a custom-shaped image container without using <div />? I encounter an issue when trying to add corners on top of the #content-box as shown in this screenshot: . The corner images only cover half of the block element, with th ...

csshtml

Displaying PDF Preview when Button is Clicked using Angular

Is there a way to preview a PDF using Base64 data? Here's the HTML code: And here's the TypeScript code: let file = new Blob([byte64String],{type:'application/pdf'}); this.pdfSourceUrl = URL.createObjectURL(file); When I try to prev ...

htmlangularbase64

Persistent hover effect for collapsible accordion panels when closing them

My simple accordion features a functionality where a class of .open is added to the title + content group when you open a panel for styling purposes. Everything works smoothly, but I've noticed on my phone that after clicking to close a panel, the hov ...

javascriptjqueryhtmlcsstouch

Tips for utilizing both noConflict and $ on one page

Can I use both noConflict and $ on the same page? <p>This is a paragraph.</p> <h1>hello</h1> <input type="button" id="=mybtn2" value="jq" onclick="myfun2();" /> <input type="button" id="mybtn" value="$" onclick="myfun(); ...

jqueryhtml

Is it possible to alter the name of a slot before displaying the element in the shadowDOM, depending on the slot utilized in the DOM?

In my project, I am working on implementing different features for both desktop and mobile devices. Some of these features can be replaced by slots. My goal is to have a slot that can be either replaced by a desktop slot called poster-foreground, or a mobi ...

javascripthtmltypescriptlit

Strange issue with Firefox when utilizing disabled attribute as "disabled"

I found a curious bug in Firefox: Check out (unfortunately not reproducible in jsfiddle) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> < ...

javascriptjqueryhtmlfirefox

"Drag and drop elements that automatically snap to a grid and move with

I'm trying to create a small, square div that follows the mouse cursor, but I want it to snap to a 3x3 pixel grid. Here is what I have so far: $(document).mousemove(function(e) { window.x = e.pageX; window.y = e.pageY; if(window.x % 9 === 0 ){ ...

javascriptjquerycss

Hide and reveal images on hover by using multiple images or links on a single webpage

Despite my efforts, I haven't been able to find exactly what I'm looking for. My current setup involves an image/content slider powered by Awkward Showcase. Within each slide, I want to incorporate a mouse-in/mouse-out effect that switches and hi ...

javascriptjquerycssslider

Is there a way to incorporate CSS into a JPG file on the server end?

I have some JPGs that need to undergo CSS operations on the server side, such as cropping and rounding corners. Once processed, I want to serve these edited JPGs to clients. The clients themselves are unable to interpret CSS, they can only display JPGs. I ...

cssimage-processingserver-side

I'm looking for a button that, when clicked, will first verify the password. If the password is "abcd," it will display another submit button. If not, it

<form action="#" method="post" target="_blank"> <div id = "another sub"> </br> <input type = "password" size = "25px" id="pswd"> </br> </div> <button><a href="tabl ...

javascripthtml

Can you explain the purpose of :not(style) ~ :not(style) in CSS?

Upon investigating, I found that Mui automatically included a :not(style) ~ :not(style) selector which required the use of !important in my sx to override. .css-1rb8ayf-MuiStack-root > :not(style) ~ :not(style) { margin-top: 40px; } .css-d13d9m-MuiSta ...

cssmaterial-ui

Adjusting the visibility and z-index of HTML5 video controls

Hello, I am facing an issue with a Bootstrap carousel that contains a video. The main problem is that the video controls cannot be clicked due to the carousel indicators overlaying them. I have tried adding margin and padding to the indicators, which worke ...

htmlcssbootstrap-4

Selecting a language by clicking on it

I recently designed a bootstrap navigation bar for my website and incorporated a language selection dropdown menu into it. <li class="nav-item dropdown"> <a class="nav-link dropright" href="#" id="navbarDropdown" role="button" data-toggle="dr ...

javascripthtmljsonweb

The scroll functionality does not seem to be functioning as intended on mobile devices when

Hey there, I'm currently working on making my navbar sticky and applying it when the page is scrolled. The code I have works flawlessly on desktop, but unfortunately, it doesn't seem to work on the mobile version. Any suggestions? window.addE ...

javascripthtmlcss

React Error - The function 'deleteNinja' has not been declared and is undefined

I'm encountering an issue in Ninja.js where I am trying to delete state data by the Id passed as a prop. The error message I'm receiving is: Failed to compile src\Ninjas.js Line 11:41: 'deleteNinja' is not defined no-undef I&a ...

javascripthtmlreactjs

The footer has a wandering nature, constantly moving around as the wrapper mysteriously vanishes

I understand that this question has been asked multiple times before, but I am struggling to get it right! My goal is to keep the footer at the bottom of the page, but it seems to be acting strangely. Here is my HTML: <!DOCTYPE HTML> <html& ...

htmlcssfooterwrapper

Filter dates within a range using two input fields in AngularJS

I am trying to use two input fields to display data within a specific range of dates using the AngularJS date filter. (Range filter for AngularJS dates using two input fields) Check out my code below: var app = angular.module('app',[]).control ...

javascripthtmlangularjs