slideshow module not showing fully in the mobile view

osseo

We have a "JA slideshow" module displaying on the homepage and it looks fine on the desktop view. However, when the user is in the mobile phone view, the top of the slideshow will be "cropped" in the vertical view and not showing the full image (see screenshot below), the horizontal view apparently to be fine. Please advise on how to fix that? Thanks.

Ninja

osseo
Hi
Add this code in custom.css file to remove the mask

@media(max-width:468px){
.ja-ss-mask {    display: none;
}}

osseo

Hi Ninja
I added the code @media(max-width:468px){.ja-ss-mask {display: none;}}
under "/css/custom.css" in template "ja_university_t3".

But in the mobile view (vertical mode), the slideshow still got cut off on the top.

Please advise, thanks!

Ninja

osseo
Hi
I checked it on mobile and its normal, the image is resize in phone, its not exactly same that u can see in PC as the screen size is very limited.

osseo

Ninja that's the problem, I think the "image" did resize but the "text box" overlay the image is cut off so the visitor can't read the full text. Please see my screenshot the yellow box content got cropped on the top. Is there way to adjust the text box area so it will resize in mobile phone view as well? Thanks!

Ninja

osseo
Hi
Mobile screen size is not a PC size that you can show same at all
hope you understand this screen size 300px and 1300px not give same view.
You can move the the text box down by adding this code

.ja-ss-desc {bottom:0px;}

Or just hide it in mobile by adding this code

@media(max-width:468px) {.ja-ss-desc {display:none;}}

osseo

Ninja Yes, I know the module resize according to screen size, that's why I wonder why the text box didn't resize when it is in mobile view. I do need the box to show on the mobile view so I added the code .ja-ss-desc {bottom:0px;} under custom.css but it didn't move or change the box at all... is it because the "arrows" that's in the way mving the box down? Thanks.

Ninja

osseo
Hi
if you use arrow it will be over the image and same for the text box since mobile screen is very short its not possible to fit all and show the complete image too.