CODEWITHSUNDEEP
htmlcss
vslateart
vslateart

Reputation: 15

How can I get my website to automatically adjust to fit different screensizes?

I'm trying to get my website to automatically adjust to fit the users screen, including on much smaller screens, such as the iphone5s. Everything was created on a 24" screen with the monitor resolution of 2560 x 1440.

I created a container block that holds all of the content and is centered. My current CSS for this is below: (The .background is the CSS for the block that the content is centered on and the .container holds the entire HTML.) Right now, the screen seems to be zoomed in on the iphone5 and in order to see the content, the user has to scroll to the right. I've tested this on another computer as well the other day and it has this same issue. Also, I use this meta tag in my HTML: 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Does anyone see a problem in my CSS that is pulling the content to the right and why the content is so large, requiring a zoom out before viewing on handheld devices? 

.background {
margin: auto;
padding: auto;
border-style: solid;
border-width: 100px;
border-color: #30333B;
background-color: #30333B;
border-radius: 7px 7px 7px 10px;
}
.container {
    margin-left:auto;
    margin-right:auto;
    width:1200px;
}

Upvotes: 1

Views: 640

Answers (2)

mix3d
mix3d

Reputation: 4333

There are a few problems at hand here. On Mobile devices, especially iOS devices with retina screens, it renders everything at 2x the normal pixel values. the iPhone 4s, for example, has 640 pixels wide, but only appears as 320 wide. Furthermore, there is the concept of a viewport. There is lots of material online about this, so rather than re-explain it, see the following URLs that explain it better, with examples:

http://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

TLDR: add the following to the header of your html page

<meta name="viewport" content="width=device-width, initial-scale=1">

Cheers!

EDIT:

The other answers regarding layout platforms that use % values to scale to the screen instead of hard pixel values (good for comparing against devices like iPad that is max 1024px wide), or css media queries to change the container width depending on the size of the screen, are also good things to consider when building a responsive (google the term) website.

Upvotes: 1

bpeterson76
bpeterson76

Reputation: 12870

To save a ton of time, I highly recommend using Bootstrap's grid system. It allows you to define multiple div widths that can "stack" or "pull" as you define. There's a short learning curve, but it's the one that most easily handles adaptive resizing out of the box.

The grids are based on a 12 column system. So if you define one at 4 columns, the second (or third or fourth) have to add to 8, for example. The columns auto adjust based on screen width, but there's always 12 on the screen. You can tell it to change to 12 columns in a div at mobile sizes, for example, just by adding a second definition with col-xs in the class. It's all really well defined here

An example of a fluid container with a 2/3rds, 1/3rd layout that would collapse to 1 over 1 div at 100% each on small devices:

<div class="container-fluid">
  <div class="row">
     <div class="col-md-8 col-xs-12">bigger</div>
     <div class="col-md-4 col-xs-12">smaller</div>
  </div>
</div>

Upvotes: 0

Related Questions