Changing HTML Element according to...

User 187934 Photo


Senior Advisor
20,271 posts
Online Now

Works correctly on my iphone.;)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2792467 Photo


Registered User
161 posts

Hi Byron,

I don't see the problem. Both pc and mobile shows only one of two views: lightbox or pictures.
On my Macbook pro with safari and on my iphone 6plus it looks well. At around 650px lightbox view switches to single pictures.
On iphone it shows the lightbox when held in landscape and turned 90 degrees it shows the pictures, nicely centred.
Well done!
Eindhoven :: Netherlands

It's easy to see, once you see it.
User 458539 Photo


Registered User
1,647 posts

Thanks guys - but - my android doesn't show that. It shows both lightbox and single pictures for all sizes. Same address

Any ideas?
User 2792467 Photo


Registered User
161 posts

How old is your phone / android version?
In Chrome simulating Galaxy 5 and up your page looks good.
I tried to fire up an old low-res android tablet but (of course) the battery is dead. It may take some time before it has enough juice to start.
I will let you know later.
Eindhoven :: Netherlands

It's easy to see, once you see it.
User 458539 Photo


Registered User
1,647 posts

Thanks Hennie - to make sure I am downloading the latest and installing to see if that fixing everything.

BTW - interesting solutions -THANKS! I have a 400 page site that the client it having kittens over not being able to thumbs out and blow up the pics on the light box. So If I can do this it will save me a TON of time

Byron
User 2792467 Photo


Registered User
161 posts

You are welcome.

By the way, maybe your android phone has a problem with this combination (transition AND display:none at the same time) in your css:

.row > [class*='coffee-span-'] .html-element.html-element-3 {
-webkit-transition-delay: 0s, 0s;
-moz-transition-delay: 0s, 0s;
-o-transition-delay: 0s, 0s;
transition-delay: 0s, 0s;
-webkit-transition-timing-function: ease, linear;
-moz-transition-timing-function: ease, linear;
-o-transition-timing-function: ease, linear;
transition-timing-function: ease, linear;
-webkit-transition-duration: 0s, .3s;
-moz-transition-duration: 0s, .3s;
-o-transition-duration: 0s, .3s;
transition-duration: 0s, .3s;
-webkit-transition-property: all, all;
-moz-transition-property: all, all;
-o-transition-property: all, all;
transition-property: all, all;
}

@media screen and (max-width: 648px) {
/* Layout Elements */

.container.container-2 {
display: block;
}

.row > [class*='coffee-span-'] .html-element.html-element-3 {
display: none;
}
}


Anyway, my android version 4.4.2 tablet has a 768 x 1024 resolution, so I couldn't test on viewport 648px.

Eindhoven :: Netherlands

It's easy to see, once you see it.
User 458539 Photo


Registered User
1,647 posts

Well it must be something here - On another android it looked fine but my personal phone, after update, still show incorrect.

Makes me nervous!

Byron
User 458539 Photo


Registered User
1,647 posts

Hennie

Sorry - that code analysis is above me. Have any idea what I could do to correct it?

Byron
User 2792467 Photo


Registered User
161 posts

Byron,

I think the problem is with - the browser software on - your phone, not with the code. I have tried an android phone (HTC one) and it looked fine.
Sorry I can't help you with the phone.
Eindhoven :: Netherlands

It's easy to see, once you see it.
User 458539 Photo


Registered User
1,647 posts

Thanks Hennie

Seems to be fine with everything but my phone. Going to run with it!!

Byron

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.