Member Avatar for Shravan_Bane

Hi guys,

I have tried making my college website. You can have a look at it- www.kguc.org
The site is working as intended on all the major desktop browsers. The real problem occurs while surfing the site on a mobile device. The site doesn't like the way its meant to.

Please help me out in this regards.

  • 3 Contributors
  • 2 Replies
  • 205 Views
  • 4 Hours Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

Mobile scaling problems usually come from a small set of root causes: a missing responsive viewport, one or more fixed‑width elements or images that force the page wider than the screen, and large assets that slow or break mobile rendering. correctly flagged brittle fixed measurements; called out images. The steps below focus on quick, verifiable fixes that work when retrofitting an existing site.

Add the responsive viewport and make layout and media fluid. Example meta and basic CSS to start with:

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

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
img, video, svg { max-width: 100%; height: auto; display: block; }

Serve images sized for the device with srcset/picture and use lazy loading so large desktop images aren’t downloaded on phones. Example:

<picture>
  <source type="image/avif" srcset="hero-640.avif 640w, hero-1280.avif 1280w" sizes="(max-width:640px) 100vw, 50vw">
  <source type="image/webp" srcset="hero-640.webp 640w, hero-1280.webp 1280w" sizes="(max-width:640px) 100vw, 50vw">
  <img src="hero-1280.jpg" alt="Hero" loading="lazy">
</picture>

Practical debugging and performance checklist:

  • Use browser device emulation + network throttling and run a Lighthouse audit.
  • Find overflowing elements with a quick script:
const over = Array.from(document.querySelectorAll('*')).filter(el => el.getBoundingClientRect().width > document.documentElement.clientWidth);
console.log(over.map(el => el.tagName + (el.id ? '#'+el.id : '') + ' ' + Math.round(el.getBoundingClientRect().width)));
  • Replace fixed columns with flexbox/grid, keep touch targets ~44px, avoid hover‑only controls, compress images (WebP/AVIF) and defer nonessential JS.
    Caveat: older browsers need fallbacks for picture/srcset and newer formats; keep a sensible JPG/PNG fallback. These steps address the common causes without a full rebuild and make later refinement (breakpoints, typography scaling, Bootstrap or CSS framework updates) much easier.

Recommended Answers

All 2 Replies

Member Avatar for almostbob

layout in pixels does not work
layout in any fixed measurement does not work
layout in em or % : scalar measurements that auto adjust is closer to what you probably want
the site does not work in desktop browsers either.
open in a part screen window, or any other monitor size than the one it was laid out on, and content is pushed offscreen,

the google search would be something like responsive design best practice

Edited by almostbob
Member Avatar for Member #120589

I agree with AB - we've gone beyond px measurements now. Also have a look at the rem measurement - it's relatively new and not sure if it's totally supported by mobile browsers yet. Anyhow, it relates to the root font size and thus does not suffer from nested reduction. If a browser does not support it, you can always provide a fallback.

I was reading recently that the 'easiest' method is to measure horizontally in % and vertically in rem.

Add media queries so that you have some sensible break points. A look at Twitter Bootstrap may give you an idea - they have an interactive page for RWD.

Your biggest issue, possibly, if you're "retrofitting" to include mobile, is resource size, particularly images. This has been a source of debate in RWD circles for some time. Serving smaller filesize images - if they are background images - in css is easy enough, but it's more difficult to serve an image fit for a mobile instead of a big image fit for a desktop.

Edited by Member #120589
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.