Offsetting absolute elements in a horizontal landscape view

When I view my page on a mobile browser (tested on Android JB and iOS 6), it renders fine initially in both portrait and landscape modes. However, the issue arises when I switch from landscape to portrait - the absolute positioned divs are offset from their intended position. Interestingly, if I am zoomed in when I change the orientation, this problem doesn't occur.

This problem is similar to what was discussed here: Strange offset in the CSS element position after changing orientation on iPad, with the only difference being that I am testing on a phone. I have tried the solutions provided in that thread, but they do not seem to work for my case.

Here is the CSS code I am using:

html{
    width: 100%;
    height: 100%;
}

body{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: #000;
}

#container{
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    min-width: 960px;
    min-height: 544px;
}

#pic{
    display: table;
    height: 100%;
    width: auto;
    margin: 0 auto;
    z-index: 5;
}

#links{
    position: absolute;
    width: 100%;
    height: 50px;
    bottom: 5px;
    left: 0;
    right: 0;
    z-index: 9;
    background: #ccc;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
    filter: alpha(opacity=10);
    -moz-opacity: 0.1;
    -khtml-opacity: 0.1;                  
    opacity: 0.1;
}

#wrapper{
    position: absolute;
    width: 100%;
    height: 50px;
    bottom: 5px;
    left: 0;
    right: 0;
    z-index: 12;
}

#content{
    display: table;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

#content div{
    display: inline-block;
    *display: inline;
    zoom: 1;
    width: 20%;
    text-align: center;
}

#content div *{
    vertical-align: middle;
    border: 0;
    text-decoration: none;
    color: #000;
    border-radius: 5px;
}

/* portrait */
@media screen and (orientation:portrait) {
    #container{
        position:relative;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        min-width: 960px;
        min-height: 544px;
    }
}
/* landscape */
@media screen and (orientation:landscape) {
    #container{
        position:relative;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        min-width: 960px;
        min-height: 544px;
    }
}

Despite trying the solutions from the previous question, I still face the same issue. Here is the structure of my HTML:

<div id="container">
    <img src="pic_jj.jpg" alt="image" id="pic" />
    <div id="links">

    </div>
    <div id="wrapper">
        <div id="content">

            <div>
            </div>

            <div>
            </div>

            <div>
            </div>

            <div>
            </div>

            <div>
            </div>

        </div>
    </div>
</div>

If you would like a live demo, you can view my page here. Please note that I am seeking a solution that does not involve JavaScript.

PS. I am using this meta tag:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no;">

Update: Screenshots.

Here is the initial load appearance (normal behavior).

Here is the issue that occurs when changing the orientation from landscape to portrait.

Answer №1

As discussed by Wallace Sidhrée and me in the comments above, it may be beneficial to take a different approach to solve your rendering issue using more conventional methods. Resolving these issues could potentially eliminate the unusual rendering behavior. If not, it will certainly simplify the troubleshooting process. Consider the following suggestions:

- You have redundant styles in your stylesheet (such as unnecessary @media queries)
You mentioned adding these media queries to test a solution from a different question on Stack Overflow. However, this approach may not resolve the issue as it could lead to unpredictable results. In essence, the extra media queries should not impact the layout.

- Instead of using an <img> tag for a background, opt for the more traditional background property on a <div> element
To achieve the desired blending with the black background, utilize both a background image and color. Try: background-color: #000000; with background-image: url(image.jpg). The background image will overlay the background color.

- Applying display: table; to center images within your #pic element may be suboptimal
For centering a background image, use background-position: center;

- Avoid using the z-index property without specifying a position for your #pic element
When using z-index, ensure the position property is set to either fixed, absolute, or relative. z-index does not affect elements with position: static;, which is the default value if not explicitly defined.

- Instead of adjusting the opacity of a separate element for background transparency, consider setting the transparency within the background color property of the element
You mentioned resorting to this method due to limited support for rgba values. However, a traditional approach is to provide a fallback value without alpha transparency, as suggested by RaphaelDDL.

Simplify your HTML by implementing minimal markup like this:

<body>
    <div id="image></div>
    <div id="flair">
        <div id="flair-container">
            <div class="flair"></div>
            <div class="flair"></div>
            <div class="flair"></div>
            <div class="flair"></div>
            <div class="flair"></div>
        </div>
    </div>
</body>

UPDATE

Check out this "FIDDLE" incorporating my recommendations. After testing on an iPad (iOS 6.1.3) and Nexus 7 (Android 4.2.2), no rotation issues were observed.

Answer №2

After carefully designing this layout, I observed its responsiveness when resizing the browser window. To ensure its functionality, I encourage you to modify the code and test it on an iPad or tablet if feasible. Your efforts in testing will likely yield a satisfactory end result. :)

<!DOCTYPE html>

Jeevan Jose

    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no;">
    <meta name="description" content="Jeevan Jose | About | Twitter | LinkedIn | Facebook | Email">
    <meta name="keywords" content="Computer Engineer, Software Engineer, IT, Jeevan Jose, Jeevan, Photographer">
    <meta name="author" content="Jeevan Jose">
    <meta charset="UTF-8">

    <style type="text/css">
        // CSS styling for responsiveness
    </style>
</head>
<body>
    <div id="container">
        // Content and elements
    </div>

    <!-- Additional tracking codes for visitor statistics -->

