I have created a carousel contains 5 frames/images. In the default screen, i sat the images to be in the middle. When I test in the browser, every thing looks fine with 320/480 resolution. However, when I go to higher (e.g. 400X800, 640X960) the frames/images sticks to the left side and do not stretch out to cover the space that they use to cover with the original resolution.
Hi Hawk,
Please click Refresh button (top left) when you choose a new frame size.
I have tried that but unfortunately it did not work. I noticed some componenets scale pretty good and others not. I think those which I defined there position manually do not scale, while components which I left them in the default position scale. I usually update the componenet position by update "margin" values from the panel on left. Is that the right method?
Hawk,
Please add custom CSS file with the following code to center images inside of carousel:pre[name=mobilecarousel_8] .ui-carousel-box img {
margin-left: auto;
margin-right: auto;
}/preWhere mobilecarousel_8 is a carousel name.
Thanks Katya, it works for the position. What about the size, The components do not scale to get bigger when I use bigger screen and smaller when I use smaller screen?
Hi Hawk,
Please set size in relative units rather than pixels: %, vh/vw
May I know how can I do that?
Hi Hawk,
You can do it with following code instead of yours:
pre
[name="mobilecarousel_8"] .ui-carousel-box img {
margin-left: auto;
margin-right: auto;
width: 70%;
}
/pre
Regards.