Responsive Header Image in Sample Theme

[adrianne]

site: Elements of Summer

I'm trying to make the header image mobile responsive. Currently it does not resize appropriately. I'm sure there is something simple I'm overlooking but I haven't been able to figure it out yet. If there is a better way to include that image I would love to learn it by the way.

Additionally, when the screen resizes for different browser sizes I would like the header widget to move below the header image if possible. Can anyone help me out with that?

I'm probably one of those people who know just enough to be dangerous from the more code-savvy individuals on here, but I really do want to learn so I appreciate any assistance I can get!

Thank you!

http://www.elementsofsummer.com

[nutsandbolts]

I see that the image is cut off at all browser sizes, including full size. Can you tell us more about how you added the image, what size it is, etc.?

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[adrianne]

/* Logo, hide text */

.header-image .site-header .wrap {
background: url(http://www.elementsofsummer.com/wp-content/uploads/2013/12/Sm-Triangle-Logo.jpg.jpg) no-repeat left;
padding: 0;
}

Size: 768x200

Honestly I'm trying to have both that logo and the header widget for ads .. I used this method based on something I read but I've got a feeling it wasn't the best way.

Other relevant code:

/* Widget Area
--------------------------------------------- */

.site-header .widget-area {
float: right;
text-align: right;
width: 500px;
}

/* Title Area
--------------------------------------------- */

.title-area {
float: left;
font-family: Lato, sans-serif;
font-weight: 700;
padding: 16px 0;
padding: 1.6rem 0;
width: 670px;

[Author]

Posts