Auto resize for screen width

[jtooth]

Hi! I am on the Adorable theme. I have customized it myself and feel like I know my way around css pretty well, but I can't seem to figure out how to make my site fit individual screen sizes. It looks fine on my screen but on a few other computers I have tried the sides are partially cut off so that it isn't entirely in the frame. I have tried to add width:100% in a few different places but I am either doing the wrong thing or adding it at the wrong place. I would really appreciate any help! Thanks!

http://www.millionmoments.net

[Spanka]

Hey dude,

In the past, I had similar issues - I know where you're at. My cause was that I thought I knew css, until I started learning all the responsive techniques...then I realized how far short of the mark I was 🙂 I'm still terribly short, but less short than I was 12 months ago! Let's see here...

First up - a good set of media queries...they are commonly used by another framework for another CMS, but they target pretty much everything nicely. When all else fails, fall back on these puppies to fix it up for certain screen sizes and ranges. When I do some work, that goes straight into my code because it will be used EVERY project. Guaranteed.

// Large
@media only screen and (min-width: 1200px) {}
// Desktop
@media only screen and (min-width: 960px) and (max-width: 1199px) {}
// < Desktop
@media only screen and (max-width: 1199px) {}
// Tablet
@media (min-width: 768px) and (max-width: 959px) {}
// < Full Tablet
@media (max-width: 767px) {}
// Tabs, not phones
@media only screen and (min-width: 481px) and (max-width: 767px) {}
// Phones - large
@media only screen and (max-width: 480px) {}
// Phones - small
@media only screen and (max-width: 330px) {}

css tweaks...

1. Set your #header background-size to "contain".
2. Set #header max-width: 100% (you will probably need to do that a LOT on block divs that have their width in anything except % and every-single-freaking-image-on-your-site).
3. Get rid of that h1 up there man - it's behind the image (hidden) and does nothing 🙂 I'd recommend just replacing the whole header section to be honest - img, not background image! if not, then you'll need....
4. #header needs a min-height declaration on it - get rid of the fixed height. Yeah, I know its easier, do it anyway. You'll need the above media codes to scale it at different sizes. Sorry I don't have the time to figure out why that header is setup that way!
5. Also on your header background, you'll probably want to center it. Might end up lookin like this:

#header {
background: url(http://millionmoments.net/wp-content/uploads/2013/04/cropped-logoe.png) 50% 0 no-repeat;
background-size: contain;
min-height: 200px;
}

bonus tip: at 480px and below, send every image full width - 100% all the way baby. Minimise padding/borders (still keep design & keep it clean of course) but yeah, make them full width blocks. Sexier.

EDIT: if you rip out the H1, make damn sure you put it somewhere else AND it appears on every page AND is relevant to that page AND is unique to that page. Just realised I hadn't warned to you put it BACK somewhere else if you rip it out 🙂

[Author]

Posts