Member Avatar for Jeff_7

The website I'm building is but I'm having problems make the site fit to all computers without zooming in and out. Any ideas?

  • 3 Contributors
  • 3 Replies
  • 240 Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by Jeff_7

Dani AI

Generated

Good start, — and sensible pointers from and . To stop users having to zoom, move away from fixed px layouts and make the page responsive: set the viewport, use a flexible container, make images/embeds fluid, and switch column counts with media queries. Below are small, practical snippets and troubleshooting tips you can apply immediately.

Add this to the head so mobile browsers render at the device width (prevents unwanted zoom):

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

A few base styles to avoid overflow and make media scale:

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

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

A simple flex grid that converts 3 → 2 → 1 columns using media queries (implements ’s idea concretely):

.row { display: flex; flex-wrap: wrap; margin: -8px; }
.col { padding: 8px; flex: 1 1 33.333%; min-width: 240px; }

@media (max-width: 900px) { .col { flex-basis: 50%; } }
@media (max-width: 600px) { .col { flex-basis: 100%; } }

Make embedded maps or social widgets responsive (answers ’s FB/map concern) with an aspect-ratio wrapper:

.responsive-embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.responsive-embed iframe { position: absolute; top:0; left:0; width:100%; height:100%; border:0; }

Troubleshooting checklist: remove hardcoded widths/heights in HTML, look for elements with large px widths (images, iframes, plugin code), test with browser DevTools responsive mode, and temporarily add outlines or * { outline: 1px dashed rgba(255,0,0,0.15); } to spot overflow. If a widget insists on fixed width, wrap it and use the responsive-embed pattern or load a plugin variant that supports fluid sizing.

These steps will convert a fixed layout into a resilient, multi-width layout that “fits” desktops and smaller screens without manual zooming.

Recommended Answers

All 3 Replies

Member Avatar for ryantroop

you have a couple options... none of them are particularly appealing...

the easiest is to do some media queries and change objects on the page as necessary.

The other way is to make a "fluid" design, and redo everything with % or javascript resizing.

Member Avatar for //Gonz

using javascript you'll be able to show and hide columns depending on the width of the browser window the user is viewing your page on.
as for text elements, you could set a percentage width and a min-width and, if the height is explicitly set, the element will resize to fit the text inside it.

you could also put the facebook thing below the google maps to make it a 2 column rather than a 3. There's no need to add a 3rd column just for the fb thing.

Member Avatar for Jeff_7

Thanks for the input, I really appreciate it. This is the first page I've done and I find it looking really shoddy, so everyone's help is awesome!

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.