Changing image css in mobile mode - Support | Kriesi.at

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
April 19, 2016 at 3:58 pm #617503

audiopablo
Participant

Hello again,

we want to change the css in mobile portrait and landscape mode:
we want to show the images first instead of the text in the mobile portrait mode,
(see screenshots:
https://www.dropbox.com/s/wg9vp0h9xdw6z7j/IMG_4428.PNG?dl=0
https://www.dropbox.com/s/1rv78t7zojgobbj/IMG_4429.PNG?dl=0
https://www.dropbox.com/s/ndaefp788vvc3b5/IMG_4430.PNG?dl=0

now you have to push the text to start the gallery, but some users don’t understand this. the idea now is, to show the images above the text in portrait mode and further on in landscape mode to design the pictures a little bit taller.

Could you please give me a hint, where and how to change the css code for these modification?

Thank you so much, regards,
paul

April 19, 2016 at 5:13 pm #617565

audiopablo
Participant

Hello,

i just checked the issue in the chrome debugger/mobile view on pc, and there for iphone 5 is exactly the look we want to achieve:

This is how it should be:
Landscape:
https://www.dropbox.com/s/dpgsbea3f1ikveb/Screenshot%202016-04-19%2016.53.21.png?dl=0

portrait:

https://www.dropbox.com/s/qcif4zrlza9oev7/Screenshot%202016-04-19%2016.52.01.png?dl=0

So, i assume it is a bug on the real mobile client, it seem the caption-text is always activated and not only by hover…

Any idea, how i can solve the problem??

thank you so much,
regards,
paul

April 20, 2016 at 3:48 am #617939

Jordan
Inactive Moderator

Hi Paul!

Thanks for getting in touch with us!

The screenshots helped but could you please also provide a link and login details to your site, so that we can have a closer look and test this on mobile devices. You can place the information in the Private Content section of your reply.

Regards,
Jordan

April 20, 2016 at 5:27 am #617978

audiopablo
Participant

Hi Jordan,
the required information is now in my privat content.

thanks,
regards,
paul

April 21, 2016 at 10:28 am #619026

audiopablo
Participant

Hi Jordan,

i would like to ask, if there is any progress in solving that problem?

thanks so much,
regards,
paul

April 23, 2016 at 8:58 am #620418

audiopablo
Participant

Hello Jordan,

could you please send me an short information, if there is a chance to get the bug fixed?

thanks a lot,
regards,
paul

April 26, 2016 at 5:09 am #621870
Rikard
Keymaster
Hi,

Sorry for the late reply. Please note that when you reply to your own thread it will be sent to the back of our support queue. Not sure if I missed something in the thread but you want to show the images before the text on mobile only? Unfortunately there’s not really a good way to achieve that with CSS since CSS can’t really change the structure of a page. I would suggest that you copy everything on the page so that you have two versions on the same page, you can then rearrange the items how you would like to show them on mobile. Then to hide/show the correct items you can activate custom CSS field for ALB elements: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

You can then add classes to the elements you want hide on mobile to your Quick CSS:
```
@media only screen and (max-width: 767px) {
.hide-mobile {
display:none;
}
}
```
And this to the ones you want to show on mobile:
```
@media only screen and (min-width: 768px) {
.show-mobile {
display:none;
}
}
```
Thanks,
Rikard
April 26, 2016 at 11:35 pm #622575

audiopablo
Participant

Hi Rikard,

thanks for getting in touch with me, although some days later, anyway:)

the problem is, that the mobile version does not work as it should:

the screenshots of chrome debugger are showing the way it should be:
https://www.dropbox.com/s/dpgsbea3f1ikveb/Screenshot%202016-04-19%2016.53.21.png?dl=0
https://www.dropbox.com/s/qcif4zrlza9oev7/Screenshot%202016-04-19%2016.52.01.png?dl=0

the screenshots of the real mobile client are showing the way it really appears on the cell phone:
https://www.dropbox.com/s/wg9vp0h9xdw6z7j/IMG_4428.PNG?dl=0
https://www.dropbox.com/s/1rv78t7zojgobbj/IMG_4429.PNG?dl=0
https://www.dropbox.com/s/ndaefp788vvc3b5/IMG_4430.PNG?dl=0

Any idea how to fix the bug?

i dropped login information in my private content some days ago, so you can check the website if you want.

thanks,
regards,
paul

April 29, 2016 at 1:37 pm #624393

Andy
Inactive Moderator

Hi,

it’s working fine for me, so I think it’s just a caching issue. Clear browser cache and hard refresh a few times. Make sure that you website does not get cached.

Best regards,
Andy

April 29, 2016 at 6:07 pm #624672

audiopablo
Participant

Hi Andy,

thanks for writing,
i know, it looks fine on pc – also the mobile version – – but did you ever took a look at it in a real mobile client? this is, what it looks like in iphone6, e.g.:
https://www.dropbox.com/s/4fngsiyxg8f2yvt/mobile_bug_160429.PNG?dl=0

it should be the same appearance as the pc-version, shouldn’t it?

thanks for reply,
regards,
paul

May 3, 2016 at 3:48 am #626129
Ismael
Moderator
Hi,

The masonry content covers the image. Use this to adjust the height of the masonry items on mobile view:
```
@media only screen and (max-width: 767px) {
.av-fixed-size .av-masonry-entry.av-landscape-img .av-inner-masonry-sizer {
    padding-bottom: 100%;
}
}
```
Best regards,
Ismael
May 3, 2016 at 11:22 am #626339

audiopablo
Participant

Hi Ismael,

thanks a lot for the code, the problem is resolved now!

Best regards,
paul
Author

Posts

Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘Changing image css in mobile mode’ is closed to new replies.