Image width is fixed, can't resize

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

My apologies, I’m new to WordPress.

https://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.

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.

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.

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

.alignright {
    color: #534C26;
    float: right;
    margin-bottom: 10px;
    text-align: right;
    width: 300px;
}

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?

Try removing float: left; from:

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

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

Try re-inserting:

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

and then adding:

.post img.alignright {float:right;}

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!

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.

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

Thanks. ??

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?

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