Optimizing css stylsheet for different resolutions

[sammiedawg]

I am working on building a blog. It is a simple blog with 3 columns.

When I change the width below from 86% to 75%, the middle (main) column looks perfect on my computer but then looks all out of wack on a different computer under a different resolution.

Is there a way that I can "define the width in concrete" so that the middle column looks the same under different resolutions?

Thanks



#doc {


background-color: #ffffff;

padding:0px;
width: 86%;
}

[sammiedawg]

Or is there a way where I can do the following in css...

if resolution is 800+, then set width at 86%

if resolution is 420+, then set width at 75%

[entrecon]

Can't you set the width in px too instead of using % ?

[rainbore]

You can use media queries in your stylesheet to control the display. While Internet Explorer didn't support them until IE9, this is not often an issue for checking screen width since the devices with limited dimensions all rely on compatible browsers.

 @media screen and (min-width:420px) {
#doc { width: 75%; }
 }

 @media screen and (min-width:800px) {
#doc { width: 86%; }
 }

Searching on "media queries" should point you to some tutorials. Good luck!

[Builder]

That is just sweet! I'll be putting that in my bag-o-tricks. I can see lots of potential in mobile browsers there.

[tpoynton]

It is precisely these posts that keep me on this forum, thanks Rick!

[sammiedawg]

Thanks Everyone.

Is it possible to apply this same "@media screen" width concept to images?

For example, right now I set the size of my image as width="612" height="559". However I would like the size of the image to adjust accordingly alongside the resolution.

for example-
Access blog on phone or tablet = smaller image
Access blog on desktop = larger image

Thanks!!

[rainbore]

The short answer is yes, of course. But this is one of many "God is truly in the details" issues you face in creating a site that's both desktop and mobile friendly. I'd suggest you start with this article on Combining Meta Viewport and Media Queries which is helpful because smart phones do not natively constrain themselves to the dimensions of their screens in pixels. They're perfectly happy to squeeze the page to fit the screen and let the user zoom in and out. Then, with that under your belt, you can check out another article, Responsive Web Design: 5 Handy Tips that has a good discussion on handling images for mobile devices.

[sammiedawg]

I have a 3-column wordpress layout (css). It is a mess under different resolutions. The widths of the 3 columns all mesh up under different resolutions

But for other blogs/sites that use 3-column wordpress layouts, this does not happen. Everything (images, columns, etc) decrease or increase in proportion to the resolution.

Is it because I did not define the width of the 3 columns? If so, how do I go about doing so? In the css style sheet?

[sammiedawg]

I want to define a fixed-width for each of the 3 columns

thx!

[rainbore]

I can't be sure what the problem is without seeing the code, but if you want a fixed width for each of the columns then you should certainly define them.

Be sure to check out those two articles I suggested above. They will give you a good sense of what's involved in creating a site that dynamically changes depending on the user's screen dimensions using what they call "Responsive Design". It's not for everyone, though. Unless your site has the potential get a substantial amount of mobile traffic, I wouldn't sacrifice a solid design that works well on desktops and laptops. Smartphone users can still access those sites. It's just less convenient because they have to zoom in and out. Good luck!