What could be causing the extra space around my body on mobile devices?

I am currently delving into the world of responsive design, starting from square one. My aim is to create a minimalist webpage with no side margins. However, when viewing it on an iPhone, there still seems to be a significant white margin on either side. The CSS code I have implemented thus far is as follows:

    div#header_image img{
        max-width:100%;
    }
    div#chart img{
        max-width:100%;
    }
    div#Chart_place{
        margin-bottom:2em;

    }

    @media screen and (min-width: 800px) {
        div#container{
            width:800px;
            margin: 0 auto;
        }
    }

    @media screen and (max-width: 800px) {
        div#container{
            width:max-width;
            margin: 0;
            padding: 0;
        }   
    }

    body{
        font-family:Verdana, Geneva, sans-serif;
        margin:0;

    }
    h1{
        font-size: 1.5em;
        margin-top:2em;
        margin-bottom:2em;
    }
     ul{background-color:white;}
     div#Feesboek_button{
    }
    input[type='text'], textarea {font-size:16px;}

Where could I potentially be going awry?

cssresponsive-design

Answer №1

UPDATE: I have revised my previous answer and provided an alternative solution for you:

html,body { margin:0; padding: 0; }

#container {
  max-width: 800px;
  padding: 0;
  margin: 0 auto;

  /*for ilustration purposes*/
  background-color: #f13700;
}

@media (max-width: 800px) {
  #container {
    padding: 0;
    margin: 0;
  }
}

Here is the updated code to ensure there are no margins on screens with a width of 800px or less.

Preview the code here: http://jsfiddle.net/fCzT9/ Fullscreen view: http://jsfiddle.net/fCzT9/embedded/result/

Original Answer:

Your CSS currently includes:

@media screen and (min-width: 800px) {
    div#container{
        width:800px;
        margin: 0 auto;
}

This will be applied to any device with a minimum screen width of 800px. You have specified a fixed width of 800px for the container, centered using margin: 0 auto. Keep in mind high-density screens like Retina displays on iPhones may impact this layout.

To address your concern, consider the following adjustment:

@media screen and (min-width: 800px) {
    div#container{
        width: 100%;
        max-width: 80em;
        margin: 0 auto;
}

In this scenario, the maximum width is set to 80 times the base font size (16px), resulting in 1280px. The container will scale to the available width within this limit. Adding box-sizing: border-box can prevent issues with padding causing overflow past the maximum width on smaller screens.

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

utilize makeStyles to modify button text color

Initially, my button was styled like this: style={{ background: '#6c74cc', borderRadius: 3, border: 0, color: 'white', height: 48, padding: '0 30px', }}> It worke ...

javascriptcssreactjstypescriptmaterial-ui

Disable the outer div scrolling in VueJS, but re-enable it once the inner div has reached the bottom of

I am currently working on a webpage that contains multiple divs stacked vertically. Here is the concept I am working with: Once the scrollbar reaches the bottom of the first div, the outer scrollbar will be disabled and the inner scrollbar will be enabled ...

javascripthtmlcssvue.js

Error: The selector "button" cannot be used in its current form as it is not pure. Pure selectors must include at least one local class or ID

