[Resolved] image scaling not really responsive

[fr4nk]

There is a problem with scaling of images on small displays e.g. on mobile phones. The proportions of images will be changed. The width is scaled to fit the screen, but the height is too high. The auto sizing of the height seems to be overridden by something else. Any hints?

example: http://www.bluetoons.de/blog/2015/09/wet-moon-rising/

[Tom]

Hi there,

That image has inline CSS setting the height and width.

You’ll want to remove that CSS so it can use the theme’s CSS to be responsive.

You’re looking for this: style="width: 460px; height: 649px;"

[fr4nk]

Good morning, does anyone has an idea where this inline css come from or how I could disable it? Because this effects some hundred pictures, and I added the pictures just by using the WP editor.

TIA
Fr4nk

[David]

@Fr$nk

What are the steps you are taking to add images?

David

[Tom]

Are you resizing the images in the editor once you add them? That would most likely be the cause.

If you have a bunch added, you could try and do something like this to save time changing them all:

.entry-content img {
      height: auto !important;
}

[fr4nk]

Hello again,
no I don’t re-size and I just use the image button from my editor and then I add a link to the image (which I upload via FTP before) but I see that my editor adds style attributes by itself and automatically. It was hidden on another notebook page of the setting dialog of images I never used :S
I remove the styles manually, I will also try the suggested “!important” setting until I’m done. 🙂

Maybe I will need another editor as-well. Any recommendations?

Thanks for you feedback guys! 🙂
Fr4nk

[Tom]

It definitely shouldn’t be adding those CSS attributes automatically. Are you using the regular TinyMCE editor?

Maybe try deactivating your plugins and uploading an image – see if it still happens. It may be a plugin adding the CSS.

[fr4nk]

I used CKEditor for WordPress. And this one adds the styles and I can’t disable it. But I can delete the styles (and the editor as well for sure 😉 ).

I can’t use the standard editor in wordpress because on my desktop operating system my browser (Firefox) do not support these menu icons using special chars. No I can’t change this – other story.
So no I’m looking for an editor with normal bitmap icons or even plain ascii text based menus.

But that is all not GP related, thanks for your hints you helped me out.

regards
Frank

[Tom]

That’s odd – I use Firefox all the time and haven’t noticed any issues with TinyMCE.

Glad we could help 🙂

[Author]

Posts