What are some ways I can ensure my HTML page is adaptable and user-friendly for iPhone 6s users?

My HTML page with CSS looks great on my PC, but I'm experiencing some issues with the view on my iPhone 6S. Despite trying to make the page flexible using CSS, I haven't been able to achieve the desired results. Can anyone provide assistance?

I attempted the following:

@media (max-width:1024px) {

.ImageBig {
    max-width: 100%;
    height:auto;
}

.OpenContainer {
   width: 100%;
   overflow:hidden;
   top:0;
   background-color:white;
}

.ImageContainer {
    max-width: 100%;
    height:auto;
    margin: 0 auto; 
    top: 76%;
    display: block;
    position:absolute;
}

.ImageInfo {
    background-color:#bfc0c4;
    padding:10px;
    float: none;
    display: block;
}

.ImageBuy {
    background-color:#e5e8ed;
    padding:10px;
    font-weight: bold;
}

.exit {
    position: fixed;
    top: 1em;
    right: 1em;
    color:black;
}
}

However, it's still not displaying properly. I would like it to resemble this image: https://i.sstatic.net/Llaf6.jpg

You can access the entire HTML page with CSS here:

https://jsfiddle.net/hntbojao/1/

--

Your help in resolving this issue would be greatly appreciated!

Thank you!

htmlcss

Answer №1

Behold! I have made some adjustments to the html markup for better cleanliness.

