Member Avatar for Yarra

www.icypixel.net <---- My website

So the homepage on different computers is resized for some reason. On Macs it's perfect. But on iPads and PCs the homepage looks zoomed in and misplaced.

My CSS is below.

http://pastebin.com/A7mKcqFA

The code tags were not working so I had to use pastebin sorry for the inconvenience.

So basically how do I make it so everything resizes to the appropriate resolution to the computer I guess.

Thanks in advance

Edited by Yarra
  • 2 Contributors
  • 2 Replies
  • 86 Views
  • 4 Hours Discussion Span
  • Latest Post Latest Post by Yarra

Dani AI

Generated

reported the homepage looks fine on Macs but appears zoomed/misplaced on iPads and PCs and that the bottom bar sometimes overlaps the main logo; did not see the problem in Chrome on a PC. That combination usually indicates a layout/scale issue (missing viewport, rigid pixel widths, or absolute/fixed positioning) rather than a browser bug.

Quick checklist to apply in order:

  • Confirm a standards doctype (<!DOCTYPE html>) is present.

  • Ensure a responsive viewport is declared:

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

  • Replace rigid wrapper widths with a fluid wrapper and make media scale:

    .container { max-width: 1200px; width: 100%; margin: 0 auto; box-sizing: border-box; }
img, .logo, .btn { max-width: 100%; height: auto; display: block; }

  • If the bottom bar is position: absolute check its positioning context: the intended parent should have position: relative;. Consider a flow layout (flex/grid) or position: fixed for a sticky footer instead of absolute offsets so it cannot overlap the logo.

Quick debugging steps: reproduce the issue in Chrome DevTools device mode (or Safari remote debugging for iOS), add a temporary outline (* { outline: 1px solid rgba(255,0,0,0.12); }) to spot overflowing elements, and strip the page to a minimal test file containing only the logo and bottom bar CSS. Reintroduce rules until the overlap reappears — that pinpoints the culprit (common offenders: fixed pixel widths, negative margins, transforms, or unexpected absolute positioning). On iOS also check -webkit-text-size-adjust if text scaling is changing layout, but avoid disabling accessibility without reason.

Further reading: MDN — Viewport meta tag and MDN — Responsive design basics.

Recommended Answers

All 2 Replies

Member Avatar for JorgeM

I visited your site using Chrome on a PC... didnt find any obvious issues. What exactly do you see happening on the different browsers.

Member Avatar for Yarra

The bottom bar overlaps the main logo. Sometimes the buttons are not visible. Gone off margin for instance.

Edited by Yarra
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.