Carousel Image Alignment Issue on iPhone SE Portrait Mode: All Images Centered Except One

Check out this website:

It functions perfectly on Desktop browsers at all scales and works on Mobile devices in Landscape mode.

However, I noticed that when using Portrait mode on my iPhone SE, the first image in the carousel appears off center in Chrome.

Here's a screenshot for reference:

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

I attempted to fix this by adding text-align:center style specifically to that image's div within the carousel, but it had no effect.

Update: Despite trying the solution provided in an earlier response, which involved adding the following code to my CSS: .carousel-inner > .item > img { margin: 0 auto; }

the issue remains unresolved.

Any suggestions or ideas?

jqueryhtmlcssiphonetwitter-bootstrap

Answer №1

Currently, you are utilizing this particular style

.unity-logo > img {
    width: auto;
    height: 386px;
    max-height: 386px;
    margin: 0 auto;
}

You can easily override the above style in media queries like so:

@media only screen and (max-width:479px){
   .unity-logo > img {
      width:100%;
      height:auto;
    }
}

This adjustment should do the trick...

https://i.sstatic.net/6nG7t.png

Answer №2

Here's the solution for you:

@media(max-width:480px){
  .unity-logo > img{
     max-width: 100%;
     height: auto;
    }
}

I hope this information is useful to you :)

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

Modifying Checkbox BorderWidth in Material UI v5

Seeking assistance with adjusting the checkbox border width in Material UI v5. I currently have a custom checkbox and would like to remove the border width. Despite trying numerous solutions, I have been unsuccessful so far. checkbox <Checkbox de ...

cssreactjsmaterial-uinext.jsjss

Issue with Swiper JS: The buttons on pages three and beyond are unresponsive

I'm having trouble with the functionality of the "Back" button on pages 2 and 3 of my website. Can anyone help me figure out why it's not working? My goal is to create a website that resembles a game menu, similar to Deus Ex The Fall. I'm u ...

javascripthtmlcsssliderswiper.js

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

Utilizing conditional statements for confirming purchased orders with a pop-up confirmation box

function purchaseClicked() { var orders = prompt("Are you sure you want to buy these Items?"); if (orders != null) { alert('Please try selecting your items again!') } else { alert('Thank you for shopping ...

javascripthtml

Display all elements on a webpage using Javascript without the need for scrolling

I'm looking for a way to ensure all items on a webpage load immediately, without having to scroll down multiple times before running a script to find a specific item. Is there a method to have all items load at once without the need to manually scroll ...

javascripthtmlcss

I am facing an issue where the text I included is not appearing on the website that

While developing a React version of my online portfolio, I encountered an issue. Once deployed on GitHub pages, the text on my landing and contact pages disappeared. Despite removing the background image thinking it might be hiding the text, the issue pers ...

javascriptcssreactjsmaterial-uigithub-pages

Partial View failing to update completely following Ajax request

I am experiencing an issue with my partial view not fully refreshing after an Ajax call. It seems that only the forms within the partial view are being refreshed, while other parts remain unaffected. I have checked to see what is being captured and it appe ...

c#jqueryajaxasp.net-mvc

Utilizing Angular JS to Manage Controller Events

I am currently working on an application that requires saving a large amount of data in cascade, similar to a typical master-detail view. Within this view, there is a "Save All" Button which saves each row in an iteration. This process triggers jQuery cus ...

javascriptjqueryangularjsjquery-events

Activate just the show more / show less button on the website that has several buttons with identical ids

Whenever the "show more" button is clicked, additional images are displayed in the gallery and the button text changes to "show less". However, in my ExpressionEngine (CMS) templates and entries, all "show more" buttons share the same id, causing other but ...

javascripthtmlbootstrap-4toggle

What could be causing my HTML element to vanish once the animation is complete?

I have successfully implemented an animation on 3 HTML elements for a landing page I am currently developing. The animations are working as intended, but I am facing an issue where the two lower elements (an h1 tag and a button) briefly appear on the page ...

htmlnext.jstailwind-csscss-animations

Embedding a YouTube video in a view player using HTML5

So I've got a question: can you actually open a youtube video using an HTML5 video player? I'm looking for a more mobile-friendly way to watch youtube videos, and my idea was to upload a thumbnail image and then set up an onclick function to disp ...

javascriptandroidhtmlvideoyoutube

Having trouble aligning the links to the correct heights on my website due to the interference of the menu

I recently designed a website with a fixed menu where the links scroll down the page to the corresponding content section when clicked. However, I encountered an issue where the fixed menu blocks part of the content after scrolling. I wish the content wo ...

jquerymenuanchor-scroll

What are some ways to customize the text and button location for Bootstrap 5's file input?

Bootstrap 5's input type file seems too simplistic. Check it out here https://i.stack.imgur.com/VZ0h5.png I am curious about three things: Can the "Choose file" button be moved to the right? Is it possible to change the message that says "No files ...

csstwitter-bootstrapbootstrap-4bootstrap-5

What is the best way to ensure that the child flex box matches the height of the parent flex box by 100%?

As a beginner, I'm venturing into creating an experimental site for myself. However, I am facing an issue where the .menu-container does not seem to stretch 100% the height of the .container. You can view the code on jsfiddle: https://jsfiddle.net/y1 ...

htmlcss

Ways to enhance multiple ng-repeats efficiently with css grid

Looking to create a CSS grid table with 5 columns and an undetermined number of rows. The goal is to display a pop-up element when an element in the first column is clicked, covering columns 2 through 5. This ensures that only the first column remains visi ...

htmlcssangularjsgrid-layout

Looking to personalize the appearance of an iframe using CSS styling?

I am working with an iframe that generates a form, and I would like to customize the CSS of this form. How can I go about editing the CSS? <div class="quiz-container" style="text-align: center;" data-quiz="#######" data-pr ...

javascripthtmljquerycssiframe

attempting to utilize jQuery to call a controller method, but encountering an issue where the method is failing to

In one of my pages, called "GetData.cshtml", I have a requirement to input data into some textboxes and send it to a controller method using jQuery. Here is the code snippet: //GetData.cshtml $(document).ready(function () { $('#btn_sbmt_recommenda ...

javascriptjqueryasp.netasp.net-mvcasp.net-mvc-4

Obtain the content enclosed within parentheses using JavaScript

const str = "(c) (d)"; I need to separate the given string into an array The result should be [0] => 'c' [1] => 'd' ...

javascriptjquerysplit

Utilizing AJAX for showcasing the data from an XML document

Our professor gave a brief explanation of AJAX, expecting us to showcase the data from an XML file in a scrollable text area on our website. Unfortunately, I am facing issues with loading the XML file into the designated div area. Any assistance or suggest ...

javascripthtmlajax

What is the best way to handle a large number of nested AJAX GET requests?

My task involves making numerous AJAX GET requests, which must be nested because each request depends on variables from the response of the previous one. Although I was able to make multiple requests with the example below, it becomes impractical when dea ...

javascriptjqueryajax