Generate Pro – widgetize header for mobile responsiveness

[Adam Lee Rosenfeld]

Hi, I built the following site using the Generate Pro child theme: http://waynehilsden.com/

Currently, the header is an image that includes text and a photo, but it is all one png file (the header area has been enlarged to 635 x 160 btw). I would like the header to behave as a widget, with the portrait aligned left, and the text aligned right, so that on mobile devices, the text will appear below the photo in the header.

Any advice on how to do this? Thanks.

http://waynehilsden.com/

[Sridhar Katakam]

Try using code similar to what's here: http://sridharkatakam.com/add-wide-header-lifestyle-pro/

---

Genesis Tutorials | Follow me on Twitter

[Adam Lee Rosenfeld]

Hi Sridhar - thanks so much for responding to my post. My understanding is that what you are suggesting works for images, but I want to use an image that is aligned left, with the text of the site's tagline aligned to the right. Do you know how I can do this?

[Sridhar Katakam]

http://sridharkatakam.com/show-custom-widget-area-header-using-genesis/

---

Genesis Tutorials | Follow me on Twitter

[Adam Lee Rosenfeld]

This was really helpful, but I'm not quite done. Now I have a widgetized header that is mobile responsive, but I do not know how to align the text to behave like it does in my previous header image. Below are links to two images explaining my problem. Can you show me how to code or style the widget in order to give me the "Good" line break?

Thanks!

[Sridhar Katakam]

Change the 'custom-site-title' element from span to a div like this:

<div class="custom-site-title">My view from the city of the<br><span class="red-text">Great King</span></div>

and add this CSS:

.red-text {
	color: #eb232f;
}

.site-header a {
	float: left;
  margin-right: 20px;
}

.custom-site-title {
	line-height: 1.3;
  padding-top: 25px;
}

You may need to do further adjustments for smaller widths. If you need further help, you can contact me here.

---

Genesis Tutorials | Follow me on Twitter

[Author]

Posts