Messed up site badly – Needs help

[michalk]

I played around and now I have big problem and I hope I can get help. My site is http://experiencedmoms.com/  . As you scroll down the home page it’s a blog and only the first post is showing in the right format (they used to all be fine)

But that wasn’t the first problem – I just noticed that. What caused my problems (or something else did) was when I changed the page http://experiencedmoms.com/blog-posts/ . It’s a page. I wanted the pictures to line up nicely so I added <div class=”side-by-side”> before every <a href= like this [caption id="attachment_963" align="alignright" width="195"]<div class=”side-by-side”><a href=”http://experiencedmoms.com/childbirth/&#8221; rel=”attachment wp-att-963″><img class=” wp-image-963″ src=”http://experiencedmoms.com/wp-content/uploads/2014/12/postpartum_care.jpg&#8221; alt=”postpartum care” width=”195″ height=”175″ /></a> A Look at Postpartum Care</div>[/caption]  My css is .side-by-side { float: left; margin-right: 2px } . 

I may have played with other things too since I was trying to make my one sidebar (on left) smaller. 

I’m adding – Looks like I did something to affect the width of the main column – post and page too – Cause just scrolling through my home page – with the blog posts following each other – some are right (picture in top right) and a lot are suddenly wrong

Overall – I really need help getting out of this mess

Thanks

[hel]

Not sure if this helps at all, but if your css quoted above is as on your site then it is missing a “;” – in your post above you said

 .side-by-side { float: left; margin-right: 2px } that should be  .side-by-side { float: left; margin-right: 2px; }  

[michalk]

I wish… I know missing a semicolon can really wreak havoc to code so I quickly fixed it and updated the page that uses it… It did nothing 🙁 

[michalk]

I think the http://experiencedmoms.com/blog-posts/ page is so messed up because the widths are messed up or for some reason it doesn’t know how big the content or sidebar areas are. So may pictures just continue right to the en of the screen not stopping.

This blog originally had 2 sidebars and then I changed it to just one moving the left one to the right. I didn’t see anything going crazy then, but maybe…

This is all my CSS (I did it all a while ago) – I’m just posting here so maybe someone will notice something

.post .entry-hdr {display:none;}

.featuredproducts .title .corner-right

{

width:657px;

}

#sidebar .title

{

border:none;

}

#sidebar .title .corner-right

{

width:251px;

}

.corner-right h2{

width:100%;

margin-bottom:8px;

display:block;

height:7px;

font-family:Tahoma, Arial, Helvetica, sans-serif;

font-size: 12px;

font-weight: bold;

color:#FFF;

}

#productbox

{

float:left;

list-style:none;

padding:5px;

margin:2px 2px 2px 2px;

border: 5px solid #cccccc;

width:100%;

}

#productbox td

{

width:140px;

padding:5px;

text-align:center;

background-color: #FFFFFF;

margin:0 6px 5px 0;

border: solid 3px #0B6121;

padding:2px;

}

.featured h1

{

margin:0px;

padding:8px 8px 8px 0;

background-color: #FFF;

font: normal 22px/22px Georgia;

}

.postbody { line-height: 145%; font-size : 12px; background-color: #E8F0F7; }

a.postlink:link { line-height: 145%; text-decoration: none; color : #006699 }

a.postlink:visited { text-decoration: none; color : #006699; }

a.postlink:hover { text-decoration: underline; color : #444444}

.postbodyguide { line-height: 145%; font-size : 12px;  }

.postbodybold { line-height: 145%; font-size : 12px; font-weight : bold; }

.postbodyitalic { line-height: 145%; font-size : 12px; font-weight : bold; font-style:italic; }

.content-2-col-left {width:47%;}

.content-2-col-right {width:47%;}

.side-by-side { float: left; margin-right: 2px; }

I put some of it when I had two sidebars

[scrambler]

You have a rule

#content, .entry-content h1, .entry-content h2 .side-by-side { float: left; margin-right: 2px }

That floats the h1

I believe the rule was supposed to be

#content, .entry-content h1 .side-by-side, .entry-content h2 .side-by-side { float: left; margin-right: 2px }

When a rule has several selectors, you must make sure to edit each of them.

[scrambler]

I realize you may have added

.side-by-side { float: left; margin-right: 2px }

In a CSS+ box. If that is the case, you cant do that because of the reason I juts gave you. Rules placed in aqn element CSS + box will have the Selectors of that element added to it

If you want to style your side-by-side class, place the rule in Advanced Options > Head Section > Custom CSS Rule box

[michalk]

Where do I have the rule #content, .entry-content h1, .entry-content h2 .side-by-side { float: left; margin-right: 2px } ? I added .side-by-side { float: left; margin-right: 2px; } in Advanced Options > Head Section > Custom CSS Rule box. So what should I change?

[michalk]

Everything I posted above is in the Advanced Options > Head Section > Custom CSS Rule box

[scrambler]

As I said,

If the rule

#content, .entry-content h1, .entry-content h2 .side-by-side { float: left; margin-right: 2px }

In not in the Custom CSS Rule box, then you must have added

.side-by-side { float: left; margin-right: 2px }

In one of the CSS+ boxes.

You need to check all your CSS+ boxes

[michalk]

I know I’m confused. Yes – I did add .side-by-side { float: left; margin-right: 2px }  to the custom CSS rules box. I’ll take it out

[michalk]

It’s gone – I took that line out of Custom CSS rule box – even updated the page. Same mess. 

 

Where else are we talking about? Do I have to take out [caption id="attachment_963" align="alignright" width="195"]<div class=”side-by-side“><a href=”http://experiencedmoms.com/childbirth/&#8221; rel=”attachment wp-att-963″><img class=” wp-image-963″ src=”http://experiencedmoms.com/wp-content/uploads/2014/12/postpartum_care.jpg&#8221; alt=”postpartum care” width=”195″ height=”175″ /></a> A Look at Postpartum Care</div>[/caption] 

Or where should I be looking?

[michalk]

Found something – Main Options->Content Areas->Text->Content Text had .side-by-side { float: left; margin-right: 2px } in there.

I took it out, updated – and I still have the same mess

[michalk]

Is there a way to back up to before a certain date here?

[scrambler]

That was the CSS+ box in question …

I just checked your site and the problem is gone, so if it is not for you, you need to clear your cache(s)

[michalk]

Taking it out of everywhere really didn’t end the whole problem but it did solve the problem that all the other posts were messed up (they now were OK) so then I took  <div class=”side-by-side“><a href=”   out of that Post and now everything is back to normal

[michalk]

LOL – We posted a the same time. Thanks

[Author]

Posts