Troubleshooting problem with width in CSS for Apple iPhones

Managing a website at has presented a curious challenge.

While it displays properly on Android devices, the UI appears distorted on Apple products. Specifically, below the slider, where two images are supposed to be shown horizontally, there seems to be a problem on iPhones.

I attempted to adjust the CSS by changing the width percentages, such as setting it to 49%, but unfortunately, these changes did not resolve the issue.

The styles being used are detailed below:

/* Create four equal columns that sit next to each other */
.column {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
}

.column img {
    margin-top: 8px;
    vertical-align: middle;
}

/* Responsive layout - transforms to a two-column layout instead of four columns */
@media screen and (max-width: 800px) {
    .column {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;

    }
}

/* Responsive layout - converts the two columns into a stacked format instead of side by side */
@media screen and (max-width: 600px) {
    .column {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 50%;
    }
}

If anyone could provide assistance with this matter, it would be greatly appreciated.

Answer №1

When Bootstrap is applied with this specific CSS code:

.row:before, 
.row:after {
  display: table;
  content: " ";
}

The issue arises in Safari on iOS as it interprets these pseudo elements as actual elements, resulting in an extra child element within the flex container.

To resolve this problem and ensure proper visibility on iOS Safari, you can add the following CSS:

.row:before, 
.row:after {
  display: none;
}

To avoid unintended consequences in other areas, it's advisable to assign a class to target rows using flex and modify the code as follows:

.myFlexRow.row:before, 
.myFlexRow.row:after {
  display: none;
}

Since your site utilizes Bootstrap 3.2 which does not fully support flexbox, switching to Bootstrap 4+ and utilizing the .d-flex class would be a more straightforward solution.

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

Concealing the pagination buttons for next and previous in Material-UI TablePagination

Is there a way to remove the next and prev buttons in the TablePagination component without affecting the position of the "Showing ..." text? Should I handle this through CSS styling or by configuring the component settings? https://i.sstatic.net/7EkKd.pn ...

Has anyone experienced unexpected issues after Xcode automatically adjusts a storyboard?

Upon opening an existing project in Xcode, I noticed that certain values in a storyboard were immediately adjusted. Here is a snippet of the diff: - <rect key="frame" x="0.0" y="49.5" width="320" height="140"/> + <rect key="frame" x="0.0" y ...

Adding an element to a page and watching it come to life with a dynamic CSS animation in

When the button is clicked, I want to add a Label to the page and fade it in using a CSS animation. My initial thought was to create and add the label with the CSS class "hidden" attached, which sets the opacity to 0, and then remove the class to trigger t ...

Apple Sandbox APN Server experiencing subpar performance with Push Notifications

Our app is experiencing excellent and rapid push notification performance (less than 1 second) on the production server. However, we are facing significant delays when testing staging builds that connect to the sandbox APN server. While some notifications ...

Tips for ensuring all images are the same size within a div element

https://i.stack.imgur.com/EkmWq.jpg Is there a way to make sure all the images fit perfectly inside their respective border boxes without appearing stretched? I've tried setting fixed height and width within a div, but they always end up looking off. ...

Hide the scrollbar in the div depending on the specified condition

I'm having trouble with this particular process and haven't been successful so far... I currently have a customized scrollbar within a div element, and what I am attempting to do is remove the scrollbar when the height of the div is less than 19 ...

When the browser window is resized to mobile view, a div is overlapped by an image

I've encountered an issue with the image size and position when resizing to mobile view in the browser. .extension { display: table; padding: 50px 0px 50px; width: 100%; height: auto; color: #fff; background-color: #558C89; ...

Having trouble with iOS Phonegap and strange purchase receipts?

Lately, I've been noticing some strange purchase attempts on my Phonegap iOS app. The transaction receipt seems invalid when I try to verify it on the iTunes endpoint. window.plugins.inAppPurchaseManager.onPurchased = function (transactionId, product ...

Increasing the size of text in CSS with the use of ":hover" and then causing it to return to its original smaller size

Allow me to explain my goal here. I have text displayed on my website that I would like to enlarge when the user hovers over it and then shrink back down when they move their cursor away. The issue I'm facing is that after enlarging the text using t ...

Is it possible to generate a star rating system from an image using a decimal value?

Recently, I have been eager to convert a number into a star rating and stumbled upon this helpful post here: . The post perfectly explains what I am looking to achieve. Despite following the instructions provided, I am facing difficulties getting it to fun ...

What is the best way to ensure that the text input spans the entire width of the div in Bootstrap 4?

I am currently exploring the implementation of Bootstrap 4. I have a basic div that includes a text box, and my goal is for the text box to occupy the full width of the div. Initially, I assumed that in Bootstrap, input elements automatically inherit the f ...

Issues with detecting the height of an element due to faulty behavior

Trying to find the height of the html element specified below, I am utilizing Jquery as shown in the example. The expected result for variable x is greater than 40 pixels; however, it consistently returns 10. By adjusting the padding from 5 pixels to 6 on ...

css element remains stationary and in view

Issue at hand: I have created a logo file named .art-obj1631017189 and I am looking to fix its position. It appears to work fine, but when scrolling down and it encounters the content section, my object falls behind the content (item-layout). I desire to ...

Tips for implementing a custom offline map feature in your iOS application

I am currently working on creating an offline map application for iPhone. I have georeferenced the illustrator map using mapublisher and have a geodatabase () as well as parking data in shp/csv format. Criteria: The map should allow users to pan, pinch, ...

What is the best way to customize a button component's className when importing it into another component?

Looking to customize a button based on the specific page it's imported on? Let's dive into my button component code: import React from "react"; import "./Button.css"; export interface Props { // List of props here } // Button component def ...

What is preventing this from being passed to the subsequent component in ReactJS?

I am trying to get the Portfolio class to utilize the this.prompt method from the Title Bar class. Despite extensive research, I have not been able to find a definitive solution for this yet. Currently, my screen is just blank. Below is the content of my ...

Adding a new div using Jquery after a specific table row

I am having trouble displaying additional data in a table when a specific row is clicked. Here is the table structure I am working with: <div id="display"> <div class="displayRow"> <img src="images/expand-arrow.gif" class="expandArrow ...

Alternative PDF renderer for iOS devices

I'm on the hunt for a reliable PDF Renderer option. While Quartz Core has been serving me well for PDF rendering, I can't help but notice that it's a bit slower compared to other iOS Apps (like GoodReader which seems to be using its own ren ...

Building a fluid two-column layout in CSS: Ensuring that the left column expands or shrinks based on

After conducting a thorough search, I haven't found an exact solution to my problem. My goal is to create Two Columns: Left fluid + Right fluid. The width of the left column should be dependent on the right column's width, with the left colum ...

Link-defying button

I'm developing a website with a homepage that serves as an entry point to the rest of the site (it welcomes the user and allows them to click anywhere to access the main website). The following code accomplishes this: <template> <div onc ...