CSS Responsive Killing My Soul

[ClericLady]

Hi!

I am new to this forum and in some need of help (DEAR GOD, I need an adult!) Here is the page I’m working on: http://thedappledlight.com/yoiyumeo/index8.html

I am trying to:
– have two backgrounds in different placements (one top left, one bottom fixed left)
– have my website scroll (did they get rid of this as a default?? Or am I just that rusty from my 17 year old self?)
– make the page responsive to all screen resolutions

I will shamefully admit that I have relied on smaller layouts and iframes since 2001 (which is why my links all default to a blank page). I would love some help in joining folks in the present day, concerning my three goals…..

[Beverleyh]

The first point is easy: https://developer.mozilla.org/en/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds

The second – and bear with me as I’m on a mobile and so somewhat restricted in both screen-size testing and viewing source code – I would say that scrolling is foobar’d because of this CSS; body, html {height: 100%} which is effectively saying “make the web page 100% high as the viewing browser window – no bigger, no smaller”. min-height might instead be what you’re going for; “make the web page at least 100% as high as the viewing browser window, but go bigger if needed”. But I would say that you probably don’t need either though, so try taking it out and see what happens…

But…

The lack-of doctype probably isn’t helping. Thankfully we’re in the era of HTML5 which carries with it a nice short doctype to help tell web browsers how to interpret the markup of a web page. Put this at the very top of your page, before ANYTHING (for some reason I can’t post the doctype as a code sample, or post a link because, when I do, the forum eats my post – please Google it).

With the doctype in place, things may have improved slightly on the responsive front. I see you have your viewport metatag in place for mobile, which is a good start, but the use of tables for layout… not so good… especially with the varying fixed width attributes in place. Saying that, these sorts of table attributes aren’t supported in HTML5 (thanks to that doctype) so will probably be ignored now. If you want them back, switch to CSS instead, so;

<table width="900">

becomes;

<table style="width:900px">

But…

I wouldn’t even go there. Leave tables for statistical data and convert to a div layout (or section, article, and aside elements if you want to make full use of some of new HTML5 elements now available to you). This resource may help you with the layout side of things http://learnlayout.com/
Traditionally, it was done with floated divs, but flexbox is taking over as the modern layout approach (until CSS Grid gets more support) so you might want to go with that https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Good luck with your project.

Note: I’m off on holiday in a few hours, but if you have any further questions, hopefully one of the other regulars can leap in until I get back on the 12th. I might be able to quickly check the forum in the meantime, but I have no idea how WiFi will be until I get there.

[Beverleyh]

PS – “media queries” are something else you should look in to. They’ll allow you to change layout at different screen sizes.

[ClericLady]

AAAAAHH!!! Thank you, thank you, thank you! You have just helped with everything!

[ClericLady]

Beverley,

Thank you SO much for such a comprehensive answer. I wish I’d gone on this forum sooner. I took much of your advice (http://thedappledlight.com/yoiyumeo), and will try implementing your other suggestions (such as media queries) when I’m not sick of the sight of squiggly brackets =P.

Enjoy your holiday!!

[Beverleyh]

Just checking in… looks like you’re getting back into the swing of web-things with gusto @ClericLady – the site is looking MUCH better on mobile :) I had a quick snoop around; read your ‘about’ page and coo’d over your 2 kitties while relaxing in the sun… By spooky concindence, we went to see an adaptation of the Cats stage show a few night ago. Alas, no one brought me any chipmunks, but we did spy a few squabbling over nutty treats on the beach yesterday. Chipmunks on the beach? Who’d have thunk it! But apparently it’s a thing here on Jandia beach! :D

[Author]

Posts