Urgent layout problems

[broomhandle]

I have until Monday to make these changes!

On my WordPress site (http://www.peterchamberlaincann.co.uk) I’m using a child theme based on Minimalizine. There’s some odd errors that occurred when I removed the sidebar and increased the page width from 520px to 720px, and also some things that differ from the WordPress.com version of theme (that I was using before I migrated to my own hosting) that I’d like to change back.

• The text and images are stuck to the old 520px “margins” on the Portfolio page and also on the Blog, but only the images. It’s also like that in WP dashboard when I’m editing a post.

• I want to put the sidebar back in, but only for the Blog and all . This is the code that will bring the sidebar back I think:

  .entry-meta {
      display: inline;
  }
  
  .wide {
  float: right;
  width: 520px;
  }
  

  .hentry { margin: 0 0 40px; }

• In the Leave a Reply box, I’d like to move the “Notify me” sentences so theyre alongside “Post Comment”. I have already changed the respond code to these values:

  #respond label {
  left: 3.5%;
  position: absolute;
  top: 0;
  }
  

  which moved the “Notify me” sentences to right next to the checkboxes. It seems that label is too broad, because “left:” moves all of the text in that area, including “Name” “Email” and “Website”.

• I think because of the change from 520px to 720px, the site now doesn’t display correctly on my phone or tablets, or when viewed in a minimised window, so I’d like to fix this.

• I added this code to change the line spacing between images on the Portfolio page.

  .entry-content.wide img { margin-bottom: 6px; } 
  

  But it has resulted in most gaps between header text and images being too small. For example, on the “Berlin” post on my Blog, the gap is smaller than the gap between “New film – Ever Decreasing Circles” and the YouTube video below.

  Oddly though, the gap between “Evaluating Ever Decreasing Circles” and the image below appears to have the correct spacing – I wonder if this is something that only affects tiled galleries?

  Even though the code was meant for the Portfolio page, where all the images aren’t in galleries!!

[broomhandle]

Hi… I just wrote up a response but when I replied, it didn’t post it?

[Paulie_D]

It’s gotten trapped in a filter….hold on.

[broomhandle]

Thanks, I’ll put that in in a moment. The Jetpack gallery is in, but that should only apply to tiled galleries right?

On the Portfolio page, where the third image is pushed to the next line… that’s not a tiled gallery.

Tools… it’s a self-hosted domain with WordPress installed. I transferred from this site http://peterchamberlaincann.wordpress.com.

The .org version of the theme is different from .com, so there’s been some things that I’ve been trying to change to match up with .com.

For example, spacing between images on Portfolio – the .org version puts full lines between rows of images, but for that page, I wanted a roughly 5px gap. Hence I added that .entry-content.wide code.

Workflow… basically, any change I make, I go through cPanel and edit the style.css for the child theme. I have a few plugins installed, Jetpack, Simple Lightbox and All In One SEO.

[broomhandle]

I’ve put your code in, I meant on two lines rather than side by side. :D

Also, when I make the browser window width smaller, the sidebar disappears and the spacing for the comments goes all off.

I don’t know what’s happened to the white box background either, it’s not high enough to cover the bottom of the text.

What a mess my site is lol!

[broomhandle]

Thanks Paulie.

[broomhandle]

I’ve just found this http://diythemes.com/thesis/rtfm/one-sidebar-certain-pages-only/ which I think could be useful for adding the sidebar back, but I’m not sure how to implement it with my theme.

[broomhandle]

I have been using Firebug to troubleshoot it and find which code affects what.

I’m not serious about web design, the stuff I’m serious about is what’s on my site. ;)

Once I’ve ironed out these things, I’ll just be adding more content.

I’ve tried looking for solutions to all of this, but they’re always slightly different to what applies to my site.

I’m willing to learn, but I don’t have much time for it, this is one of many modules for university. :D

[broomhandle]

Tell me about it!

Re: overflow: autoI’ll try that in a second.

Err, “go and study CSS” is not “Solved”. :P

[broomhandle]

I’m about to try Method 2 from here for the sidebar, but that would mean putting in the custom field each time I create a new page. http://www.nannygoatsinpanties.com/how-tos/wordpress-how-to-remove-the-sidebar-for-specific-pages

Is there an easy way you could let me in on, or are you gonna keep being ambiguous? :P

[broomhandle]

Hmm, and that (filtered link) doesn’t change the page width when the sidebar’s removed, so it won’t be much use. :/

[broomhandle]

Previously, on each line between each Portfolio image were gaps of two spaces. I’ve changed them all to one space, and now the third images are on the right lines.

Now that I’ve done this, I’m not sure if the Portfolio images are actually centred, or just look that way cos there’s only a 2px or 3px gap on the right of them that you can’t see easily? I tried aligning all the images to center, and they all did except for the bottom Pulp one, which ends up on it’s own line below the bottom two, and off-center to the right. I’ve kept it like that for now so you can see what I mean.

I then changed .entry-content.wide img { margin-bottom: 6px; } to .entry-content.wide img { margin-bottom: 3px; } so that the vertical spacing would look similar to the horizontal spacing… and it worked.

^^So, proof that the “‘jetpack tiled-gallery’ javascript” doesn’t override the rest of it then?

Oh dear, I’m kind of confusing you with this guy: http://www.reddit.com/r/css/comments/1xujf2/layout_problems/ who said the tiled gallery plugin was overriding the margin-bottom code.

[Josiahmann]

Any particular reason you suggest working locally as opposed to on a staging site?

[broomhandle]

@Ateilerbram that looks great! As a noob though, it sounds like you’re saying I’d need to start from scratch for that?

[broomhandle]

What has happened to galleries on my site in Firefox?

I added this code from another forum:

@-moz-document url-prefix() {
.entry-content.wide img {
margin-bottom: 6px;
display: block;
position: relative;
float: left;
height: 124px !important;
margin-left: 0px;
}
}

which would have supposedly fixed the “Portfolio gaps” issue, but it didn’t, instead it made the gallery images go tiny in Firefox. So I removed it, but they are still tiny in Firefox? http://www.peterchamberlaincann.co.uk/blog/berlin/

[Author]

Posts