AsHerWorldTurns

@alchymyth

Thank you so much for pinpointing that it was the code trying to display the avatar that was causing the break. When I deactivated the “User Photo” plugin, the layout on pages with comments returned to normal.

I so appreciate that you took the time to look at this! Thank you!!!

@mattyrob

Thank you so much for responding!! I really appreciate it.

I tried deactivating the zemanta plugin but the layout issues persist. Any other ideas? I can try deactivating all of my plug-ins one by one, but if you see any other possible culprits I’ll try fixing those first.

Many sincere thanks for any help! I’ve been trying to Google fixes to this for three months without really knowing how to proceed.

Update on this issue:

I updated the version of WordPress I was using (from 3.3.1 to 3.8) and then I tried switching the PHP from 5.2 to 5.4 … and it all worked out fine. So I didn’t have to update the version of Twenty Eleven and lose the tweaks I’ve made to the theme over the last year.

I am so excited right now!!

After continuing to tweak the code on my own, I found the exact fix I was looking for. I added this to the bottom of my CSS (child theme):

/* =Responsive Structure for narrow screens
* to keep min width and sidebar
-------------------------------------------- */
#featured, #myGallery { max-width: 100%!important; }
.slideElement { max-width: 100%!important; background-size: 100%; }
@media (max-width: 1000pxbody { padding: 0px; }) {
     #page {
       min-width: 1000px;
         }
/* keep the sidebar - for right sidebar */
    .right-sidebar #main #content {
        margin: 0 29% 0 1%;
        width: 100%;
     }
    .right-sidebar #main #secondary {
        float: right;
        margin: 0 1% 0 1%;
        width: 24%;
    }
#branding #searchform { top: auto!important; bottom: -30px!important; }

That did the following things: fix my margins for mobile device viewing (so it looks like my site would on a laptop), adjust the featured content gallery size to fit proportionally, move the search bar in line with the menu, and (most importantly) show 100% of my site when viewed on a mobile device. I discovered that the key to showing 100% was to set the site width to 1000px (which is the size of my particular site).

Thanks for your help alchymyth, and I hope this might assist anyone else looking for similar code.

Many thanks Alchymyth!! It’s looking a lot better. Also, I figured out the issue with the horizontal photos and it’s all fixed now (I had to align them like I did the vertical images; that way the mobile device recognized them and resized them accordingly).

I have one remaining concern: Is there code that will adjust the text size so that it all fits in better? Right now it’s hyphenating a lot of the words in order to fit the space, which looks messy. I’d prefer that the text shrinks appropriately / proportionally when viewed on a mobile device, if that’s possible. (When I look at other blogs on my iPhone, their text shrinks down to allow the width of the whole site, if that makes sense.)

One last thing: I really like the search bar in the menu bar (thank you for that code!). I’m wondering if there’s a way to then shift up the last line of the menu, so that it’s over two lines instead of three? That would make it look more compact / use up the space better in the menu bar.

Again, major thanks for your help!!

I tried to find that exact code but I don’t see “.sfw-commentlist”. This is the code area in my CSS that relates to comments:

/* =Comments
----------------------------------------------- */

#comments-title {
	color: #666;
	font-size: 10px;
	font-weight: 500;
	line-height: 2.6em;
	padding: 0 0 2.6em;
	text-transform: uppercase;
}
.nopassword,
.nocomments {
	color: #aaa;
	font-size: 24px;
	font-weight: 100;
	margin: 26px 0;
	text-align: center;
}
.commentlist {
	list-style: none;
	margin: 0 auto;
	width: 68.9%;
}
.content .commentlist,
.page-template-sidebar-page-php .commentlist {
	width: 100%; /* reset the width for the one-column and sidebar page layout */
}
.commentlist > li.comment {
	background: #f6f6f6;
	border: 1px solid #ddd;
	-moz-border-radius: 3px;
	border-radius: 3px;
	margin: 0 0 1.625em;
	padding: 1.625em;
	position: relative;
}
.commentlist .pingback {
	margin: 0 0 1.625em;
	padding: 0 1.625em;
}
.commentlist .children {
	list-style: none;
	margin: 0;
}
.commentlist .children li.comment {
	background: #fff;
	border-left: 1px solid #ddd;
	-moz-border-radius: 0 3px 3px 0;
	border-radius: 0 3px 3px 0;
	margin: 1.625em 0 0;
	padding: 1.625em;
	position: relative;
}
.commentlist .children li.comment .fn {
	display: block;
}
.comment-meta .fn {
	font-style: normal;
}
.comment-meta {
	color: #666;
	font-size: 12px;
	line-height: 2.2em;
}
.commentlist .children li.comment .comment-meta {
	line-height: 1.625em;
	margin-left: 50px;
}
.commentlist .children li.comment .comment-content {
	margin: 1.625em 0 0;
	word-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}
