Arthur Broeders

My reply wasn’t constructive. I shouldn’t have posted this.

Hi philopolis,

That is a very nice site!

These border lines are part of the header image styling (3px at the top, 1px at the bottom, 0px left and right):

#branding img {
	border: 1px solid #000;
	border-width: 3px 0 1px;
	max-width: 100%;
	height: auto;
}

You have made the site wider, but the header image width still is 720px.
So you should resize the image according to the page width.

Or a fast method: give the header image a width=”100%” (and height=””). So it stretches to fill the header. And thus the borders are fitting as well.

<img src="./../writerightnow.png" align="center" width="100%" height="" alt="">

But better resize the image.
And as you can see the image is defined max-width: 100%, so if you match the width (if you are not exactly sure, just make the image a bit wider than the page!!!), and add/upload the header image again, that is the only thing there is to it. No child theme needed 🙂

Hope this helps.

Kind regards,

Arthur

Hi lusitanoflickan,

Uploaded a TEST page for you. You can save the page and look in the altered style.css (if you need some more clues).

Said again: works as you asked for on a iPad Portrait: sidebar next to content.

The reset code is

@media (max-width: 800px) {
	/* Simplify the basic layout */
	#main #content {
	margin: 0 7.6% 0 34%;
	width: 58.4%;
	}
	#main #secondary {
	float: left;
	margin: -7% 0 0 0;
	width: 23.91%;
	}
}

I will keep it uploaded for one day.

To be honest: it still feels all a bit quick-n-dirty:

– you have copied the complete parent stylesheet in the child stylesheet;
– you have added a 768px breakpoint in the child css but leave the 800px breakpoint as is in the parent (where now only a small part is ‘reset’)

But well, it works 🙂

Kind regards,

Arthur.

Hi lusitanoflickan,

Hmm, now is does read 767px. Strange!

But still, you have to move the code for #content and #secondary to the next breakpoint.

So is should read (and keep the first one at 768px!)

@media (max-width: 768px) {
	/* Simplify the basic layout */
	#main #content {
	}
	#nav-below {
		border-bottom: 1px solid #ddd;
		margin-bottom: 1.625em;
	}
	#main #secondary {
	}

and

@media (max-width: 650px) {
	/* @media (max-width: 650px) Reduce font-sizes for better readability on smaller devices */
	body, input, textarea {
		font-size: 14px;
	}
	#main #content {
		margin: 0 7.6%;
		width: auto;
	}
	#main #secondary {
		float: none;
		margin: 0 7.6%;
		width: auto;
	}

Really works.

Kind regards,

Arthur

Hi lusitanoflickan,

Nope, it certainly is a @media styles issue:

At @media (max-width: 768px) both #main #content and #main #secondary are changed to width: auto;.
Hence both are stretched to 100% and thus the sidebar dives under the content.

(That’s lines 2242-2245 and 2250-2254 in the stylesheet.)

Move that to the @media (max-width: 650px) and you keep the sidebar next to the content in iPad Portrait.

Kind regards,

Arthur

Yes, it doesn’t seem to work at this moment.
But as a workaround for your sites in production: simply restore the 0.6.5 version of the plugin.
So you can correct this yourself 🙂