Images now stretched and distorted after 5.5 upgrade

Hi
This should work:
img {
max-width: 100%;
height: auto;
}

Do inspect element, look like height is not added by you yet.

Thanks
Ahir

Hi Ahir,

Thanks for the quick reply.

That CSS add doesn’t seem to be working. I don’t think there is a way for me to add a screen grab of my CSS to show you how I’ve entered it, but it’s at the very bottom as per instructions in another thread.

I’m not at all techy. I did inspect element, but couldn’t see anything directly relating to images (again, can’t screenshot what I was seeing).

When I add delete and replace images in existing posts, they are still stretched. BUT, when I create a new post, the images are fine. So, this is beyond me…

Anything else I can try?

Thanks again, Rob

I can’t seen your added css with auto height:

img {
max-width: 100%;
height: auto;
}
OR
try with this css:
.wp-block-image img {
max-width: 100%;
height: auto;
}
add above css in appereance->Customize -> Custom css(Additional css)

• This reply was modified 4 years, 3 months ago by Ahir Hemant.

here is screenshot after added above css.

https://pasteboard.co/Jn8kpK2.png

Ah i see, you have done mistake. you have added css inside media query.
replace
@media only screen and (min-width:240px) and (max-width:639px) {
# your css
}
to

/* -==========================- MOBILE -==========================- */
@media only screen and (min-width:240px) and (max-width:639px) {
#content .container{
background:#fff !important;
border-radius:0 0 5px 5px;
-moz-border-radius:0 0 5px 5px;
-webkit-border-radius:0 0 5px 5px;
}
.menusearch {padding:13px 0;margin-top:28px;}
#header {

}
#logo {
}
.searchbtn {
width:auto !important;
}
#secondarymenu-container {
}
#secondarymenu, #mainmenu {
background:#fff;
padding:0 2%;
margin-top:10px;
}
#secondarymenu li, #mainmenu li {
border-top:1px solid #d7d7d7;
}
#secondarymenu li a, #mainmenu li a{
color:#363636;
text-decoration:none;
}
.fp-next, .fp-prev {
margin:0 -5px;
}
.footer-widgets .widgetf:first-child {
border:none;
}

#footer {
width:100%;
}
.widgetf {
border-top:1px solid #d3d3d3;
}
.articles .post-date {
float:none;
}
.articles dt p img {
display:none;
}
.fp-nav {
bottom:-18px;
}
.slider-container {
padding-bottom:20px;
}
#s {
width:70%;
}
}
img {
max-width: 100%;
height: auto;
}

Ah i see, you have added css inside media query.

Please repalce after this line:
/* -==========================- MOBILE -==========================- */
@media only screen and (min-width:240px) and (max-width:639px) {

TO below

/*	-==========================- MOBILE -==========================-  */
@media only screen and (min-width:240px) and (max-width:639px) {
	#content .container{
		background:#fff !important;
		border-radius:0 0 5px 5px;
		-moz-border-radius:0 0 5px 5px;
		-webkit-border-radius:0 0 5px 5px;
	}
	.menusearch {padding:13px 0;margin-top:28px;}
	#header {
	
	}
	#logo {
	}
	.searchbtn {
		width:auto !important;
	}
	#secondarymenu-container {
	}
	#secondarymenu, #mainmenu {
		background:#fff;
		padding:0 2%;
		margin-top:10px;
	}
	#secondarymenu li, #mainmenu li {
		border-top:1px solid #d7d7d7;
	}
	#secondarymenu li a, #mainmenu li a{
		color:#363636;
		text-decoration:none;
	}
	.fp-next, .fp-prev {
		margin:0 -5px;
	}
	.footer-widgets .widgetf:first-child {
		border:none;
	}
	
	#footer {
		width:100%;
	}
	.widgetf {
		border-top:1px solid #d3d3d3;
	}
	.articles .post-date {
		float:none;
	}
	.articles dt p img {
		display:none;
	}
	.fp-nav {
		bottom:-18px;
	}
	.slider-container {
		padding-bottom:20px;
	}
	#s {
		width:70%;
	}
}
	img {
  		max-width: 100%;
  		height: auto;
}

Thanks for this, Ahir.

