Is the styling of the image tag's height different on the iPhone browser compared to other browsers?

I have encountered a strange issue while testing my website on various devices, all of which are using Chrome. Everything displays correctly except when viewed on an iPhone, where I notice an unexplained extra height in the img tag.

Below is the HTML code that includes the img tag:

<div class="row align-content-center" id="tips-input">
     <img class="col-5 img-fluid" src="images/tips-image.svg"/>
     <div class="col-7">
          Photo Code can be found within the printed photo
     </div>
</div>

And here is the corresponding CSS:

 #input-foto #input-box #tips-input img {height: auto;}

Screenshot from my device:
https://i.sstatic.net/eOl4k.jpg

Screenshot from an iPhone device:
https://i.sstatic.net/NeQCR.jpg

htmlcssiphone

Answer №1

It seems like there's a bug with flex box in Safari browser.

Check out this informative answer on the same topic.

Dealing with Image stretching issue in flexbox layout on Safari

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

Is it possible to gradually decrease the blur of an image in JavaScript using a loop and a variable?

I'm experimenting with something like this: let str = 10; let blu = "px"; let val = ""; function check() { if(a < b){ str = str - 6; if (str<0){str = 0} val = str+blu; document.getElementById("img1&q ...

javascripthtmlcssimageblur

Using a JavaScript script in my HTML alongside Vue.js is not possible

Hello there! I recently created a Node.js server and now I'm trying to display an HTML file that contains a Vue script which loads data using another method written in a separate JS file. However, when I attempt to load my HTML file in the browser, ...

javascripthtmlnode.jsvue.js

What is the best way to retrieve the file and directory tree structure from git using php?

I am looking to streamline the process of downloading zip files from my public git repository on Bitbucket. Rather than manually creating a download button for each zip file, I want to dynamically generate a PHP page that displays all available zip files a ...

phphtmlgit

Ways to enable drop-down functionality on navigation bar using Bootstrap

The navbar is visible, but the drop-down menu within the navbar is not functioning. When I click on the drop-down menu, it fails to display the intended menu. I obtained the source code from a different Bootstrap website, but unfortunately, it is not work ...

htmlbootstrap-4angular6

I've noticed that tailwindcss is causing issues with some of the styles in my angular project

Recently, I integrated tailwindcss 2.0.4 into my angular 11.2.6 project. After completing the installation and adding necessary imports, the appearance of the page had changed. Take this button for instance: https://i.sstatic.net/vvYVN.png Prior to int ...

cssangulartailwind-css

Displaying a particular form depending on user selection in PHP

Being new to the world of HTML and PHP, I have a question. In my HTML code, there is a form with two options to select from: lesson or topic. I want to display a different form depending on whether the user selects "lesson" or "topic." How can I achieve ...

phphtmlforms

Having additional space preceding list elements within a flexbox setup

Check out the code snippet below: HTML Code <ul class="menu"> <li><a href="#">Item 1</a></li> <li> <a href="#">Item 2</a> </li> <li> <a href="#">Item 3</a> </li& ...

htmllistcssflexbox

Creating a multimedia input field that allows users to input text, images, and gifs similar to the "Create Post" field on social media platforms like Facebook and Twitter is a

Could someone provide guidance on how to create an input field that allows for text, pictures, gifs, attachments, similar to the "Create Post" input field in Facebook, Twitter, or Quora? I would appreciate a plugin recommendation or tips on creating it m ...

javascripthtml

Facing a selection list issue on a web application built with Flask and Vue.js

I'm trying to integrate Flask and Vue.js together, but I've encountered an issue with my select element. The following code snippet is present in my HTML file: <div class="col-sm-10"> <select class="form-select" v-mod ...

htmlvue.jsflask

Having trouble getting rid of the border-bottom?

I have been attempting to customize the appearance of the React Material UI tabs in order to achieve a design similar to this: https://i.stack.imgur.com/tBS1K.png My efforts involved setting box-shadow for the selected tab and removing the bottom border. ...

javascripthtmlcssreactjsmaterial-ui

What steps are required for my font to be displayed on my website?

I am completely new to programming and have found myself struggling with website development. I can't seem to figure out why my text is not displaying in the custom font I want. It shows up as white italics instead. Any assistance would be greatly app ...

htmlcssfonts

adjust the value of an attribute in a dynamic stylesheet using jquery

I'm trying to create a dynamic stylesheet using a combination of jquery, css, php, and html. My approach involves making an ajax request (using jquery) to pass the width of my screen to a php css file. However, I am facing an issue where the php css f ...

phpjqueryhtmlcssajax

Having difficulty retrieving form data with tag name using jQuery

Looking to retrieve form data using jQuery, I've experimented with two different approaches: var form = document.getElementById('user_form'); //Using form id var form = document.getElementsByTagName('form'); //Using form tag na ...

javascriptjqueryhtml

Unable to navigate through a dropdown menu on a Bootstrap navbar by scrolling

On my simple homepage, I have a fixed-top navbar with two dropdown menus. One of the menus has a long list of entries that I am unable to scroll to the end of. The navbar consists of a navbar-brand, a home link, and the two dropdown menus. One menu has on ...

htmldjangobootstrap-5

Grid Alignment Centered - Inner Grid aligned to the left - Zero Javascript or Media Queries Allowed

[UPDATE] Looking for a solution that doesn't involve javascript or media queries as the user should be able to change the container size. [/UPDATE] In need of creating a grid layout for items. The container's width is flexible. The grid must ...

htmlcssgrid-layout

Determine the height of the input group when a span, input, and button are included

I have been attempting to create a 3 control input-group using Bootstrap 3.3.7, but I am encountering an issue where the height of the first addon does not match the height of the input field or button that follow. <div class="input-group"> < ...

csstwitter-bootstraptwitter-bootstrap-3

ways to trigger an event and pass it to a JavaScript function using a hyperlink

This specific "href="javascript:stop(this);" pattern allows the hyperlink object to be passed to the stop function. However, I also need to pass the invoked event to that function. How can I achieve this? Since my records are loaded through AJAX, I am unab ...

javascriptjqueryhtml

Navigating through each element of an array individually by using the onClick function in React

I'm currently working on a project that involves creating a button to cycle through different themes when pressed. The goal is for the button to display each theme in sequence and loop back to the beginning after reaching the last one. I've imple ...

javascripthtmlcssreactjsnext.js

Box surrounding the image with a shade of gray, all thanks to

Despite trying to set "outline: none" and tweaking the border, I'm unable to resolve the issue. For reference, you can visit the page here: . I've shared the link because I'm unsure of what exactly needs fixing or adding on the page. Any gui ...

javascripthtmlcssbootstrap-4

What could be causing my fixed element to disappear when the webpage is not long enough?

OBJECTIVE: a div is { position:fixed; bottom:0% } it has a genuine height and width; the z-index is the highest in the document = so, it should always be visible! ISSUE: mobile browsers 'cut' the bottom end of the page when zooming out. ...

htmlcss