The relative container simply sets the stacking context fro the absolute element. All nested absolute elements will be placed in respect of this parent. It is basic css and there’s nothing complex to it that you wouldn’t use in any other similar situation.
As usual context is the key and there are often many different ways to do something in CSS but it all depends on the job in hand as to which approach is best.
It would be fine inside a flexbox assuming that the anchor is not a flex item (refer to ‘context is the key’ quote above :)).
FileZilla was not my friend. Skill deficiency on my part resulted in losing my source. http://www.GamesOnHorses.com is now active. Non-trivial work remains, but it should function for curiosity purposes.
I have not taken a close look at the code, but just how the site responds to changing sizes.
The obvious thing is the header image. You need to add max-width: 100% to the h1 img though the title is a bit small at mobile size. Maybe swap the image out with a <picture> at small size to lose the surrounding pictures for just the title box.
The other thing that needs work is the menu backgrounds. A quick fix is to change background-size: 100% to background-size: 100% 100%, that will result in a bit of aspect squish/squash which I would not normally advocate, but I think you will get away with that here, it’s better than what you have.
Thank You SamA74 for the cogent feedback. I was struggling with what to do about the H1 image. I had not considered your swap-out approach. What an elegant solution.
Problem is that the heading is in the html as an img src=, not the css. I had trouble with getting my h1 text aligned into a background-image as the screen re-sized. So I chose to go with a static image. I knew it was a kludge at the time. But I am still not sure how to get around it as much as I would like my html h1 to be text.
So I made the changes to the landing page and it seems to work with one caveat.
When I use the ctrl->shift->I in Chrome to simulate mobile devices, it does not swap the src. So I need to do some more research on <picture> before I propagate the change to my other pages.
Try it like I have above. For 2 images you should not need 2 sources. Put the default image in the img and the alternative in the source with the media condition.
It’s not something I have ever dealt with, I use php includes.
I just took another look at your site and the picture element seems to be working fine. The issue being that you have not added the max-width: 100% rule to the image as I suggested.
I initially tried in Firefox, that worked, then in Chrome, there is works changing the browser width, but not in dev tools for some reason.
I have a site using the element almost the same set up as that (where I copied the example code from) and that changes in Chrome dev tools. I can’t think why this should be.
The best thing would be to check on actual devices.
I neglected to upload the updated stylesheet to my host. So I didn’t exactly ignore you, but the effect is the same.
I added the meta tag from your later post as well. The Chrome simulator still does not do what I expect in shrinking the image, but it does substitute the smaller image for the larger
In the Chrome simulator, the heading cropped right simulating dimensions 412 x 732. (In this case, the Nexus 6P). Similar results for all else. My wife was able to call up the site both on her Nook and her phone. Same symptoms.
Note also that the navigation text (Home, Games, Templates …) has lost sync with its background images.
FYI: Though not relevant for my header issue, I am using the flexbox option of css. So I will be changing the flex-direction and perhaps the order of the content.
