Good lesson in responsive/mobile design: How to get banner elements responsive

[Carla the Moose]

I'm using the eleven40 Pro theme and Firebug. Here's the website:

Mystery author's website

I needed to get my mom's website done in time for an event she's attending today. So I just focused on how it looks on a computer. We both have Macs and things look as they should.

As expected, when I checked the website on my iPad just now, the different elements of the banner aren't responsive. I would love to learn how to do this properly.

Since I always find I'm clicking on images in people's banners, only to find they aren't links, I wanted to make the two book covers in her banner links. I'm also going to make her photo a link to her About page. Then there are the Simple Social icons, and the background image with Shakespeare and the text.

The only thing that's responsive are the social media icons.

Also, the site title isn't responsive.

I'm new at positioning elements within the banner. I used pixels and am wondering if there's a better way to do that. Can someone please help me learn how to make these elements responsive on mobile devices? I'd sure welcome the lesson, but more importantly it needs to be nice for site visitors.

Thank you!

[Carla the Moose]

I thought I would work on the site title first. It's not reducing in size on the iPad and gets cut off. So clearly it's something I did.

:o)

I followed a Genesis tutorial for changing the site title's size. It was pretty straight forward. I would welcome some help with this.

[Carla the Moose]

I am receiving some wonderful help from a forum participant. This is a media query and responsiveness issue. Too much to post here, so I thought I'd go ahead and close this topic.

[Author]

Posts