Responsive issue on Mobile

[Works Of Bart Design]

Site URL: http://magnoliadds.com
WordPress v 3.8.1
Flexform v 1.6

Hi Ed,

My clients Flexform theme looks great on Laptops and iPads but there is a Resonsive issue on Mobile Phones.

On a laptop go here http://magnoliadds.com then scroll down to the Gallery that displays the 3 side by side images. These were created using a Gallery builder. The animated blue effect on hover that shows a link symbol and words that display telling you where the link goes to says “Take the Office Tour” before click and works perfect on laptops. But, on Mobile Phones the words and animation DISAPPEAR! I only see the image and no animation. It does link to the Tour page if you click it, but who is going to know to do that? How can I get this to work the same on Mobile as it does on laptops? Or can I do a work around and simply add a caption to the bottom of these 3 images that would show on all devices including Mobile?

I tried to figure out the work around (see below) and could not make it work. Thanks for any ideas.
NOTE: I could use single images to add captions, keep the blue animated hover effect, like I did here: http://magnoliadds.com/ourpractice/. But the link effect is lost and replaced by a magnifying glass and shadow box player, not what I want for these 3 images on the home page. They need to “link” and tell us where they are linking to.

This is what I tried for the work around:
To add a subtitle or caption just below the home page Portfolio image on the left I added a “subtitle” to the Gallery image. I added these words to the “subtitle” box inside Portfolio image editor. I then went to the home page editor, down to the Gallery item, the toggle and checked “Yes, show subtitle text”. But nothing is showing on laptops or mobile devices! Why isn’t the subtitle working as a workaround? I just want words to appear below the image like a caption. Does this option need to be added to the Flexform theme? Can I code it just for Mobile? “Enable Responsive” is turned on.

I want to match the blue hover and animation effect and link that is working on laptops, and add that to all Mobile devices, that is the preferred solution. The work around of adding a subtitle/caption that appears on all devices or just mobile is an acceptable solution too.

Thanks for you input. – Bart

[Melanie – SUPPORT]

Does that also happen on our demo for you?

Cheers

[Works Of Bart Design]

Well it is kind of hard to tell but Yes, while on my iPhone looking at your Flexform Demo, I does seem to show a quick animated orange box (mine are blue) on click for the Rocker image “Standard Post No Slider” and in the footer “Recent projects”. I don’t see any text just a + symbol. Is there a larger version of this effect on the demo that shows the link symbol and text so I can actually see it better on the small phone screen?

As noted I’m using the Gallery builder to display those 3 home page images here http://magnoliadds.com. On hover they enlarge, turn blue, and show a link symbol and text. Why can’t I see the blue hover, the link or the text on mobile? Why can’t I add new text below the image as a work around for mobile?

Bart

[Swift Ideas – Ed]

Hi Bart,

I can see what you mean.. We’ll investigate adding the text below for mobile in a future update, but for now this might be a suitable solution for you:

@media only screen and (max-width: 767px) {
figure .overlay {
background: transparent;
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}
figure .thumb-info {
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
}
}

Hope that helps.

– Ed

[Works Of Bart Design]

Thanks Ed for taking a look and sending this code. I added your code to Theme Options > Custom CSS and got mixed results on my Mobile device.

Homepage:
– The GOOD: It’s a better solution to seeing nothing since now we can at least see text and a link
– The BAD: The look does not match UI on a Laptop or iPad. Can’t see BLUE BOX and LINK icon on click like on your DEMO site. Why not?

All pages with images on Mobile:

– The GOOD: The code adds a zoom icon to every photo so it is now obvious that clicking blows up image
– The BAD: Adding a zoom icon on top of every picture on the site before click looks bad on Mobile. I need to see this icon and a BLUE Box AFTER the click like on your Demo. Can you make it match your demo UI?

Please adjust the code ASAP. I will leave it on the site so you can test it on a Mobile device for the next day or so.

Thanks – Bart

[Swift Ideas – Ed]

Hi Bart,

Our demo is the standard theme, no other changes have been made. So you’re saying that everything works as you want it to on our demo site on mobile?

– Ed

[Works Of Bart Design]

Not exactly.

I’m saying that on your Demo site on a Mobile device go to the footer section “Recent Projects”. I see an animated Orange Box and a Plus icon appear ON CLICK just before the link occurs. My box is Blue on a laptop, and we have a Link icon not a Plus icon, but this is the look I’m after on Mobile for the 3 Home page Gallery images. Also note my need for the “Other image” across the site.

To summarize and simplify, please adjust the code for Mobile to do the following:

1) For the 3 Home Page “Gallery” images: Leave the text and icon as they are for now since the option to add a caption to a Gallery asset will be added in the theme until later. That is the most important thing of course. But if you can, add an animated Blue Box ON CLICK for the 3 Gallery images that matches the look on your Mobile Demo site footer asset “Recent Images”. This would be a nice way to tie the theme look to the Mobile device UI since all the our images on a laptop have this Blue Box animation, but none do on my Mobile.

2) For all other “Single Page” images I added across site, see Practice page, please do this for Mobile: Leave the Zoom icon up 24/7 on top of each image but ADD the Animated Blue Box ON CLICK. Again, this will be a nice way to tie the theme look to the Mobile device UI. I recommend you add this to the theme code as well.