<button onClick={() => resetBoard()}> Reset Board </button> While trying to import an external CSS file as a module, I encountered a problem. The CSS file looks like this... button { background-color: ...

cssnext.jssyntax-errorstylingcss-modules

Applying CSS blur filter to container without affecting its content

I'm trying to create a hover effect where an image within a parent div transitions into a blurred state. However, I've run into an issue where if the image is set to 100% width/height of the parent div, there is a visible bezel of the parent&apos ...

htmlcssfiltercss-transitionsblur

What is the Process of Rendering CSS/HTML in Web Browsers?

I have a simple question that I haven't been able to find an answer for despite my efforts on Google and Wikipedia. Perhaps I'm not wording it correctly. My query is regarding how the combination of CSS and HTML is displayed on-screen and in a b ...

htmlcssvectorbitmap

Aligning two lines next to a radio button using HTML and CSS

I'm facing a challenge where I want to align two lines in the middle of a radio button. Despite my efforts, I am able to line up the top line but struggling with the bottom one. I prefer not floating the radio button as it's being styled using a ...

htmlcss

Exploring the Features of Bottom and Right in jQuery

Here is a snippet of jQuery code that I included in a sample program: $('#left').click(function(){ $('.box').animate({ left: "-=40px", }, function(){/* End of Animation*/}); }); $('#right ...

jquerycss

When you hover over the page, the content shifts to reveal a hidden div

Trying to figure out how to show additional content when a photo is hovered over without shifting the rest of the page's content placement? Looking for alternative solutions rather than using margin-top: -22%. Here's a link to the website in que ...

javascriptjqueryhtmlcss

Adjust the size of a menu by modifying its width

Hey everyone, I recently joined this website and I'm still learning how to code. My current project involves creating an off-canvas menu, but I've come across a few challenges. Firstly, does anyone know how to adjust the width of the menu when it ...

htmlcssmenuoff-canvas-menu

How can you adjust the dimensions of a child div?

Hey there! I've got a div called bat. #bat{ width:50%; height:50%; } Here's the HTML: <div id="bat">dynamic div will appear here</div> When dynamic content is placed inside the div and it's larger than #bat, th ...

jquerycss

The table is not properly displaying within the parent scrolled div due to issues with the fixed positioning

Apologies for any language barrier. I am encountering an issue with a PHP page that includes a table meant to be displayed as position:fixed; however, it consistently appears above the scrollbars and does not stay within the parent div. View screenshot he ...

htmlcss

The main page wrapper will be centered on all devices except for tablets, where it will appear

I have set up a main container, #main, for my page content with a central position. It is positioned absolutely to create some space above the container. Centering is achieved using negative margins and left:50% instead of margin:auto. However, the issue a ...

androidhtmlcss

Tips for customizing styles when an element is being dragged over in Material-UI?

If I want to alter the backgroundColor when hovering, I can utilize sx={{"&:hover":{backgroundColor:"yellow"}} Is there a way to adjust the backgroundColor on dragover? It appears that sx={{"&:dragOver":{backgroundCol ...

cssmaterial-uidom-events

Reducing div size when clicked - Using JQuery version 1.9

I am looking to make a specific div shrink in size, while keeping all the data visible, each time a user clicks on a certain icon with the class legend-icon. For example, I want the div with the ID #Chart to shrink when clicked. This is the HTML code: &l ...

javascriptjquerycssjquery-animate

Having trouble centering an icon in a cell within AG Grid?

I am struggling with aligning my checkmarks within the cells of my AG Grid. Currently, they are all left aligned but I need them to be centered. Adjusting the alignment for text is not an issue, but I can't seem to center the material icons. It appear ...

cssangularag-grid

Hovering over the Instagram icon will reveal a stunning visual effect

I am looking to change the appearance of my Instagram icon when hovering over it. I want the background to turn white and the icon to become colored. Here is my code snippet from Footer.js : <a href="https://www.instagram. ...

cssreactjsinstagram

What would you name this particular element?

I want to create a unique slider design but I'm unsure where to begin or how to search for information because I don't know the correct terminology. Does this type of slider have a specific name? I heard about Marquee, but that seems like someth ...

javascripthtmlcssweb

Ensure that the content fills the entire height of the container and include a scrollbar

I'm currently utilizing CKEditor () and have developed my own customized file browser. The issue I'm encountering is that when the filebrowser is opened, it appears in a new popup window without scrollbars. I reached out for support through a ti ...

cssheightckeditor

React beautiful dnd and Material UI list encountering compatibility problem

I recently encountered an issue while using react beautiful dnd to create a rearrangeable Material UI List. Everything was working correctly, except for the ListItemSecondaryAction within the list. When dragging a list item, the ListItemText and ListItemIc ...

javascriptcssreactjsmaterial-uireact-beautiful-dnd

Switch off any other currently open divs

I'm currently exploring a way to automatically close other div's when I expand one. Check out my code snippet below: $( document ).ready(function() { $( ".faq-question" ).click(function() { $(this).toggleClass('open'); $(this ...

javascriptjqueryhtmlcss