[Theme – Twenty Eleven] how to prevent elements moving when broswer window

that behaviour is intended; but obviously, the changes you have made to style.css so far, seem to be in conflict with it.

possibly, you can remove all styles starting from:

/* =Responsive Structure
----------------------------------------------- */

@media (max-width: 800px) {

all the way down to just before:

/* =Print
----------------------------------------------- */

(leave this last bit in place)

ps:
some of the behaviour might also be caused by the validation errors that you have introduced into the theme (example validation report of the page in your link):
https://validator.w3.org/check?uri=http%3A%2F%2Fwhynotburnbooks.com%2Flinks%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Thanks! I tried removing that section, but it seemed to throw everything out of position. The individual posts expanded to fill the width of the screen, and the sidebar appeared on the left, laid over everything else…

but it seemed to throw everything out of position.

i only checked that in the example linked page;

quite unlikely that the change would have such an effect, as these styles only come into action at narrower browser screen widths.

there seems to be something more severely wrong in your theme.

have you checked what i addad as a post-scriptum to my earlier response?

ps:
some of the behaviour might also be caused by the validation errors that you have introduced into the theme (example validation report of the page in your link):
https://validator.w3.org/check?uri=http%3A%2F%2Fwhynotburnbooks.com%2Flinks%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Thanks. I’m not really that experienced, so I don’t quite understand those validation errors, although by the looks of it they relate to the fact that I’ve used a columns plugin to structure the text on that particular page.

The layout / resizing problem occurs across all pages on the site, not just that page, so I expect it’s caused by something (or multiple things) in the stylesheet, rather than by anything restricted to that one page.

I’ve pasted the full ‘structure’ section of the css here: https://pastebin.com/VVmpACL5 in case that’s of any help.

If anyone can see any errors in that code that might be causing the problem, please do let me know.

It’s worth pointing out that I haven’t altered anything in the ‘colophon’ section of the stylesheet, as I’m not quite sure what to alter. That might be the reason why the footer doesn’t get pushed down under the sidebar.

The layout / resizing problem occurs across all pages on the site, not just that page, so I expect it’s caused by something (or multiple things) in the stylesheet,

there seem to be three causes:

a:
the use of postion: absolute; in the style of #secondary:

#secondary {
	float: right;
	position: absolute;
	margin-left: 736px;
	margin-top: 50px;
	margin-right: 76px;
	width: 188px;
}

i would suggest to change this to:

#secondary {
	float: right;
	margin-top: 50px;
	margin-right: 76px;
	width: 188px;
}

b:
the ‘Responsive Structure’ styles of the original theme;
my suggestion, as before, remove those.

c:
an unneccassry padding on the header image:

#branding img {
	height: auto;
	margin-top: -20px;
	margin-left: 48px;
	padding-right: 200px;
	margin-bottom: -50px;
	width: 940px;
}

remove padding-right: 200px;

only evaluated in firefox with the web developer add-on; there might be other issues in other browsers.

if you should make the changes, and are not immediately satisfied with the results, but want further suggestions, please leave the changes in your site until someone had the opportunity to cross-check them, and to comment on them.

Thanks v much. I’ve implemented those changes. They do seem to have fixed a few things. The footer is now pushed to the bottom of the page, as it should be, and none of the elements move on resizing the browser window.

However, the posts now extend across the full width of the page, and the sidebar is pushed down below them.

I’ve left the changes in, in case anyone can take a look at them.

Any help in getting the sidebar back where it should be would be much appreciated.

Thanks!

Ah, false alarm – I had only commented out the responsive structure section, rather than deleting it. Have deleted it now, and the problem’s fixed. Thanks again!

Hi DW83,

I was wondering if you could tell me how you got the header and menu bar to stay in place,

That’s exactly what I want to do and Just cant work out what I need to do.

Regards

Hi DW83,

I was wondering if you could tell me how you got the header and menu bar to stay in place,

That’s exactly what I want to do and Just cant work out what I need to do.

Regards

Joshua,

Add min-width: 1000px AND max-width: 1000px to #page within the CSS. You might have fixed this already but I wanted people to know how to do it. You do not have to modify anything else if you do this AND remove the responsive code off the CSS.

Just wanted to add a word of thanks to kremo5le and alchymyth. By your powers combined I am no longer frustrated!

Thanks folks.

ditto, kremo5le’s comment was a godsend

Using kremo5le’s information is good, but if the person resizes the width of the browser, the sidebar (on the right) drops below all the posts (as well as the comment bubbles). I’ve had this problem with the twentyten theme as well and fixed it on both.

In the standard style.css file, all you have to do is:

1. Copy/Paste the original code into a text editor
2. Find/Replace all the “max-width” (without quotes of course) with “width” (again, without quotes).
3. Copy/Paste the corrected code back into your WordPress style.css
4. Click Save.

I’ve tested it on long menus, and the sidebar and it works. I only have an iphone, so I can’t test with the other mobile devices.

To The Top,
Kevin Rape (I have an awesome last name ?? )

I have read through this forum and tried out a bunch of the solutions, however, I still am having trouble with resizing my page. Simply, when I shrink my page the widget/sidebar drops below the main content even though there is still room for it to the right of the content.

My blog is: https://theup-turn.com/

My CSS for the secondary is:

#secondary {
max-width:300px;
min-width:300px;
margin-right:36px;
float:right;
}

I can post more CSS if needed but if someone could help make the widget area stay at the right when the page is shrunk that’d be great!

-PK