So if you could add the animated Blue Box across the site on all images that would be a nice way to tie the theme look on Laptops to the Mobile device UI. When you add the option to the theme for Gallery captions, please let me know.

Wondering, why doesn’t the FlexForm theme automatically show this cool animated Blue Box effect on Mobile device images? It looks so good on Laptops and iPads. Why not Mobile?

magnoliadds.com

– Bart

[Swift Ideas – Ed]

Hi Bart,

Very odd. The demo site doesn’t do anything different in terms of the hover states.

There is nothing to add as such. Mobiles don’t support the hover state, as there is no cursor, so the touch state acts as a click, and the hover is triggered when you click it.

I’m not sure what your preference would be given that fact?

– Ed

[Works Of Bart Design]

ED- I don’t think you are reading my post very carefully. I will try to explain one more time.

WHAT YOU SAID I CAN’T DO WITH THE FLEXFORM THEME:
– add a text caption under a Gallery images. This IS NOT AVAILABLE until you add it to the theme code
– There is no hover on iPhones… Yes I know that. I want the Blue box to appear ON CLICK, not HOVER like on your Mobile Demo!

WHAT I WANT TO SEE, WHAT I WANT YOU TO FIX IN THE CODE:
– I am OK with leaving the link and text on Gallery images, and the zoom Icon on Single Page images.
– What I am asking you to do… Make ALL images show the animated BLUE BOX on CLICK, not ON HOVER.

Is that clear?

THE ANIMATED COLOR BOX FILES THE PHOTO ON YOUR FLEXFORM MOBILE DEMO. WHY NOT HERE?
When I CLICK on an image in the “Recent Projects” footer section I SEE the look I want on my site. A box of color and an icon appear. Is this not possible to get this to work on my site? If yes, why not?

Bart

[Swift Ideas – Ed]

Hi Bart,

I have read your posts carefully, as I do with every post here. You’ve been asking why the effect isn’t shown on mobile, and i’ve explained why. The reason it shows on the recent projects is because the effect is different – no the same that we use on the standard assets as the image scales and the overlay appears on top, rather than the image fading out.

This isn’t possible as standard with the theme – technically there isn’t anything to “fix” this is just how you’d like it to show.

– Ed

[Works Of Bart Design]

Ed,

Thanks for reading my posts. To be clear, you explained the hover effect but you did not explain why the blue animate effect was not working which was my only question. I want to see the color effect on all my images on Mobile, just like I do on laptops. Here is how I made the animated effect work on the laptop. Can’t the theme duplicate this on Mobile?

1) On the home page the 3 images in question were built using the “Portfolio” asset. Then I selected “Gallery” inside the asset. This gave me the animated blue effect on hover that shows the text and the link icon.

2) For all the other images on the site like on the Practice page, I used the “Single Image” builder asset and called out the > “Enable light Box”. This too allowed me to see the blue animated effect on hover. I did this because I could not figure out another way to make these images show the blue animated look.

These two solutions both work fine on laptops. Why not Mobile?

Are you saying that on Mobile, this effect will not work on these images because it is not built into the code? If that is true, please add the option. It changes the UI on the Mobile and doesn’t match the laptop. Or can I add some code to make it work?

Bart

[Works Of Bart Design]

Please add to my last post”

2) I meant to say “…I did this because I could not figure out another way to make these images show the blue animated look that popped them up into a shadow box player.

Bart

[Swift Ideas – Ed]

Hi Bart,

It’s not that it’s not built into the code, it’s that it’s not possible on mobile to activate the state for which the blue will show. I’m confused slightly as to why this interests you, given that it won’t appear before they are going through to the linked page?

– Ed

[Works Of Bart Design]

Hi Ed,

OK so the blue animated effect on my laptop can’t be duplicated on my mobile phone. Bummer. You said it won’t appear before than are going through to the linked page. It would appear as they click on it so they would see the effect for a brief moment. This is enough to carry over the look and function from the laptop and iPad UI.

Along those lines, you ask “why does this interest me?”

Here’s why:
“Adding the animated Blue Box across the site on all images is a nice way to tie the theme look on Laptops and iPads to a Mobile phone device UI (User Interface). Yes it would be brief but it would improve the UX (user experience) and makes the site more consistent in look and function. A win-win.”

I hope that clears up “the why”. When you add the caption option to the Gallery asset in the theme, please let me know.

Which brings up one final question. When you cahnge the them and add an option to show a text caption for Gallery images, how would I change the code you sent to remove the text and link icon on the home page Gallery, BUT leave the zoom icon on all the other images?

Bart

[Swift Ideas – Ed]

Hi Bart,

Well, I’m thinking in your case since you are the only person who has asked/requested about this that it might just be best to provide you with some custom css to overlay on the instance you need. We could possibly do this for your mobile site, which would be better? https://www.dropbox.com/s/vw1cwuobdr8o9ft/Screenshot%202014-03-06%2001.26.50.png

If so, you can use this CSS (replace what I sent you before):

@media only screen and (max-width: 767px) {
figure .overlay {
height: 20%;
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=1);
bottom: 0;
}
figure .thumb-info {
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
}
.overlay .thumb-info i {
display: none;
}
.overlay .thumb-info h4 {
top: 15%;
}
}

Let me know.

– Ed