Unfortunately, having copied and pasted this in, my images are still stretched and distorted.

Unfortunately, this has now made my images on tablet much smaller (though in the correct ratio). Do you know the default code so I can change it back (I didn’t screenshot the original code, which is my mistake).

My image problem is on PC. Is there anything I can change in the below CSS to fix images on PC?

/* -==========================- DESKTOP -==========================- */
@media only screen and (min-width:240px) and (max-width:639px) {
#content .container{
background:#fff;
border-radius:0 0 5px 5px;
-moz-border-radius:0 0 5px 5px;
-webkit-border-radius:0 0 5px 5px;
}
#content-top {
height:0;
}
#content {

}
#content .container {
padding:0;
width:1000px;
margin-bottom:20px;
padding-top:20px;
}
#logo {
position:absolute;
top:0;
left:0;
}
.menusearch {
position:relative;
width:260px;
border:none;
margin-top:33px;
margin-right:10px;
}

Many thanks, Rob

Hi

You’re doing something wrong, as I have told you to replace not add, also in your given above css, media query bracket} not closing so please check. You need to replace which I had given to you, that is bit last part of your style.css

Hi Ahir,

I did replace with what you sent through, nothing has been added. I took what you sent and replaced everything below the MOBILE line.

Where do I need to close the bracket? Sorry for the questions, but I know nothing about coding – which is why I went with WordPress..! To me, looking at CSS is like looking at those green lines of The Matrix.

Thanks, Rob

Hi Rob

Your css inside this

==========================- */
@media only screen and (min-width:240px) and (max-width:639px) {

Here all your css

} #this is closed bracket which you missed

Sorry Ahir, I can’t see where the closed bracket should go. It looks like it is there already.

Below is the CSS code you sent through, which is now in my site. I have also pasted the MENU code above it to show where it appears.

Everything looks the same as what you sent through, but images still stretched.

I can’t see what I’m missing out. And to save changes I only need to click on Update File at the bottom of the Edit Themes page?

Thanks, Rob

/*—————————— MENU ——————————*/
.menusearch {
margin-right:20px;
margin-top:55px;
}
#secondarymenu-container {
padding-top:0px;
}
#secondarymenu {
clear:both;
}
#secondarymenu li {
padding:15px;
}
#secondarymenu li a{
color:#fff !important;
font-size:15px;
}

#mainmenu-container {
clear:both;
background:#231f20;
}
#mainmenu li {
padding:0;
float:left;
}
#mainmenu a {
color:#fff;
text-decoration:none;
font-size:19px;
padding:3px 15px 5px !important;
display:block;
font-family:’oswald’;
}
#footer .footer_txt .container {
padding-left:20px !important;
}
}

/* -==========================- MOBILE -==========================- */
@media only screen and (min-width:240px) and (max-width:639px) {
#content .container{
background:#fff !important;
border-radius:0 0 5px 5px;
-moz-border-radius:0 0 5px 5px;
-webkit-border-radius:0 0 5px 5px;
}
.menusearch {padding:13px 0;margin-top:28px;}
#header {

}
#logo {
}
.searchbtn {
width:auto !important;
}
#secondarymenu-container {
}
#secondarymenu, #mainmenu {
background:#fff;
padding:0 2%;
margin-top:10px;
}
#secondarymenu li, #mainmenu li {
border-top:1px solid #d7d7d7;
}
#secondarymenu li a, #mainmenu li a{
color:#363636;
text-decoration:none;
}
.fp-next, .fp-prev {
margin:0 -5px;
}
.footer-widgets .widgetf:first-child {
border:none;
}

#footer {
width:100%;
}
.widgetf {
border-top:1px solid #d3d3d3;
}
.articles .post-date {
float:none;
}
.articles dt p img {
display:none;
}
.fp-nav {
bottom:-18px;
}
.slider-container {
padding-bottom:20px;
}
#s {
width:70%;
}
}
img {
max-width: 100%;
height: auto;
}

Hey,

what you are doing looks a bit too complex. What I’ve done having a similar issue was going to the WP Dashboard menu: Appearance → CSS Edit → Additional CSS

And I just pasted this piece of CSS code

img {
max-width: 100%;
height: auto;
}

Hope that helps.