Member Avatar for showman13

Good Morning All,

It has been quite some time since I've been here, but I had something pointed out to me that I haven't been able to resolve on my own yet, so I'm bringing it to the community of experts to hopefully head me in the right direction.

my website : has an issue based on the size of the monitor it is being displayed on (probably not the only issue)

I can correct the issue by simply using the ctrl- or ctrl+ to adjust it, and everything works fine, but that isn't something that I can convey to the visitors. A couple of our dealers have raised a concern over thing oversight of mine.

I'm not really into web design as much as I am into making the back end work the way it is supposed to, so please be kind in your comments.

Anyway, if you visit the site, and do the ctrl- or ctrl+ you will see what the issue is, the graphics that I have set in the right and left gutters, using CSS for positioning overlay the body of the webpage, making it difficult to impossible for people to navigate properly.

What can I do to present the pages as they should be no matter what size monitor they are being viewed on??

If this question is too vague, please let me know what you need to see, and I'll be happy to post it.

Thank you in advance for your time and direction with this.

Douglas

Edited by showman13 because: to link the url
  • 3 Contributors
  • 3 Replies
  • 261 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by showman13

Dani AI

Generated

Quick diagnosis and a few practical fixes for ’s layout issue: the left/right graphics are likely positioned out of the normal flow (absolute/fixed) while the main content has no reserved space, so when the viewport width changes (or the browser is zoomed) those gutters sit on top of the content. As suggested, a responsive approach fixes this at scale; since timelines are tight, two immediate options are provided below — a robust layout (preferred) and a quick stopgap.

Recommended (robust): make gutters part of the layout with CSS Grid (or Flexbox). That lets the main column shrink/expand without being covered.

/* structure:
<div class="wrapper">
  <aside class="gutter left">...</aside>
  <main class="content">...</main>
  <aside class="gutter right">...</aside>
</div>
*/

.wrapper {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}

.gutter { overflow: auto; }
.content { min-width: 0; } /* important: allows content to shrink inside grid */

@media (max-width: 980px) {
  .wrapper { grid-template-columns: 1fr; }
  .gutter { display: none; } /* collapse gutters on narrow screens */
}

Quick stopgap (when learning time is limited): keep fixed-position gutters but reserve space for them in the main column via padding; add a media query to remove/hide gutters on narrow viewports.

.gutter { position: fixed; top: 0; bottom: 0; width: 220px; }
.main  { padding: 0 230px; box-sizing: border-box; }

@media (max-width: 980px) {
  .gutter { display: none; }
  .main { padding: 0 20px; }
}

Additional practical tips: include <meta name="viewport" content="width=device-width, initial-scale=1"> for predictable scaling; use box-sizing: border-box; make images max-width:100%; height:auto;; avoid overflow-x: hidden as a permanent “fix” (it masks the real layout problem); and test by resizing the browser window and with DevTools device emulation at 100% zoom. ’s pointer to responsive examples is useful for patterns to copy once time allows; migrating to a grid/flex layout or a lightweight responsive framework will eliminate the overlay entirely.

Recommended Answers

All 3 Replies

Member Avatar for Member #46692

Good morning, consider studying responsive websites. A good starter would be using twitter bootstrap.

Member Avatar for showman13

Thank you Acodez for those samples of responsive web pages...

I understand the concept of what responsive design is intended to do, but I just need to find the time to learn the process to determine the device size and how to code accordingly...

Problem is currently, as it usually is, I'm working on a timeline that doesn't allow for a learning curve to study that.

Hopefully when I have finished the current project, I will be able to take some time to just study study study to prop up my aging coding abilities...

Thanks again, your post was most helpful

Douglas

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.