Hello,
I did a lot of research but couldn’t find my answer despite there are many threads about this…
So, I really need that some images change their size if the screen size change. I saw a lot of post about “faux” responsive (like this thread : https://www.wix.com/corvid/forum/community-discussion/how-to-make-your-site-faux-responsive ) and saw this website : https://johannaa13.wixsite.com/responsive-text
The text size change if the screen size is reduced. I really need the same thing for an image.
Unfortunately I tried to understand the documentation but couldn’t implement it or understand it…
So, is there a way to do the exact same thing with corvid code to resize images ?? I am really facing a wall here and really need this…
Thank you 
Hi @kevin85838 , If you mean changing the size dynamically it unfortunately can’t be since the $w.Image element doesn’t have an API to get/set the dimensions of the image.
Thank you for your response 
Ah shoot… and maybe do you think it is possible to make disappear my image if my screen size reach some amount and make appear a smaller version of this image for example ?
@kevin85838 You might benefit from wixWindow API - Form Factor to show different images on each device, for example, a big resolution image on desktop and smaller one mobile or tablet devices.
I hope that help.
@ahmadnasriya Thanks a lot ! It may be my answer ! I hope that I am able to find how to write this in corvid
Thanks again
@ahmadnasriya OK so i tried :
import wixWindow from ‘wix-window’ ;
if (wixWindow.formFactor === “Tablet” ) {
$w( ’ #image85 ’ ).hide( ‘’ );
}
but my image does not hide when I change my screen size on tablet mode…
That will depend on what tablet device you are using.
Android tablets will be shown the mobile version of your website.
Apple tablets will be shown the desktop version of your website.
If you look in the Wix Support pages and then in browser compatibility or live site issues, you will find a page about this.
Hi, @kevin85838 …
You’re using the hide function in the wrond way, you should only pass an effect and its options to the hide function like this hide(‘fade’, options) , and not an empty/incorrect effect name as you did.
Moreover, there’s no event function that’s triggered when the screen size is changing, and as I said before, there’s no way to set/get the value of the screen size (resolution), what I meant by using the Form Factor API is determinig the type of device, and run certain code accordingly.
So it’s not possible to hide the image if you resized the windows to a smaller size, get the right image size according to the device, use something like this, and make sure you put it inside the page’s onReady() function:
if (wixWindow.formFactor === "Desktop") {
$w('#imagex1080').show();
} else if (wixWindow.formFactor === "Tablet") {
$w('#imagex720').show();
} else if (wixWindow.formFactor === "Mobile") {
$w('#imagex480').show();
}
Hope that helped you.
@givemeawhisky Thank you for your response, I’ll look into it
@ahmadnasriya I’m not sure I understand… I copy/paste and adapt your code accordingly but don’t see a difference… To me, I hide an image if my screen size is in desktop/tablet/mobile mode and make appear the other version of this image according to his device…
To do this just follow Ahmed’s instructions and use the supplied code sample in the pages onReady function.
You just need to change the image id names to match your own image id names that you have used.
You will also need to set the mobile and tablet images to be hidden on load in the properties for each image.
There are two examples that you can look at here.
https://support.wix.com/en/article/corvid-writing-code-that-only-runs-on-mobile-devices
https://support.wix.com/en/article/corvid-tutorial-displaying-elements-in-mobile-only
You can see it in action on this simple test site here, with the appropriate image being shown on the specific device.
https://givemeawhisky.wixsite.com/formfactor
You have a choice of either of these two code setups below, both do the same thing that you are after.
import wixWindow from 'wix-window';
$w.onReady(function () {
if (wixWindow.formFactor === "Desktop") {
$w('#desktop').show();
} else if (wixWindow.formFactor === "Mobile") {
$w('#mobile').show();
} else if (wixWindow.formFactor === "Tablet") {
$w('#tablet').show();
}
});
import wixWindow from 'wix-window';
$w.onReady(function () {
if (wixWindow.formFactor === "Desktop") {
$w("#desktop").show();
}
if (wixWindow.formFactor === "Mobile") {
$w("#mobile").show();
}
if (wixWindow.formFactor === "Tablet") {
$w("#tablet").show();
}
});
Just note that it needs to be tested on a live site for it be shown fully working, as shown in the Testing section in the previous link.
Finally, keep in mind that tablets will have desktop or mobile versions shown as noted here.
You might also want to have a look at fitMode as an alternative to doing the different images for each device, if all you are trying to do is to get them to fit.
https://www.wix.com/corvid/reference/$w.Image.html#fitMode
You can also do this for a workaround with different pages for each device type too.
So say you had pages for each device which are /mobile, /tablet and /desktop.
Put this code on your home page or landing page if you want users to move when they first get to your site, or on the specific page that you want.
It will automatically send users to the page relevant to their device.
import wixWindow from 'wix-window';
import wixLocation from 'wix-location';
let device = wixWindow.formFactor;
$w.onReady(function () {
if (device === 'Mobile') {
wixLocation.to("/mobile");
}
if (device === 'Tablet') {
wixLocation.to("/tablet");
}
if (device === 'Desktop') {
wixLocation.to("/desktop");
}
});
This is shown in more detail here.
Thanks a lot for your help and time ! I am looking into it to try to understand but I think It really can help me for what I want. I am going to test all of this thank you again :))
One last question : if I want to view how it looks on a tablet device does the emulate screen by the inspector on my browser is enough or do I really need a tablet device or a software that can emulate the device ?
Thank you again for your great help
@givemeawhisky So I tested the second workaround where I call a certain page according to my device. It seems to work ! I put a button which goes to the tablet page. And it redirect me correctly to the desktop page ! Now I need a tablet device to test it fully which I’m going to get on monday !
Thank you again both of you for your time