Page 1 of 1

[PARTIALLY SOLVED] images responsive

Posted: Fri Jun 01, 2018 5:03 pm
by mariotv
HI,
WonderCMS 2.5.1 , is it possibile in some way to make images responsive (autosize) on mobile devices? Can someone help me?
Thank you,
mario

Re: images responsive

Posted: Sat Jun 02, 2018 9:11 am
by turboblack
you have an option "resize full" in image options when you add an image.
click on image and resize full.

for example http://woua.pp.ua/about - its responsive (autosize)

Re: images responsive

Posted: Sat Jun 02, 2018 2:12 pm
by wiz
Hi Mario.

You can install the Summernote editor plugin: https://wondercms.com/plugins.
When you insert an image, click on it and click "100%". The image will be then responsive.

Let us know if you need any assistance.

Re: [SOLVED] images responsive

Posted: Sat Jun 02, 2018 7:27 pm
by mariotv
thank you for reply,
hope I'm able to explain better, example: the original image is 400x300, align left, text on right, it is perfect on desktop.
when i resize 100%, it's ok on mobile, the text goes under image, perfect.
but on desktop the image becomes too big, all the screen... not good.
can be the solution is to resize 100% ... but not bigger than original dimensions?
...
thankyou!

Re: [PARTIALLY SOLVED] images responsive

Posted: Sun Jun 03, 2018 4:11 pm
by wiz
No problem Mario.

I think some CSS media queries will do the job for what you want to achieve.

Can you please post a couple of screenshots?
Mobile and desktop screenshots would be fine, so we can see where the problem is and what the desired effect would be?
You can also post a link to the website.

Use the below code and modify it in your style.css.
Make sure your image has some sort of a CSS class, like <img class="yourClass">, if you want it applied only to one image.

Code: Select all

/* 
	CSS for screens LARGER than 768 pixels (desktop)
*/
@media only screen and (min-width: 768px) {
    	img.halfSizeImage {
    		width: 50%;
    	}
}
If you want all of your images to be 50% wide, you can remove the halfSizeImage class and this will be applied to all images (I don't think you want this effect globally though).

Code: Select all

/* 
	CSS for screens LARGER than 768 pixels (desktop)
*/
@media only screen and (min-width: 768px) {
    	img {
    		width: 50%;
    	}
}

Re: [PARTIALLY SOLVED] images responsive

Posted: Wed Jul 10, 2019 10:28 pm
by StephanStanisic
Hoping to add some info for people who find this some time later:

This should be the responsibility of the theme that you are using. If it doesn't handle images well, you could add this code to auto resize the image when the parent container get's smaller than the image itself.

Code: Select all

img {
    max-width: 100%;
}
This method is used by a lot of themes out there. Have used this myself quite regularly.
Hope this helps someone!