[PARTIALLY SOLVED] images responsive

Post Reply
mariotv
Posts: 5
Joined: Wed May 02, 2018 3:24 pm

[PARTIALLY SOLVED] images responsive

Post by mariotv » Fri Jun 01, 2018 5:03 pm

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

User avatar
turboblack
Support/Developer
Posts: 169
Joined: Fri Sep 19, 2014 1:53 pm

Re: images responsive

Post by turboblack » Sat Jun 02, 2018 9:11 am

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)
http://t0rba.tk/ my Russian-language research WonderCMS engine 8-) & also http://woua.pp.ua/ in Ukrainian

wiz
Admin
Posts: 403
Joined: Sat Oct 30, 2010 12:23 am

Re: images responsive

Post by wiz » Sat Jun 02, 2018 2:12 pm

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.

mariotv
Posts: 5
Joined: Wed May 02, 2018 3:24 pm

Re: [SOLVED] images responsive

Post by mariotv » Sat Jun 02, 2018 7:27 pm

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!

wiz
Admin
Posts: 403
Joined: Sat Oct 30, 2010 12:23 am

Re: [PARTIALLY SOLVED] images responsive

Post by wiz » Sun Jun 03, 2018 4:11 pm

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%;
    	}
}

User avatar
StephanStanisic
Support/Developer
Posts: 14
Joined: Fri Jul 05, 2019 8:51 pm

Re: [PARTIALLY SOLVED] images responsive

Post by StephanStanisic » Wed Jul 10, 2019 10:28 pm

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!
wonder.stanisic.nl • My WonderCMS creations

Post Reply