body {overflow-x: hidden; margin: 0; padding: 0;}
.OpenContainer {
    width: 100vw;
    min-height: 100vh;
    background-color: white;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.ImageContainer {
    position: relative;
    max-width: 960px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
}

.ImageInfo {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 250px;
    -ms-flex: 0 0 250px;
    flex: 0 0 250px;
    background-color:#bfc0c4;
    padding:10px;
}
.ImageInfo h2 {
    margin-bottom: 2rem;
}
.md-social {
    margin-top: 1rem;
}
.md-social>a,.sm-social>a {
    display: inline-block;
    max-height: 35px;
    overflow: hidden;
}
.ImageBuy {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 62px;
    -ms-flex: 0 0 62px;
    flex: 0 0 62px;
    background-color:#e5e8ed;
    padding:10px;
    font-weight: bold;
}
.sm-social img, .md-social img {
    width: 39px;
    height: 36px;
}
input[type=image] {
    display: inline-block;
}
.sm-social {
    display: none;
}
.exit {
    position: fixed;
    top: 1em;
    right: 1em;
    color:black;
    z-index:1;
}
@media (max-width: 991px) {
    .ImageContainer {
        max-width: 750px;
    }
}
@media (max-width: 768px) {
    .ImageContainer {
        max-width: inherit;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        min-height: 100vh;
    }
    .ImageInfo {
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 auto;
            -ms-flex: 1 1 auto;
                flex: 1 1 auto;
    }
    .ImageBuy {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
    }
    .md-social {
        display: none;
    }
    .sm-social {
        display: inline-block;
    }
    .ImageBuy {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .ImageBuy>*:last-child {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 80px;
        -ms-flex: 0 0 80px;
        flex: 0 0 80px;
        text-align: center;
    }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" crossorigin="anonymous" />

<div class="OpenContainer">
  <a class="exit" href="#"><i class="fa fa-times fa-2x"></i></a>
  <div class="ImageContainer">
    <div class="ImageBig">
      <img src="http://i.imgur.com/fWtWeUr.png" alt="" class="img-responsive" />
    </div>
    <div class="ImageInfo">
      <h2>Amsterdam</h2>
      <p>Carré Theatre alongside the busy Amstel river.</p>
      <div class="md-social">
        <a href="" target="_blank">
          <img src="http://i.imgur.com/qyrEwYp.png" />
        </a>
        <a href="">
          <img src="http://i.imgur.com/FFPzxIb.png" />
        </a>
        <a href="">
          <img src="http://i.imgur.com/qyrEwYp.png" />
        </a>
      </div>
      <p>Keywords: #Carre, #Amsterdam, #Locks, #AmstelRiver</div>
    <div class="ImageBuy">
      <div class="sm-social">
        <a href="" target="_blank">
          <img src="http://i.imgur.com/qyrEwYp.png" />
        </a>
        <a href="">
          <img src="http://i.imgur.com/FFPzxIb.png" />
        </a>
        <a href="">
          <img src="http://i.imgur.com/qyrEwYp.png" />
        </a>
      </div>
      <div>
        <input type="image" src="http://i.imgur.com/FLdR6hX.png" border="0" name="submit" alt="PayPal, The safer, easier way to pay online!">
        <div>ams1</div>
      </div>
    </div>

  </div>
</div>

I've also resolved the issue with the desktop view when the page height was shorter than the image height.

No need to thank me. Consider it a freebie on the house!

Cheers!

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

Prevent the underlining of the :before content of a link from being affected by a rule applied to the link

I have a hyperlink that becomes underlined when hovered over. I want to add a > symbol before the link, but I don't want it to be underlined when the link is hovered. Here's the code I'm using: .box.blueb a { color: #0098aa; } .box.blueb ...

csshyperlinkunderline

Is there a way to extract JSON information from the source code of an HTML page?

I'm currently in the process of extracting data from an online music database. Specifically, I am interested in retrieving information that can be identified using CTRL+F -- "isrc":"GB-FFM-19-0853." view-source: Utilizing Python and Selenium, I have ...

pythonhtmlseleniumweb-scraping

The functionality of redirecting to the homepage after registration is not working as intended due to the issue of the uiD not being properly set in the session

I have created a registration form to register users and once the registration is complete, it should redirect to index.html (home page). There seems to be an issue where upon pressing the submit button, the page refreshes and the form resets without redi ...

phphtmlmysqlpdo

Tips for speeding up your website by preloading versioned files in HTML

Tools like Google Lighthouse and PageSpeed recommend preloading important requests using <link rel=preload> to enhance website performance. When it comes to static files with unchanging filenames, the process is straightforward. However, how can I ...

htmlangularprimengpagespeedlighthouse

Tips for shifting the canvas to the back using JavaScript

I am pondering how to make the box move backward once it reaches 1000px (canvas.width), but I am unsure how to proceed after the If condition. Here is my script, can anyone help me out? var canvas = document.querySelector("canvas"); var canvasCT = canvas ...

javascripthtmljquerycanvasweb-frontend

Developing a side panel for navigation

My goal is to create a sidebar that shifts to the right from the left side and makes space on the page when the hamburger menu is pressed. I have made progress in achieving this, but I am encountering difficulties with the animation. const btnToggleSide ...

javascripthtmlcss

What is the best way to clear validation after submitting a form using AJAX?

My form is validated using HTML5 validation and submitted using AJAX. After a successful submission, the input fields are reset, which is working fine. However, my issue is that even after a valid submission, the HTML5 validation still outlines the empty ...

jqueryajaxhtmlforms

Implementing JavaScript in a VB.NET Application

My current project at the office involves developing a VB.NET application to streamline and partially automate our work processes. One task within this project requires downloading a .pdf file from our intranet. To achieve this, we utilize IE through a sc ...

javascripthtml.netajaxvb.net

What is the best way to make sure every HTML element on this page is perfectly centered on the screen?

To center the dropdownlist and the three textareas on the screen instead of sticking to the left, you can adjust the CSS by adding the following styles: Add "text-align: center;" to the parent container to center align the elements. Add "display: inline- ...

htmlcssjsp

Regular Expressions in action - Substituting text within an eZ Publish XML field

Before utilizing the eZ Publish 5 API to create an Xml content, I need to make some modifications. I am currently working on implementing a Regex to edit the content. Below is the Xml code I have (with html entities) : View Xml code here http://img15.ho ...

phphtmlregexxmlezpublish

Troubleshooting Issue with Importing File into CSS Document

I'm currently working on building a website and I've been trying to import an image to use as the header. I want to add this .png picture to my CSS file, but despite extensive research and double checking everything, I still can't figure out ...

htmlcssimagefilepath

Ensure that all values are in a single row on the webpage

I'm currently working on a web application that requires a label, textbox, and button to be aligned in one row. However, they are displaying in separate rows. Below is the code I have been using: <div class="form-group row"> <label clas ...

html

Place your cursor over the following element to take control

There is a paragraph that needs to be clipped when hovered over. An issue arises where the H1 text shifts its position. Only the phrase "HOVER ABOVE PARAGRAPH" should be concealed. * { margin: 0; box-sizing: border-box; } .wrapper { displ ...

htmlcsshover

Trouble with webpage design persists following recent modifications

Today, I decided to make some alterations on the header.php file of my WordPress website in order to tweak the flag icons displayed at the top of the page. However, when I refreshed the page, everything looked completely chaotic. Even after undoing all th ...

phphtmlcsswordpress

Checking Ember.js - How to retrieve the status of each checkbox individually

I am currently working on an older version (1.11) of an Ember app and I have multiple checkboxes generated within a loop. I am looking to determine whether an element has been checked or unchecked in an action. Ember ehbs: {{#each item in data}} <lab ...

javascripthtmlember.jscheckbox

Retrieve the present time of an ongoing CSS3 animation

I've been trying to retrieve the current time of a running animation, but I haven't had any luck so far. I can easily grab the start time using: myelement.addEventListener('webkitAnimationStart', function (evt){ console.log(evt.elaps ...

javascriptcssanimationdom-events

Tips for creating multiple functions within a single JavaScript function

Is there a way to combine these two similar functions into one in order to compress the JavaScript code? They both serve the same purpose but target different CSS classes. The goal is to highlight different images when hovering over specific list items - ...

javascriptjquerycsssyntax

Concealing external scripts on specific webpages

In my HTML template, I have integrated a third-party JavaScript code that provides a chat option. This script is included in my header.html so that it appears on all pages. However, I do not want this chat option to display on the login page. I want it to ...

javascriptjqueryhtml

Images in emails do not conform to specified height and width parameters in Outlook

Here is the structure of my DOM in HTML content that I am including in an email. <a href="http://content.mindmatrix.net/email/814xjqjmpj5r/b59tqx7tzz2x7" target="_new"> <span style='text-decoration:none;text-underline:none'> <img ...

htmlcssoutlookwindows-live-mail

Display the variable value in an HTML format following the submission of a request to an API using NODE JS, express, and jquery

Seeking assistance with completing a straightforward task: Creating an HTML AJAX link that triggers a Node.js API call to retrieve a value, wait for the response, and then display the value in HTML, JS, or PHP. After clicking on the "Get My Value" link be ...

htmljquerynode.jsajaxexpress