I'm building a simple website for a friend and I'm trying to figure out what to do to make it look nice on all devices. In particular I've got two problems for which I can't find a good enough solution:
1) on the home page, I use a photo as background for the site title and tagline. What I want (or what she wants) is the title near the top of the photo and the tagline near the bottom. On a large screen the browser doesn't use the whole photo vertically because there isn't enough text in the div to need it. So I fudged, adding <p> elements to make it longer. I know, ugly, but it worked in most places. However, on a tiny screen that fudge makes the div too tall and the photo starts to repeat at the bottom. Is there a way to tell CSS to use the whole photo but scale it to the screen, and to put H1 at the top and H2 at the bottom?
2) on another page I have a photo floating left next to a text list. Works great on a larger screen, but the photo isn't "tall enough" on a phone so the text continues below the photo, messing up the visual coherence of the list. Is there a way to make that photo stretch vertically to fill the space?
Sorry for what are probably basic questions. I'm still learning (after many years away from coding) and while I've found many terrific ways of doing things by browsing the element references online and in books, I can't seem to figure out what to do for these two issues.