Member Avatar for al2henry

I've created and maintain two sites for non profit orgs that I belong to http://www.conservancyonmayne.com & http://www.vivaldichoir.org based on Dreamweaver templates I started with many years ago. As a rank amateur I realize I've created a dog's breakfast of code that is far from "well formed" - so apologies..

The problem - the sites are not mobile friendly and the challenge of redesigning them for phones and tablets is huge and beyond my current knowledge, though I will tackle that eventually (tips on beginners' resources would be welcome) but for now I would be happy if the whole centred image would appear on a small screen as a starting point. Zoom to read is OK for now but the left side bar is missing it's first three and a bit characters and I cannot understand why this is.

This is a repost and the same holds true for a page without a sidebar as in Help is needed urgently for this subdomain specifically as I now have deadline!

Any tips would be MOST welcome! Will be delighted to contribute "rewards"

  • 2 Contributors
  • 2 Replies
  • 393 Views
  • 33 Minutes Discussion Span
  • Latest Post Latest Post by al2henry

Dani AI

Generated

A fast, practical plan for the sjp subdomain (deadline first, refactor later). Given ’s description of a simple page and ’s note that a separate mobile approach is often quickest, the pragmatic route is: (A) find the element that’s shifting the layout, (B) apply a tiny mobile-only stylesheet to the subdomain to restore the centered header image and stop the left-side clipping, and (C) iterate on the full template later.

Steps to diagnose (quick and reliable)

  • Reproduce on a phone or in DevTools device mode. Look for any element whose computed width exceeds the viewport — that’s the usual cause of horizontal shift/cropping.
  • Run a quick script in the console to highlight offenders and log their widths:
[].slice.call(document.querySelectorAll('*')).forEach(function(el){
  if (el.offsetWidth > document.documentElement.clientWidth) {
    console.log('overflow', el, el.offsetWidth);
    el.style.outline = '2px solid rgba(255,0,0,0.5)';
  }
});

Minimal CSS fixes to apply immediately

  • Make header images scale and center:
header img, .site-logo img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
  • Ensure predictable box sizing and give content/sidebar rules that collapse on small screens:
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

@media (max-width: 640px) {
  #sidebar, .sidebar { width: 100%; float: none; padding-left: 0; }
  #main, .content { width: 100%; float: none; padding: 0 1rem; }
}
  • A temporary containment step (only until the root cause is fixed):
html, body { overflow-x: hidden; }

Meta tag and workflow notes

  • Confirm the viewport meta is present in the HEAD (before heavy scripts/styles): <meta name="viewport" content="width=device-width, initial-scale=1">. If a meta tag “does nothing,” check that it isn’t duplicated, placed after inline styles/scripts, or blocked by cache. For the deadline, link a small mobile.css using a media query (or a separate mobile-only page) and fix the visible issues first; a full responsive rewrite can follow.

Recommended Answers

All 2 Replies

Member Avatar for rproffitt

Hello old neighbor. I lived in Richmond, BC for years so onwards.

OK, why not a mobile site? It doesn't have to be one site to rule them all. Some things can be ejected like quote of the day since it's off message for the site. Also, weather forecasts? Many new to smartphone/pad sites have a rough time getting the site to be "on message."

There has yet to be a magic bullet (software) to transform a site from classic to mobile. And a single site may not be the answer if a deadline is that close. Just make a mobile version.

I'm sure you're reading http://www.creativebloq.com/mobile/mobile-design-912823 and https://en.wikipedia.org/wiki/Responsive_web_design so while that's all good to head to responsive design your platform of Dreamweaver templates may have too many hooks in you to let you make a mobile or responsive site. That's why I think you need to:
a. Make a mobile site.
b. Get on message. Forget quote of the day, weather, etc.

Member Avatar for al2henry

Hi rproffitt - Thanks for looking! Yes I grant the Conservancy Home page has lots of unnecessary elements for mobile. The occasion for the repost was because I have a deadline re the sub domain of sjp - which you will understand when viewing the content. It is a very simple page with a menu bar, header image, a block of text and a footer with less important links. It may be that the css has much that is irrelevant to this page but I had hoped there was something simple that I have missed re total pixels, percentage width etc. -btw a meta viewport tag however configured doesn't seem to make any difference. Greetings from Mayne Island!

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.