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
[PARTIALLY SOLVED] images responsive
- turboblack
- Posts: 201
- Joined: Fri Sep 19, 2014 1:53 pm
Re: images responsive
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)
click on image and resize full.
for example http://woua.pp.ua/about - its responsive (autosize)
http://old.net.eu.org/ Get ready to hamsterization! code takes less than a kilobyte! shock!
https://github.com/turboblack/HamsterCMS new version for PHP 8 with new templates
https://github.com/turboblack/HamsterCMS new version for PHP 8 with new templates
Re: images responsive
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.
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
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!
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
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.
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).
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%;
}
}
Code: Select all
/*
CSS for screens LARGER than 768 pixels (desktop)
*/
@media only screen and (min-width: 768px) {
img {
width: 50%;
}
}
- StephanStanisic
- Posts: 37
- Joined: Fri Jul 05, 2019 8:51 pm
Re: [PARTIALLY SOLVED] images responsive
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.
This method is used by a lot of themes out there. Have used this myself quite regularly.
Hope this helps someone!
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%;
}
Hope this helps someone!