Jane Theme Responsiveness

[pperkins81]

I've noticed a problem with the Jane theme I'm hoping someone can help me fix. When the browser is at certain sizes, the header widget (for me, Genesis eNews Extended) goes from one size to a much larger size, covering the header logo. Is there some way to fix the widget to a specific size, or to change the size at which it goes from appearing only on the right side of the header to appearing below the logo? I've tried to mess around with the widths in the stylesheet, but have had no such luck.
Thanks,
Paul

http://paulperkins.com

[Sridhar Katakam]

Add the following at the end of child theme's style.css:

@media only screen and (max-width: 1139px) {

	.site-header .enews-widget {
		width: 360px;
	}

}

@media only screen and (max-width: 1023px) {

    .site-header .widget-area {
		width: 620px;
	}

	.title-area {
		width: 300px;
	}

    .header-image .site-header .wrap {
		background-position: left top;
	}

}

@media only screen and (max-width: 939px) {

	.site-header .widget-area,
	.title-area {
		width: 100%;
	}

	.header-image .site-header .wrap {
		background-position: center top;
	}

	.site-header .widget-area {
    	margin-top: 2rem;
	}

	.site-header .enews-widget {
    	float: none;
    	margin: 0 auto;
	}

}

@media only screen and (max-width: 395px) {

	.site-header .enews-widget {
		width: 280px;
	}

	.enews-widget input[type="submit"] {
	    font-size: 1.3rem;
	}

	.header-image .site-header .wrap {
	    background-size: contain;
	}

	.header-image .site-title a {
	    min-height: 150px;
	}
}

@media only screen and (max-width: 320px) {

	.header-image .site-title a {
	    min-height: 130px;
	}

}

---

Genesis Tutorials | Follow me on Twitter

[pperkins81]

Much better! Thanks for your help. Is it possible to keep the links at the top left from moving to the center until the logo and widget move to the center? Also, it looks like the white header area grows by a few pixels when the links move from the top left to the center.

[Sridhar Katakam]

Replace the earlier CSS with

@media only screen and (max-width: 1139px) {

	.site-header .enews-widget {
		width: 360px;
	}

}

@media only screen and (max-width: 1023px) {

    .site-header .widget-area {
		width: 620px;
	}

	.title-area {
		width: 300px;
	}

    .header-image .site-header .wrap {
		background-position: left top;
	}

	.genesis-nav-menu,
	.site-description,
	.site-header .title-area,
	.site-header .search-form,
	.site-title {
		text-align: left;
	}

}

@media only screen and (max-width: 939px) {

	.site-header .widget-area,
	.title-area {
		width: 100%;
	}

	.header-image .site-header .wrap {
		background-position: center top;
	}

	.site-header .widget-area {
    	margin-top: 2rem;
	}

	.site-header .enews-widget {
    	float: none;
    	margin: 0 auto;
	}

	.genesis-nav-menu,
	.site-description,
	.site-header .title-area,
	.site-header .search-form,
	.site-title {
		text-align: center;
	}

}

@media only screen and (max-width: 395px) {

	.site-header .enews-widget {
		width: 280px;
	}

	.enews-widget input[type="submit"] {
	    font-size: 1.3rem;
	}

	.header-image .site-header .wrap {
	    background-size: contain;
	}

	.header-image .site-title a {
	    min-height: 150px;
	}
}

@media only screen and (max-width: 320px) {

	.header-image .site-title a {
	    min-height: 130px;
	}

}

---

Genesis Tutorials | Follow me on Twitter

[pperkins81]

Great. For some reason, the header still expands in size when the sidebar widgets adjust to underneath the content. I really appreciate your help.

[Author]

Posts