WordPress.org

Support

Support » How-To and Troubleshooting » Images On Page “Squished”

Images On Page “Squished”

  • Hi Everyone,

    I am using WordPress V 2.9.2 and I am designing a new website using the “Deep Silent” theme.

    All has been working well until just tonight. I tried to add images to a page and they look perfect in design mode but when I save them and view the actual website, the images look “squished” and out of place.

    Other pages I designed previously in this site using the same theme still look fine but any new pages I create and try to add images to all turn out “squished” and out of order now.

    I can’t figure it out. I’ve tried deleting the page and creating a new one….with the same results.

    I will post a couple of links to the site’s pages below. One page will be the working page with correct image and the second will show the “squished” images.

    Working Page

    “Squished Images” Page

    At first I thought perhaps it was a limitation within the theme..but other pages show images fine.

    If anyone has any suggestions or advice on how to resolve this, I would greatly appreciate it. I have been pulling my hair out trying to figure it out (and I haven’t got much hair to spare! *LOL*).

    I want to try to get the site finished and launched by Monday so I would love it if someone could assist me.

    Thank You In Advance!

    Cheers!

    Jeff

Viewing 15 replies - 1 through 15 (of 19 total)
  • On the page with the squished images, you have the images set to align left, which adds a class of alignleft to the image.

    Then in the CSS, you have this

    .alignleft {
    float:left;
    width:150px;
    }

    So any image with .alignleft is going to be resized to a width of 150px, causing it to “squish.”

    Thank you for the info, Spencer.

    I am very new to WordPress and not very good with CSS and HTML.

    Would you be kind enough to tell me what I might do to fix this?

    Thank You So Much In Advance.

    Jeff

    Jeff

    First off, when editing the post, you should remove alignleft from the lists of classes on the image. (If you are using the Visual Editor, you can edit the image, and change the alignment to “None”).

    Then, in your style.css file in the theme, find the following:

    .alignleft{
    	float:left;
    	width:150px;
    }
    .alignright{
    	float:right;
    	width:200px;
    }

    and change it to:

    .alignleft{
    	float:left;
    }
    .alignright{
    	float:right;
    }

    This will remove the fixed width of the class, so that in the future if you actually need to align images to the left or right, they will not be constricted by the CSS.

    Thank you so much!

    I will go in and see if I am able to figure out what you have suggested.

    I thank you so much for your kind assistance!

    I’ll post back here if I have any problems.

    You’re the best!

    Jeff

    Looks like that fixed it, Spencer!

    Thanks a million! You’re awesome!

    Jeff

    I want to guess that I am having the same issue. On my home page I have problems because the pictures are bunched together at times and overlap into previous posts. It is all fine when I go directly to the posts, the pictures come up correctly. I tried the suggestions from above but I’m thinking I either didn’t go to the right place to look for that specific code OR I did and there was no value (150px).

    I wasnt sure if the custom fields information had anything to do with it but I deleted it. It carried over from my blogger…….I imported all of my posts into wordpress, so maybe that has an effect.

    Please help. Thanks

    Can you post a URL to your site?

    I am having the same problem. Photos were uploading fine, then hte last few were squished. If you go directly to the post, the photos are fine. I changed the photot alignment to “none” and it did not change it. I could not find this in CSS:
    .alignleft{
    float:left;
    width:150px;
    }
    .alignright{
    float:right;
    width:200px
    But I do not know what I am doing with CSS.

    Here is my blog http://embracingthemundane.wordpress.com/

    Thank you!

    I forgot to add that when viewing the post through archives, all the photos are correct, no squishing. The squishing is happening only on the home page.

    On your homepage, the following CSS is being applied:

    .home .size-medium, .home .size-large {
    height:auto;
    margin:0 0.5em 0.5em 0;
    max-width:590px;
    overflow:hidden;
    }

    So if you don’t want a max-width on the images, simply remove that line.

    Just the max width line or the whole thing you have up there? I deleted the max-width:590px; but it did not fix it. Sorry, I am sure this is a simple fix, but I am just clueless. Thanks!

    did you refresh browser after making the change? Press ctrl+f5

    you have to refresh browser to see css changes

    Just the max-width line. Make sure you save the changes.

    I don’t have a “save stylesheet” option. I did save in the file drop down after deleting the max width line. Do I need to upgrade in order to make this change? I have never made any changes to css before. Thank you!

Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘Images On Page “Squished”’ is closed to new replies.
Skip to toolbar