Headre IMage Alignment

The problem is that ‘.banner img’ is styled ‘max-width: 100%;’, but ‘img’ is styled ‘width: auto;’ which adjusts the width of the image in proportion to the height.

You need to override the ‘.banner img’ styling with this:

.banner img { width: 100%; }

You should create a Child theme to make your changes. If you do not, all of your changes will be lost if you update your theme.

I made the above changes and had no luck with the banner img problem being corrected.

Your site looks correct to me now. You may need to clear your browser cache.

Ya it did correct itself but unfortunately now my images for blog posts are extremely distorted.Do you know why that might be?

Something else has changed because taking out the change I suggested still leaves the banner expanded.

I mean I’m alright with them being that size but if they didn’t become so pixaleted and blurry at the same time that would be nice. They used to be 1/3 the size of what they are now.

OK, try adding this to your style.css:

.entry-content img.medium,
.entry-content img.thumbnail {
   width: 200px;
}

EDIT: Probably better to use a percent: width: 35%;

I added that near the bottom of styles.css but had no luck with the pictures changing size, even after clearing the cache. I really do appreciate all your help!

Where did you add the code? When I go to the site, I do not see it at the end of wp-content/themes/church/style.css.

You really should create a Child theme to make your changes. If you do not, all of your changes will be lost if you update your theme.

I am alos running the “Video Thumbnails” plugin by Sutherland Boswell so maybe that has something to do with I’m not sure, I temporarily deactivated it but still had no luck.

Sorry I’m not sure how to create a child theme yet. I put it in the code like such:

@media screen and (max-width: 600px) {
#respond input[type=”email”],
#respond input[type=”text”],
#respond input[type=”url”] {
width: 100%
}
}

`.entry-content img.medium,
.entry-content img.thumbnail {
width: 35%;
}

/*
Plugins Style
—————————————————————————————————- */

/* Jetpack
——————————————— */
input#subscribe-field {
padding: 16px !important;
}

ONce I have a child theme How am I supposed to update it?

I see it now. You included the backtick at the front of the code (I accidentally left off the trailing one, so it showed up at first). Just remove that first character.

You keep the parent theme pristine and make your changes in the child theme. The parent theme can then be updated without losing your customizations.

So, you would place your CSS changes in your child theme’s style.css.

Perfect thank you for all the help, finally go it figured out! I had some experience with visual basic coding but not this stuff so some of it goes right over my head. I’m going to have to read up on how to make a child theme here.