Member Avatar for ankit.baphna

Hi Friends,

After working for 2 days I finished my homepage design with HTML5 and CSS3 syntax.
but when I open this on my Android chrome browser everything looks messy as well as half information.

ex: I created three menu tabs but on my mobile browser i could see only one...rest may be out of screen.
+ I added text on my image they too also looks misalignment.

What do we have to do to make same code run on mobile browser as well?

Thanks,
Regards,
Ankit Baphna

  • 2 Contributors
  • 2 Replies
  • 301 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by gentlemedia

Dani AI

Generated

Common causes for a layout that looks “messy” on mobile are omitted responsive meta settings and rigid, pixel‑based sizing. The quickest corrective step is to ensure the page uses the viewport meta and a few global rules that make elements scale naturally:

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

/* sensible defaults */
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }

The three‑tab menu described by usually happens when items are fixed-width or the nav is not allowed to wrap. Two lightweight patterns avoid lots of per-element media queries: let the menu wrap using flexbox, or allow horizontal scrolling for narrow screens. Example flex approach:

.nav { display: flex; flex-wrap: wrap; align-items: center; }
.nav a { padding: 0.5rem 1rem; }

Or a simple scrollable row:

.nav { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
.nav a  { display: inline-block; }

Text positioned on images tends to break when absolute pixel offsets are used. Keep the image responsive and place the caption relative to the container, using transforms for true centering:

.hero { position: relative; }
.hero img { width: 100%; height: auto; display: block; }
.hero .caption { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 0.5rem; }

As noted, media queries are the right tool, but a mobile‑first workflow reduces the number of breakpoints: start with compact styles, use relative units (%, em, rem, vw) and apply a few broad breakpoints (for example ~480px, 768px, 1024px) rather than per‑element queries. For debugging, use Chrome DevTools device emulation and chrome://inspect remote debugging for a real Android device. Small, consistent patterns (fluid images, box‑sizing, flex/grid for layout, and a viewport meta tag) make the site behave well across phones without endless per‑element tweaks.

Recommended Answers

All 2 Replies

Member Avatar for ankit.baphna

Ok I found using @media feature we have to adapt each elements size and space.
But this is very time consuming.
example: Padding I am giving in px but for media I have to give in percentage to adapt all sizes media.

Is there any other better way to make site mobile compatible?

Member Avatar for gentlemedia

Optimzing your layout with CSS media querries to adapt for different screen sizes/resolutions is the way to go, but if you're HTML is created following best practices, then it shouldn't be that more work.

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.