Kindly note that some images may not load correctly due to potential path issues from making changes in Notepad. Please verify these adjustments. :)

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 reset the value of a current request attribute?

I designed a homepage that consists of a header, a sidebar, and a div tag. When a user clicks on the "register" button, Registration.jsp is loaded into the div tag. After successfully submitting the registration form, I want to redirect it back to the sa ...

Creating dynamic images in JavaScript by assigning URL paths from string variables

Currently, I am utilizing JavaScript to parse through an XML file. One interesting aspect of the XML is that it contains URLs which link to images like this one: http://localhost/pic.jpg Throughout the parsing process, I am storing each URL as a string va ...

Is it possible to place an open div panel between two tweets?

I'm in the process of developing a UI with Twitter feeds. I want to create a feature where a panel can be opened between two tweets, causing the tweet below to shift downwards. This function is commonly seen in tweet clients like TweetBot; as each new ...

Tips for retrieving specific database entries using a JavaScript function

I'm currently in the process of developing a web directory that showcases organizations based on the selected county by utilizing an XML database. During testing, I have configured it to only display organization names and counties for now. However, ...

In Firefox, the functionality of applying background-position-y to a label when it is immediately preceded by a checked input[type=radio]

CSS selector input[type=checkbox]:checked + label is not functioning properly in Firefox browser! label { display: block; font-family: 'Muli'; font-size: 14px; color: #666; vertical-align: top; background: url("https://s31.postimg. ...

Activate jquery code during interaction

I am in need of a scalable image that can be centered within a scalable <div>. Currently, I have a wrapper <div> along with the scalable <div> that contains the image. Additionally, there is some jQuery code in place to calculate the widt ...

Avoiding the <br> tag in list items with TinyMCE

I am currently using tinyMCE and I needed to enable the "force_br_newlines: true" option. Without this setting, if I press the "Enter" key twice and check the source code, I only see one <br> tag. However, when I set the option to TRUE, it creates a ...

Bootstrap 4 tabs function perfectly in pairs, but encounter issues when there are three of them

Having trouble with bootstrap4 tabs not working properly? They function well with 2 tabs using the code below: <div class="row"> <div class="col-12"> <ul class="nav nav-tabs" id="registration-picker-acc-select" role="tablist"> ...

Having difficulty locating the login button on the webpage

I am attempting to log into a banking account using selenuim. After opening the webpage and locating the login element, I initially struggled to access it by its "name" or "id." Fortunately, I was able to successfully access it using driver.find_element_by ...

Get rid of the spaces in web scraping <tr> tags using Node.js

I've encountered a problem that goes beyond my current knowledge. I'm attempting to web-scrape a specific webpage, targeting the <tr> element in nodejs. Although I can successfully retrieve the content, it seems that the format is not as cl ...

Node JS server fails to load CSS even with the use of express.static

It's quite absurd, but I've been grappling with a rather nonsensical code conundrum for days now. I just can't seem to get the CSS and image to load on my Node.js server. I've tried various solutions (like express.static, etc.), but n ...

Just starting out with json/ajax and I received an error in the Console that says: Uncaught TypeError: Cannot read property 'length' of undefined

I’m encountering an issue with my code. I must emphasize that I’m brand new to this, so please bear with me if the solution is simple. I did attempt to solve it myself before reaching out for help and searched through various posts with similar errors, ...

I can't figure out why my unslider isn't adapting to the screen size. Check out the fiddle for more details

I recently implemented unslider to create a slideshow that spans 100% of the width on my website. Everything seemed to be working fine until I tried resizing the screen, and the slides remained the same size as they were initially loaded. Here is the code ...

Prevent user input in HTML

Currently, I am working on creating the 8 puzzle box game using JavaScript and jQuery Mobile. The boxes have been set up with <input readonly></input> tags and placed within a 9x9 table. However, an issue arises when attempting to move a box ...

Connecting Documents Together

I'm looking to learn how to link files together, specifically creating a button that when clicked takes you to another site or the next page of reading. I apologize if this is a simple question, as I am new to coding and only familiar with password-ba ...

Issue: The function view.hlp(...) is not recognized within jsrender

Currently, I am utilizing jsrender to map the templates within a grid. In this process, I have incorporated a method call inside jsrender based on a certain condition as shown below: @section scripts{ $.views.helpers({ isMobile: function () { ...

Create an Angular directive that highlights a div if any of its child inputs have focus

I've developed an Angular directive for a repetitive section containing form elements. My aim is to have the entire section highlighted whenever any input field inside it is focused. template.html <div class="col-md-12 employee-section"> <l ...

Prevent automatic jumping to input fields

Can someone help me with a problem related to the html input tag or primefaces p:input? I am facing an issue where the cursor always automatically jumps into the input field. The height of my page is such that scrolling is required, and the input field i ...

Unable to choose multiple options within a selection field

My webgui testing involves the use of selenium, which includes the following method: protected static selectListItems(String id, String value1, String value2, String value3,String value4){ String values = "" if(StringUtils.isNotBlank(value1)) ...

The functionality of the Ajax call ceases to function properly on mobile devices after a period of time

I'm currently developing a mobile application using Cordova, AngularJS, and jQuery. My issue lies in trying to retrieve two files from the same directory. The first file retrieval is successful and occurs immediately after the page loads. However, t ...