Site is not scaling as expected

[dutch]

I’m working on a relatively simple one-page site and I can’t get it to respond to scaling-down for mobile. The viewport tag looks right to me, and I’ve tried every variation of max-width tag I can think of. I would appreciate any pointers.

I know putting a reduced test case on CodePen is the preferred way to interact here, but (a) I don’t know how to get all the pertinent stuff up to CodePen (images, etc.), and (b) I don’t know how to reduce the problem to only the pertinent code, as I don’t know which part of the code might be causing the problem. That said, the site is http://tests.markgarvey.com/

Thanks for any thoughts.

[Beverleyh]

I don’t know which part of the code might be causing the problem.

You can narrow down the problem by commenting out logical blocks of HTML until the reduction in/removal of code leads to the behaviour you’d expect.

Conversely, you could build up the test page again bit by bit, in logical blocks of HTML + CSS, until the undesirable behaviour is (re)introduced.

This act of either stripping back or building up will point to the problem so that you can tackle it directly. Try doing that, then put the problem part in CodePen if you can’t fix it yourself.

That said, one of the basics of responsive design is that (large) fixed widths should be avoided. You can try switching them to something fluid like %, or change them incrementally at your preferred breakpoints using media queries.

[dutch]

That’s pretty much what I’ve been doing for the last couple hours–commenting out various pieces of the code, and playing with width settings, trying to isolate the problem. I was unable to find it, which is why I came here. I suppose I’ll keep looking. Thanks.

[Beverleyh]

But you haven’t taken heed of the large fixed width issue… 2 further tips about that have been given in my previous answer. If you want to look any further, try there, i.e. fluid, not fixed values, and media queries.

[dutch]

Thanks, Beverly. I’ll continue trying to track down the width problem.

[dutch]

Admittedly I’m in over my head on this, but I’ve tried every variation on the width question I could think of, to no avail. Stripped down the site, rebuilt it, also to no avail.

If anyone can see the fix and let me know what it is, I’d appreciate it.

[Beverleyh]

Folks don’t like to go poking around in the developer toolbar to access the underlying codebase of live sites – and many of us browsing the forums on mobile/tablet, simply can’t. Help us to help you, and attract more responses, by transferring it to CodePen, that way we can test/suggest live edits on the fly.

You say that you don’t know how, but it’s really quite easy, and all the other online playgrounds work on the same basis (JSBin, JSFiddle, etc) – you don’t even have to sign up for an account;

• put your HTML in the HTML area
• put your CSS in the CSS area
• put your JS in the JS area
• use absolute URLs to get the images to load from your site
• share the link in the forum

[dutch]

Thanks, Beverly. I’ll put my latest version into CodePen. I do appreciate, and need, the help. Stay tuned.

[Beverleyh]

Unfortunately I’m on holiday for a week now so I can’t say when I’ll be able to get back to the forum. Hopefully somebody else will be able to assist you.

[dutch]

Got it. If I can manage to get it into CodePen, I’ll keep my fingers crossed that someone else can give it a look. Thanks.

[dutch]

Here is the link to the project on CodePen.

https://codepen.io/Dutchg/pen/KBWpyO

I left the little JS piece in the html block because it didn’t work when I put it in the JS block. (I’m a total JS newbie.)

I’d appreciate any help in figuring out why this thing is not scaling down. I’ve tried fiddling with the width settings, but when I take out the max image settings in the css, the images, more often than not, just disappear. Thanks for any ideas.

[dutch]

Solved. In case anyone’s interested, in two spots in my css where I had

max-width:100%;
width: 1000px;

I changed to

width:100%;
max-width: 1000px;

[Author]

Posts