Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies


Images on a cell screen

3:02 pm on Jun 22, 2014 (gmt 0)

Preferred Member

10+ Year Member

joined:Apr 1, 2005
posts: 370
votes: 0

Some of my header images (width 500px) aren't even close to fitting on a cell phone screen. They work on my laptop, but the size of a cell phone screen is significantly different. If I resize an image to fit on a cell screen, it's likely going to be too small for the laptop and desktop screens.

3:18 pm on June 22, 2014 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
votes: 205

If you set your css to serve images at max-width: 100% they will resize themselves to fit any size. The browser will automatically resize them to fit the space they are in. BUT. You need to have a viewport setting metatag in the headers of your pages. Avoid fixed width settings for your block level elements, use % instead.

Page speed and mobile friendly design seem to be giving the edge to pages and sites where I have started switching things over to be one size fits all and you can get a good start in seeing what and how to make these changes at [developers.google.com...] where they offer a white paper .pdf download. There is a little learning, but the concepts for page building have shifted some and it is good to learn how to make it work for you.
1:09 pm on June 26, 2014 (gmt 0)

Preferred Member

10+ Year Member

joined:Apr 1, 2005
posts: 370
votes: 0

The additional css code worked great N2. You're a genius.

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members