Eight theme enlargement ?

margaretrosestringer · Member · Oct 21, 2014 at 7:03 pm
Copy link

Add topic to favorites
I put this into the Themes forum, but you haven’t been there since I did. So here it is, nice and new, and tagged correctly, Rich …

I would like both content and sidebar areas to be widened: is this feasible in the context of Eight’s being responsive, please ?

The blog I need help with is: (visible only to logged in users)
designsimply · Member · Oct 22, 2014 at 12:26 am
Copy link
Looks like the content areas like #primary and #secondary are percentage based in the Eight theme, so you should be able to adjust the parent container for those (the #main element) and the other elements will adjust automatically. Here is an example I worked on for you that
```
@media (min-width: 960px) {
	#main {
		width: 960px;
	}
}
```
You can experiment with the 960px number to see what works best for you.

Note that the header image won’t adjust automatically, but you can try stretching the image in different ways. Here is an updated example using the background-size property so you can see how it works:
```
@media (min-width: 960px) {
	#main {
		width: 960px;
	}

	#primary #content {
		background-position: center -20px;
		background-size: contain;
	}

	#primary #content .post {
		background: #fff;
	}
}
```
To learn more about media queries, go to http://en.support.wordpress.com/custom-design/custom-css-media-queries/

To learn more about the background-size property, I think this is a good article: http://www.sitepoint.com/css3-background-size-property/
margaretrosestringer · Member · Oct 22, 2014 at 2:48 am
Copy link
Oh ! Rich busy, but Sheri to the fore ! :-)
Thanks for this – very much. Works beautifully, of course.
One last thing: would you take a gink and tell me if you think I should move the title-box and the search-box out to the edges, please, Sheri ?
margaretrosestringer · Member · Oct 22, 2014 at 10:59 am
Copy link
No, it doesn’t work beautifully, after all.
It has meant the header’s being artificially enlarged and swallowing up some of my page headers – and I do not have the knowledge to deal with that.
Rich ? – please ?
thesacredpath · Member · Oct 22, 2014 at 2:51 pm
Copy link
M.R., this seems to work, with the exception of the red background behind the site title getting a bit wider. The following adds one additional rule to the Media Query to size the header area also. See what you think.
```
@media (min-width: 960px) {
	#main {
		width: 960px;
	}

	#primary #content {
		background-position: center -20px;
		background-size: contain;
	}

	#primary #content .post {
		background: #fff;
	}
	#masthead {
		width: 960px;
	}
}
```
thesacredpath · Member · Oct 22, 2014 at 2:53 pm
Copy link
Scrolling to the bottom I notice the footer stuff needs to be widened as well. Make the last rule in the above code like this so that it also widens the footer.
```
#masthead, #site-info {
		width: 960px;
	}
```
margaretrosestringer · Member · Oct 22, 2014 at 6:30 pm
Copy link
http://snag.gy/4UKOi.jpg
I haven’t done the footer yet, owing to the fact that the page title are still being swallowed up in the base of the header image …
Ain’t it WEIRD ?!
margaretrosestringer · Member · Oct 22, 2014 at 6:32 pm
Copy link
Done the footer as well, now. Saved, so that you can see properly without having to use a snaggy screengrab.
designsimply · Member · Oct 22, 2014 at 6:49 pm
Copy link
Thanks for including a screenshot! If you can also include a link to where a screenshot was taken from (or include the whole browser window), that can also be super helpful.

What is the link where this screenshot was taken?
http://snag.gy/4UKOi.jpg

If you’re having trouble with the placement of the image, then background-size might not be the CSS property you want.

Try removing this part entirely:
```
#primary #content {
	background-position: center -20px;
	background-size:contain
}
#primary #content .post {
	background: #fff
}
```
Then, if you’d like to try simply using a different header image instead of stretching the one that was uploaded in the Appearance > Customize > Header section, you could do that by uploading a new image to your media library that is the dimension you want, copying the image URL, and then adding it to this code example:
```
#primary #content {
	background: #fff url(YOUR_IMAGE_URL) no-repeat center top;
}
```
If you stick with 960px as the width, then a 960 x 268 px image would fit well. If you change the 960px width, then you would want to adjust your image size accordingly.
margaretrosestringer · Member · Oct 22, 2014 at 8:08 pm
Copy link
You are very kind, Sheri – and I thank you for the time spent.

Would you be deeply offended if I wait for Rich ? – I’m not in a hurry; and have become very used to his input, as he to my endless requests.
thesacredpath · Member · Oct 23, 2014 at 4:26 pm
Copy link
M.R. give this a try.
```
.page #primary #content, .archive #primary #content {
    padding-top: 310px;
}
```
This targets pages and archive page types (archive, category, tag) only since I don’t see this issue on the main page or single post pages.
margaretrosestringer · Member · Oct 23, 2014 at 5:54 pm
Copy link
No, you’re quite right, Rich – just the pages you mention.

Fantastic ! – this is stuff I simply can’t work out for myself, not having the requisite mindset (to put it mildly).

Thanks so much !!! :)
thesacredpath · Member · Oct 23, 2014 at 9:38 pm
Copy link
You are welcome.

No items found.