WordPress.org

Ready to get started?Download WordPress

Forums

Images On Page "Squished" (20 posts)

  1. jeffdoc
    Member
    Posted 3 years ago #

    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

  2. Spencer Finnell
    Member
    Posted 3 years ago #

    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."

  3. jeffdoc
    Member
    Posted 3 years ago #

    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

  4. Spencer Finnell
    Member
    Posted 3 years ago #

    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.

  5. jeffdoc
    Member
    Posted 3 years ago #

    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

  6. jeffdoc
    Member
    Posted 3 years ago #

    Looks like that fixed it, Spencer!

    Thanks a million! You're awesome!

    Jeff

  7. All4Service
    Member
    Posted 3 years ago #

    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

  8. Spencer Finnell
    Member
    Posted 3 years ago #

    Can you post a URL to your site?

  9. All4Service
    Member
    Posted 3 years ago #

  10. clkafka
    Member
    Posted 3 years ago #

    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!

  11. clkafka
    Member
    Posted 3 years ago #

    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.

  12. Spencer Finnell
    Member
    Posted 3 years ago #

    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.

  13. clkafka
    Member
    Posted 3 years ago #

    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!

  14. Rev. Voodoo
    Volunteer Moderator
    Posted 3 years ago #

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

    you have to refresh browser to see css changes

  15. Spencer Finnell
    Member
    Posted 3 years ago #

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

  16. clkafka
    Member
    Posted 3 years ago #

    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!

  17. Spencer Finnell
    Member
    Posted 3 years ago #

    How are you making your changes? Through the editor in WordPress or through an FTP client?

  18. clkafka
    Member
    Posted 3 years ago #

    This is how I get there. Appearence - Edit CSS under manage themes - veiw orignial style sheet. I delete the max width line for the home page and save under file. But I have never made any changes to css, so I just wondered around until I found it. Is there another way to edit css? Thanks!

  19. Spencer Finnell
    Member
    Posted 3 years ago #

  20. All4Service
    Member
    Posted 3 years ago #

    I'm still loss as to where I need to go to make the edit mentioned above concerning the max-width @ SpencerFinnell. I have gone into the CSS and looked carefully but I dont see any thing that begins to reference home. I dont have any home theme files so I'm just lost!

Topic Closed

This topic has been closed to new replies.

About this Topic