What could be causing HTML elements with fixed height/width to appear larger than anticipated on mobile devices, even with a high pixel density?

Creating a "mobile first" web app involves using the meta attribute "viewport" to help scale elements appropriately. However, there are instances where fixed sized elements are needed. For example, I want the following div to be 598px in height and 450px in width:

<div class="note">
  <div class="note_text">Its my birthday, and I have treated myself to a very nice gift.   </div> 
  <img class="sticker" src="/assets/sally/sally_04.png"/>
</div>

.note {
    margin-left: 20px;
    height: 598px;
    width: 450px;
}

.sticker {
    width:300px;
    height:300px;
    position: relative;
}

When viewed on an iPhone, the resolution of this element should fit within a single screen when scrolled to the top. However, it seems to render longer than expected. What could be causing this discrepancy?

Is there something obvious that I am missing in my code?

csshtmlmobile

Answer №1

Could you provide more details about the scaling settings in the meta tag and the image's actual size?

In the meantime, one workaround could be to use percentages for the width and height values in the sticker class instead of pixels. Be sure to maintain the aspect ratio to prevent the image from appearing stretched or disproportionate.

For example:

**.sticker {
    width: 70%;   /* You can also use width: 100% without specifying the height */
    height: 45%;
    position: relative;
}**

Answer №2

If you're facing display issues, don't forget to review your Windows settings for Scale and layout. I encountered a similar problem when mine was set to the default 125%, causing everything in the browser to appear larger than intended. It took some time to diagnose this issue, so it might be worth checking out if you're experiencing difficulties as well. It's not ideal when striving for a perfectly designed user interface.

Best wishes!

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

The integration of PHP code with an HTML form is causing issues

When I use the insert_teacher('bla bla','bla bla','dqsd') function in a PHP file, everything works fine. However, when I try to implement it with an HTML form, nothing is displayed and no data is inserted into my database. &l ...

javascriptphpjqueryhtmlcss

What is the best way to explain the concept of HTML5?

While reading a question on Stack Overflow, I came across a comment that stated: HTML5 is equal to HTML(5) + CSS3 + JavaScript. This statement truly caught me by surprise. Can it really be argued that HTML5 can be broken down into HTML(5), CSS3, and Ja ...

html

The functionality of smooth scrolling is not compatible with the overflow-y property

Looking to implement a smooth scroll feature, I came across an example online and tried to adapt it. Here's the code I'm working with: https://jsfiddle.net/4DcNH/144/ I've added specific conditions to the html and body elements (changing t ...

javascriptjqueryhtmlcss

complete collection of sass and scss website templates

Are there any comprehensive sass/scss templates or mixins similar to what you get with compass, but designed for an entire website? For example, can you define 2 columns, width, color, etc. and have it generate a full site/template? Thanks, Rick ...

rubycsssass

Exploring the integration of HTML and CSS within the Django framework

Trying to implement a star rating in a specific HTML file The file I am working on is called book_detail.html {% extends "base.html" %} {% load static %} {% block title %} Block Detail Page {% endblock title %} {% block sidenav %} {% for item ...

htmlcssdjangodjango-staticfiles

Creating a div that automatically scrolls along with the page as it reaches the edges of the viewport

My website features a floating box on the side of the page (Parent div) housing a child div with a position:sticky property that scrolls along with the page as it reaches the top of the viewport. See it in action here: https://codepen.io/Xanthippus480/pen/ ...

htmlcss

Tips for including a wildcard in a MySQL query while using the '=' operator

I am working with pre parameters that determine the input for my query. For one scenario, I need to search for all UUIDs, while in another situation, I only want to look for specific UUID numbers. Instead of splitting this into two separate calls as shown ...

phphtmlmysql

Is there a way to provide "only responsive" content to the mobile m. subdomain without the need for redirection?

I currently have a website with www. that redirects to different content on the mobile m. site. I am in the process of updating my site to be responsive, but I want to ensure that I do not lose the links to the m. site in Google SERP. How can I redirect m ...

htmlhttp-redirectmobileresponsive-design

Looking to center an image in front of text?

I am looking to position an image in front of text and center it. <div id="info"> <ul> <h3> <li>NAME: Mohit Kumar Singh</li> <li>CONTACT:1234567890</li> <li>ADDE ...

html

Move my site content to the appropriate location

I am working on a single-paged website built with Jquery and HTML. The main content is housed within a div called #site-content, which has a width of 4400px. Each "page" is positioned within this div, with the first page starting at left: 0px, the second a ...

javascriptjqueryhtmlcss

What is the best way to position the wizard on both the left and right sides of the screen

Currently, here's the code I have, and I want it to appear like this. What are the steps needed to adjust the CSS in order to achieve that? .nav-wizard { display: table; width: 100%; } .nav-wizard > li { display: table-cell; text-align: ...

csstwitter-bootstraptwitter-bootstrap-3

Using jQuery in Yii: Detecting when a radio button loses its checked state

Here is the code regarding the issue at hand: <script> $(function(){ $('#widgetId-form input[name="valueType"]').change(function(){ if ($(this).is(":checked")) { console.log("enabling "+$(this).data("class") ...

javascriptjqueryhtmlyii

Every time I attempt to insert a background image into a div using jQuery, I am consistently faced with a 404 error message

When I hit enter in my search bar, a new div is created each time. However, I am struggling to assign a background image to the created div as I keep receiving a 404 error in the console. Below is the code snippet I'm working with: function appendToD ...

javascriptjqueryhtmlcssnode.js

What is the best way to display multiple HTML files using node.js?

click here to see the image Here is my server.js file. Using express, I have successfully rendered the list.html and css files on my server. However, I am encountering an issue when trying to navigate from list.html to other html files by entering localho ...

htmlcssnode.jsexpressmariadb

Designing a Dynamic Floating Element that Shifts with Scroll Movement

Hey there everyone!, I am currently working on a project in Wordpress and I was wondering if anyone has experience creating a floating widget that moves along with the page as you scroll. Any suggestions on how to achieve this? Would it involve using Javas ...

javascriptjquerycsswordpresswidget

Using Angular-Translate to Replace Variables in Title Tags

In my AngularJS project, I am using Angular-Translate version 2.6.1. One of the challenges I am facing is how to include a variable in a translated title attribute within a span element. <span title={{'translationID'|translate:'{username ...

javascripthtmlangularjsangular-translate

The integration of a HTML file generated from RMarkdown in R Shiny apps using shinydashboard is leading to tabItems malfunctioning

Challenge When integrating an HTML document generated from RMarkdown into a ShinyApp with shinydashboard, the HTML file displays correctly only when the "self_contained:" setting in the YAML section of the RMarkdown file is set to true. However, enabling ...

htmlrshinyr-markdownshinydashboard

Using icons from Bootstrap on your local machine can be a valuable asset for

When using this particular method <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> The icon is visible with this reference: <button type="reset" class="btn btn-warning cancel"> <i ...

htmlcss

Update the content of a text area with AJAX requests

Just starting out with AJAX, I'm looking to requery or perform a select *from on my database when a button is clicked in order to change the content of a textarea. How can I achieve this using AJAX? Below is the code snippet I have so far: <text ...

phpjqueryhtmlmysqlajax

Attempting to reposition a button through JavaScript functions

Need help with a school project: When the user clicks the initial login button, it should be removed and replaced by a new button that descends 100 pixels over a 2-second period. I'm looking for a more efficient way to achieve this, any assistance wou ...

javascripthtml