Build Your Own Business Website header image

Troubleshooting Image Alignment in WordPress

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session we troubleshoot image alignment in WordPress by setting all images to align none to automatically align them to the left.

Video Transcript

Member: I had a question for you. On my site, all my images are not lining up for me. They seem to line up better on Firefox and when I try to line them up when I bring Chrome up, they’re out of line they don’t know how to address the individual images to line them up and they sort of…

Rick: Are you talking these images here or…

Member: Yeah, yeah they don’t line up. See this has been moved to the left and I don’t know how to address that specific alignment.

Rick: Okay well, but when you inserted the image you told it to align center?

Member: Yeah but even with them all align center they’re not aligned up.

Rick: They’re different sizes though so let’s see this one. This one doesn’t even have an alignment specified.

Member: Okay…

Rick: That one was align center, this one is align none. If you choose align none they’ll all be on the left side.

Member: When you say align none do you do that when you’re doing the estimation of the image when you’re inserting your image in or…

Rick: Yes but you can also just do this yourself I mean after it’s in so I’m going to make you the presenter. Are you logged in to your site?

Member: Yes, I am somewhere. Yeah, I’m in.

Rick: Somewhere. Somewhere in this dang computer I know I am logged in.

Member: Yeah, let’s see here. Here we go, I found it. Okay, here I am and I’m going to…

Rick: So open up that post or open up that page or whatever it is. You’re not logged in to your site yet.

Member: I see that. First time I came in on this site and I wasn’t logged in for years and years. I’m logged in here. It’s coming up.

Rick: Okay so edit the page.

Member: I think it’s still loading I think and here’s the page here. It’s still loading. Okay here it is, it’s loaded.

Rick: Okay.

Member: I go to the text?

Rick: No, just click on that image and then click on the little picture icon on it.

Member: Let me just do it again and this icon.

Rick: And then say alignment none, okay and then update.

Member: Okay update here.

Rick: And then just do that to each of the pictures and they’ll be aligned to the left.

Member: Okay. Excellent, excellent I appreciate you know, for the longest time for almost like I guess maybe about 3 years I couldn’t figure out how I had lost my site until I was listening to your video or the Thesis Designing Like a Pro.

Rick: Yeah.

Member: I didn’t understand you know what Thesis was and when I see what Thesis was and how Thesis sort of cheat a little bit and that they don’t really use the… all of WordPress’ things and how it makes it fast. Oh, that’s how it comes as faster you know, that was good stuff I enjoyed it.

Rick: Good.

Member: It was crazy because I mean for 3 years I didn’t know how I even lost my site because they’ve gone from themes to skins and that’s why I went what is this skin stuff? (04:05) I understand and I still appreciate that.

Rick: Why don’t you go down and adjust all the rest of the images and then we’ll just take a look at it and make sure it’s working right.

Member: Okay. Now it seems it’s somewhat slow.. if there is this updating. I wonder and I found a display block and when I disabled it, the image straighten up too.

Rick: Yeah. Display block, I don’t know why Chris added that to the reset but..

Member: Let’s see what we got here, let’s go to the site and take a look. Preview changes.

Rick: Well I would just hit update and then just view it in its actual condition.

Member: Okay and the images look like if squished or stressed out I don’t know why that is on my screen. They look like they’re flattened. That’s good, okay well this over here I didn’t do this one yet, I had to go back I thought I did this one.

Rick: I thought you did that one too. Go back to your page, okay click on it.

Member: Okay, I didn’t do this one.

Rick: Now what you mean squished?

Member: They seem like the height of them is not correct. I mean here the height is correct when I’m looking at it here but when I actually go to the site the stuff is like okay we’ll view the site.

Rick: Let’s go view the page then.

Member: Okay it’s still loading. The image looks more squashed I mean on this screen right here, it looks longer and I like okay. This one doesn’t look okay, this one right here this seems like it’s squashed like the height got changed or even to look at…

Rick: When you say squashed you mean it’s too tall or…

Member: The height of the image is..

Rick: it’s not wide enough?

Member: Either too wide or not tall enough. When I did it in I used Gimp to size the image it looked fine in Gimp but when I transported it and uploaded it and this one right here, the image doesn’t look correct. That was great when we got all the images are aligned, that’s good.

Rick: Well, let’s take a look at that image let’s see, the one that’s out of whack.

Member: This one here.

Rick: Okay, so according to my thing the natural size of the image is 500 pixels wide by 429 pixels tall.

Member: Okay.

Rick: And that’s what its being shown as on the page too so this image that you uploaded, if it’s not the right perspective then it got changed in the photo editor. WordPress isn’t changing this, this is how WordPress knows it.

Member: Okay. So it explains what you gave it basically.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one