.comment-meta a {
	font-weight: bold;
}
.comment-meta a:focus,
.comment-meta a:active,
.comment-meta a:hover {
}
.commentlist .avatar {
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0 1px 2px #ccc;
	-moz-box-shadow: 0 1px 2px #ccc;
	box-shadow: 0 1px 2px #ccc;
	left: -102px;
	padding: 0;
	position: absolute;
	top: 0;
}
.commentlist > li:before {
	content: url(images/comment-arrow.png);
	left: -21px;
	position: absolute;
}
.commentlist > li.pingback:before {
	content: '';
}
.commentlist .children .avatar {
	background: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	left: 2.2em;
	padding: 0;
	top: 2.2em;
}
a.comment-reply-link {
	background: #eee;
	-moz-border-radius: 3px;
	border-radius: 3px;
	color: #666;
	display: inline-block;
	font-size: 12px;
	padding: 0 8px;
	text-decoration: none;
}
a.comment-reply-link:hover,
a.comment-reply-link:focus,
a.comment-reply-link:active {
	background: #888;
	color: #fff;
}
a.comment-reply-link > span {
	display: inline-block;
	position: relative;
	top: -1px;
}

/* Post author highlighting */
.commentlist > li.bypostauthor {
	background: #ddd;
	border-color: #d3d3d3;
}
.commentlist > li.bypostauthor .comment-meta {
	color: #575757;
}
.commentlist > li.bypostauthor .comment-meta a:focus,
.commentlist > li.bypostauthor .comment-meta a:active,
.commentlist > li.bypostauthor .comment-meta a:hover {
}
.commentlist > li.bypostauthor:before {
	content: url(images/comment-arrow-bypostauthor.png);
}

I tried playing with a few of the values in my Child Theme but it didn’t adjust the margins / padding at all. Any idea which specific values I should try changing?

I’m also still looking for a way to adjust MY responses to comments, so that my name and the date float to the right of my avatar (like it does when other people comment). Again, here is the link to a post with comments at the bottom, to show what I’m talking about.

Thank you WPyogi! Your solution fixed it perfectly. After struggling to fix it myself for the last hour, I so appreciate your help!!

Thank you both for pointing out which values to change! I used:

`#secondary {
float: right;
width: 25.25%;
margin-right:1%;
}’

and now it’s much better. Thank you!!

Cookowl, which child theme did you add that to? style.css? I tried adding your code to my style.css (child theme) but it didn’t do anything.

I am trying to tighten up the comments section on my single posts (like at the bottom of this post) so it’s not so spread out. This thread is one of the few I’ve found re: how to modify the Twenty Eleven comments section.

Perfect!! Your help has been invaluable. Thank you, thank you, thank you, Alchymth!

Thank you!!! That fixed it.

I have one more question relating to the excerpts layout on the home page and pages: Can I indent the “posted in [category]” so it’s in line with the title, date, and excerpt text (instead of flush left under the thumbnail)?

If this is a different enough subject, I can post it as a new topic.

Again, major thanks for your help, Alchymyth!

We’re getting closer!

The title and date are now shifted to the right of the thumbnail, but the excerpt text has completely disappeared and now the full posts show up on my home page. How can I get the excerpt text to show up again instead of the full posts?

My pages used to have excepts like the home page, but now my pages are showing the thumbnail image first, then the title/date below it (odd), and then the full post (here’s an example). I only want to see the excerpts here, just like it looks on the home page (minus the featured content slider): thumbnail on the left, post title, date, and excerpt on the right.

The single posts look perfect.

Thank you SO much for your help.

Thank you Alchymyth! (Sorry, I wrote my last response before I saw yours!)

Here is the code from my content.php:

https://pastebin.com/VJg46NRm

Alchymyth wrote, “move the featured image code,” but I’m not sure what code that is. The only image-related code currently in my index.php refers to the Featured Content Gallery plug-in (which is different than the thumbnail images featured in my excerpts). Should I pull featured image code from elsewhere and move it to index.php in the area where Alchymyth suggests? If so, where can I find that code?

I added the style.css code that Alchymyth suggested.

Thank you!!

Hi alchymyth,

Just want to verify – do you mean the index.php template? Also, which featured image code? (Right now I just have a “featured content gallery” plug-in code near the top of my index.php, but that’s different than the thumbnails in my excerpts.)

I also tried playing around with code in the content-featured.php template (child theme) but it didn’t change anything.

Many thanks for your help!