WordPress.org

Ready to get started?Download WordPress

Forums

Image width is fixed, can't resize (17 posts)

  1. ivynhyde
    Member
    Posted 3 years ago #

    I'm using the theme butterflyeffects by semlaguna and I'm having issues with resizing images. Regardless of the size of the uploaded image or what dimensions I resize it to the width remains fixed, even when using the preset thumbnail, medium, large or full size options. Help please!

  2. esmi
    Forum Moderator
    Posted 3 years ago #

    Unless you provide a link to a page demonstrating the problem, no one will be able to offer much in the way of assistance.

  3. ivynhyde
    Member
    Posted 3 years ago #

    My apologies, I'm new to WordPress.

    http://www.shytosocialbutterfly.com

    As you will see the cartoon at the top of the page is sized properly and left justified. The image of the gentleman popping a bottle of chamgpagne at the bottom is staying the same width, even when I change it in the HTML code, and it won't justify right.

  4. esmi
    Forum Moderator
    Posted 3 years ago #

    You shouldn't change image sizes via the HTML markup. The results are unpredictable at best and terrible at worst. Use the correct image size wherever possible.

  5. ivynhyde
    Member
    Posted 3 years ago #

    Thank you for the quick response Esmi. When I upload the image in the correct size and try to right align the photo it automatically resizes the width.

  6. esmi
    Forum Moderator
    Posted 3 years ago #

    Try editing style.css and removing width:300px; from:

    .alignright {
        color: #534C26;
        float: right;
        margin-bottom: 10px;
        text-align: right;
        width: 300px;
    }
  7. ivynhyde
    Member
    Posted 3 years ago #

    Awesome! Thank you so much Esmi, that fixed the issues with resizing width. However, I'm still unable to get the image to align right. Could you be so kind as to give me suggestions for fixing that problem?

  8. esmi
    Forum Moderator
    Posted 3 years ago #

    Try removing float: left; from:

    .post img {
        border: 0 solid #999999;
        float: left;
        margin: 0 20px 20px 0;
    }
  9. ivynhyde
    Member
    Posted 3 years ago #

    *Sigh* I'm so frustrated!

    That fixed the image on the bottom but caused the cartoon to become distorted and have a fixed width. I'm going to try your earlier advice with the .alignleft.

  10. esmi
    Forum Moderator
    Posted 3 years ago #

    Try re-inserting:

    .post img {
        border: 0 solid #999999;
        float: left;
        margin: 0 20px 20px 0;
    }

    and then adding:

    .post img.alignright {float:right;}

  11. ivynhyde
    Member
    Posted 3 years ago #

    YES!!! Finally after 2 hours of fighting with this it's working properly.

    Esmi...I can't say THANK YOU enough! Thank you, thank you, thank you!

  12. esmi
    Forum Moderator
    Posted 3 years ago #

    No problem. :-)

    Whilst you're editing, you might also want to add:

    .post img.aligncenter {
    float:none;
    margin-left:auto;
    margin-right:auto;}

    In case that once causes problems later on.

  13. ivynhyde
    Member
    Posted 3 years ago #

    Great, I just added it. Have a fantastic weekend Esmi!

  14. esmi
    Forum Moderator
    Posted 3 years ago #

    Thanks. :-)

  15. ivynhyde
    Member
    Posted 3 years ago #

    Final 2 questions (I hope). Each time I add the code below to create an orange horizontal line it keeps getting stripped out. I'm sure it's something minor that I just don't understand how to do properly but the orange line above has stayed there without a problem.

    <div style="height: 20px; clear: both;border-bottom:2px solid #F16821;"></div>

    Also, there's a strange vertical yellowish line next to my quote "you don't have to be born..." and I have no idea how it got there. Any suggestions on removing it?

  16. esmi
    Forum Moderator
    Posted 3 years ago #

    it keeps getting stripped out

    Which tab are you using - HTML or Visual? You need to use the former and stick to it - otherwise your markup will be stropped out by the Visual Editor.

    The strangel yellow line id being added by style.css:

    blockquote {
        border-left: 2px solid #E1C578;
        padding-left: 10px;
    }

    Remove border-left: 2px solid #E1C578;.

  17. ivynhyde
    Member
    Posted 3 years ago #

    I was using a combination of both Visual and HTML, I'll just stick to HMTL.

    WOW, you really are amazing at this! Removing that border-left code worked.

    I'm now good to go and will finish up the website content this evening.

Topic Closed

This topic has been closed to new replies.

About this Topic