Member Avatar for gopi17

okay....i've creating a web base application...its running fine on my computer...but now, i wanna run it in a handheld...the size is too big...so, i converted it using doing this... what happens is, my background goes missing and the size remains the same...can someone guide me...thank you in advance

<LINK href="web.css" rel="stylesheet" type="text/css" media="handheld"/>
Edited by gopi17 because: error
  • 3 Contributors
  • 5 Replies
  • 102 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by jwmollman

Dani AI

Generated

For : the symptom you describe — background disappearing while the layout still looks like the desktop version — usually means the mobile stylesheet or rules you expect to apply aren’t actually taking effect, or a desktop-only rule is forcing a fixed width. is right that assets and CSS need work; is right to think about how devices render differently. Below are targeted checks and fixes that narrow the real cause.

Confirm which stylesheet and rule the device is using (use a device emulator or remote debugging and inspect the Network and Computed Styles). Common culprits: a background rule being overridden, a property mobile engines ignore (for example some engines treat fixed background attachment differently), container elements with fixed pixel widths, or a wrong image URL/case mismatch on the server. Open the background image URL directly in the device browser to rule out path, permission, or proxy/data-saver blocking. Replace rigid pixel widths with fluid ones (percent or max-width) so the layout can shrink.

Quick example of progressive fixes to make backgrounds and layout adapt:

.container { width: 100%; max-width: 980px; margin: 0 auto; }
.page-bg {
  background-image: url("/assets/bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
@media (max-width: 480px) {
  .sidebar { display: none; }
  .content { padding: 8px; }
}

Also check file-name case sensitivity (works locally on Windows but breaks on Linux servers), and test with the image removed to see if a plain-color fallback renders. For debugging help and examples see MDN on background sizing (background-size) and Chrome’s remote debugging docs (Remote Debugging).

Recommended Answers

All 5 Replies

Member Avatar for pritaeas

Just adding media=handheld is not enough, you'll have to adjust your CSS file too. Usually means creating new smaller images.

Member Avatar for pritaeas

Just adding media=handheld is not enough, you'll have to adjust your CSS file too. Usually means creating new smaller images.

Member Avatar for pritaeas

Just adding media=handheld is not enough, you'll have to adjust your CSS file too. Usually means creating new smaller images.

Member Avatar for gopi17

i see....by smaller images u mean the fonts, images, tables and everything?

Member Avatar for jwmollman

If you mean designing your site compatible for viewing on iPhones and the like, it should just be able to scale accordingly to the device's resolution. If not, then you will have to resize images to fit a smaller resolution. You might want to send the user to a new mobile version of your site based on which mobile browser they are viewing your site on.

I'm new in the mobile development area myself. I am working on a mobile version of my company's website for iPhones and I am working with HTML5 and the <meta name="viewport"> tag and all that. I don't know if you'll have to incorprate that into your site.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.