make images responsive

Hi,

You can set in Themler to have images width in percent and the height to auto. The problem may be when the client adds the image using some editor inside CMS and that editor adds the fixed width in pixels inside the image code. There is nothing we can do in this case.

Sincerely,
Hella

Thanks Hela

You are welcome. Let us know if you need our further help.

Sincerely,
Hella

Hi, I'm bumping this one for a bit more help. We've noticed that due to the variety of different screensizes now, we keep running into problems where images are being displayed badly on mobile devices. I.e. we see images trying to left or right justify until you see single words beside them which is unreadable, or where the "caption" cell which thye sit in is forced into bad alignment.

We've been trying to create some CSS to handle this based on screensizes, but feel like we are losing the battle here. Also, it's very screen size dependent.

Is there any CSS tweaks you are aware of which we can use to strip back the display of images which are inline in blogs and posts so they aren't badly scaled, lose their justification so they don't create single word (or sometimes letter) lines next to them, and perhaps hide/remove any captions or additional info?

Here is what we've been using for the first issue (text justification) but it'x extremely dependent on us guessing a decent screen size of the device:

/*MAKE IMAGES RESPONSIVE*/  
@media screen AND (max-width: 450px) {
    // When the screensize is less than 450px
    // stop things floating, and make them fill the space
    .alignleft, .alignright, .aligncenter, .alignnone {
        float: none;
        width: 100%;
        height: auto;
    } 
    // find inline attachments from blogs and make them take the width of the screen, not be fixed in length
    [id^="attachment"] {
        width: 100% !important;
    }
}

Hello,

Sorry for delay. If the question is still actual, please refer to this article that includes advice how to resize images in responsive: https://answers.themler.io/articles/6460/how-ro-resize-slider-images-and-text-in-responsive-mode

Sincerely,
Nettie