[Theme: Twenty Thirteen] Reduce Site Width

Technically it’s not a child theme of TwentyThirteen, but a derivative, meaning they took the code of TwentyThirteen and modified it. In a true child theme, the original theme code is still intact, and is used in combination with the child theme’s files. The downside to using a derivative is that it can not be upgraded like a child theme. That is, if an updated version of TwentyThirteen comes out, you won’t be able to update your site to incorporate those changes.

Now, when you contracted for the site, did you specify that you wanted a fixed width site instead of a responsive one? Because that’s basically what they did. The Twenty Thirteen theme is supposed to be a responsive theme, meaning it will adapt itself to changes in screen width, so it should look decent on a mobile device as well as a desktop, but they’ve changed it into a fixed width layout of 1400px, which is why the layout looks so big. You can override this fixed width by adding this CSS rule to the end of your style.css file:

body #page {
   min-width: 960px;
}

This will set up the width to be 960px instead of 1400px (px means pixels, which is the smallest unit of measurement on a screen). Technically, on a responsive site, there shouldn’t be a minimum width for the page, so it should be set to 0 (zero) so your users on a cell phone won’t have to scroll across. However, if you do set it to zero, you’ll see the header start doing some unusual things when you make the browser window narrower.

Thank you for the reply! I actually didn’t contract for the site; I was brought in to help manage the content a few weeks ago (and got dumped on the code, too, even though I know zip), so I don’t actually know what the original intention was.

I added the code you provided, but when I went to look at its affect on the site, the header was all smashed together. I took it out, then added it back in to show a coworker what was happening, and now it appears to be doing nothing at all (I’ve cleared my caches and looked at it on a different browser)…

It’s because you accidentally deleted the closing brace for the media query that’s just before the new rule. Change this:

.comment-author .fn,
	.comment-reply-link,
	.comment-reply-login {
		color: #333;
	}
body #page {
   min-width: 960px;
}

to this (note the added right brace before body #page):

.comment-author .fn,
	.comment-reply-link,
	.comment-reply-login {
		color: #333;
	}
}
body #page {
   min-width: 960px;
}

Ah, thank you! Unfortunately, it’s still smashing up the header in my smaller browser window (the register and donate buttons are put on top of each other and if it goes too small, the site title starts to disappear); is there any way to fix that, or would the entire site need to be re-coded?

The entire site doesn’t need to be re-coded, it’s just the header that’s causing the most problems. If you want the site to be fully responsive so it looks decent on a mobile phone, there will be work that needs to be done on the header.php file, mostly grouping elements into floating DIVs that rearrange themselves at different viewport settings.

And eventually someone is going to have to edit the header, because you have a line of text in there that reads:
July 25, 2015 8:00 a.m. — 50K or 100K Ride — Paepcke Park, Aspen
I don’t think you are going to want to keep that line in there after July 25, do you? Or is this site developed just for this one event?

I should also let you know that whomever developed your site put in a bunch of hidden advertisements. You can’t see it normally because the container that holds the ads is positioned off the screen, but if you do a “view source” from a desktop browser, scroll down until you see the body tag (or search for the word body) and you’ll see all sorts of links to online pharmacies, with links selling amoxycillin, lasix, cialis, abortion pills, etc. It’s coded so that it is present on every page. The reason the developer put this in there is a form of spamdexing, so that links get “more popular” rankings in search engines because they appear on multiple sites & pages. He/she probably didn’t think anyone would notice. You probably need someone to go in and clean that up. My guess is that the code is in your header.php file.

Yeah, I noticed the date in the code when I had to edit the site from last year’s event; how would I go about grouping elements as you suggested?

I also noticed the advertisements in the code, but when I tried to delete them, they messed up the header, so I’m assuming there was some sort of necessary coding hiding within them that I just didn’t see.

Can you copy the contents of your header.php file into a pastebin, post the link here, and I can take a look later when I have some more time?

Sure thing. Thank you! https://pastebin.com/AKw7FhvK