Responsive issue on Mobile

[Works Of Bart Design]

Nicely done Ed I like the homepage animation look for Mobile using a blue box with text as a work around.

However, the other images on the other pages are not looking so good. EVERY IMAGE on the site NOW HAS a BLANK blue box under it with no text in it! I don’t really need this on these “other” images, just the Home page ones. Do you understand what i mean?

A summary of my question from my last reply explains it best…

…for Mobile only, how would I change the code to remove the text and link icon on the home page Gallery and add the Blue Box, BUT LEAVE the ZOOM ICON on all those “other” images across the site?

Also does changing this part of the code effect the size of the blue box? height: 20%;

Bart

[Works Of Bart Design]

Nicely done Ed I like the homepage animation look for Mobile using a blue box with text as a work around.

However, the other images on the other pages are not looking as good. EVERY IMAGE on the site NOW HAS a BLANK blue box under it with no text in it! I don’t need this on these “other” images as it does not match the UI on the laptop. I just need the effect on the 3 Home page images. Is that possible?

A summary of my question from my last reply explains it best…

…for Mobile only, how would I change the code to remove the text and link icon on the 3 Home page Gallery images and ADD the Blue Box, but… LEAVE the ZOOM ICON on all “other” images across the site?

Also does changing this part of the code ( height: 20%; ) effect the height of the blue box?

Bart

[Swift Ideas – Ed]

@media only screen and (max-width: 767px) {
.home figure .overlay {
height: 20%;
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=1);
bottom: 0;
}
.home 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);
}
.home .overlay .thumb-info i {
display: none;
}
.home .overlay .thumb-info h4 {
top: 15%;
}
}

Yes, the 20% controls the height.

That will only affect the hover overlays on home. So for the other pages, you want to display the text/icon over the top without the blue?

– Ed

[Works Of Bart Design]

Hi Ed,

Sorry this is taking us so long. Your latest mobile code did the trick for the 3 home page images. I will leave the height at 20%.

But again, in my last reply I asked you to do the following for the “other” images across the site:

…LEAVE the ZOOM ICON on all “other” images across the site.

I added the new code and now the ZOOM ICON is missing on the “other” images. Take a look http://magnoliadds.com/our-practice/office-tour/. Please add back the ZOOM ICON to all images except the 3 Home page ones. Leave the Home page as is. Then we are done!

Thanks. Bart

[Works Of Bart Design]

Ed,

Just noticed on the home page blue box the text is not centered when I change the height. Can you fix?

Bart

[Swift Ideas – Ed]

Hi Bart,

You’ll need to change:

.home .overlay .thumb-info h4 {
top: 15%;
}

To centre the text.

For the other images, try this css:

@media only screen and (max-width: 767px) {
body:not(.home) figure .overlay {
background: transparent;
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}
body:not(.home) 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);
}
}

– Ed

[Works Of Bart Design]

Thanks Ed you did it! Client is very pleased. Please mark this as resolved, I don’t see option here.

If interested my designers perspective and to give back to you who has given me so much help on the theme, I’d like to suggest making the following improvements to FlexForm:

FOR ALL DEVICES

1) As noted earlier, add an option to Gallery builder asset allowing choice of a Text Caption. This would have solved most of my problems with the mobile device and I wouldn’t have had to go back-and-forth with you for hours to fix it via the code.
2) In the Swift page builder, add a toggle button to choose where to place a new asset, top, middle or bottom. This defaults to the bottom now. If you have multiple layers and the asset you are choosing is not already in one of these layers nearby (so you can just duplicate it), then it takes considerable time to go to the bottom and DRAG that option up to the top through 10 layers! This would speed up the process.
3) On the Parallax option add a way to adjust the window height
4) In Theme Options > Background > add hover blow up of tiny background assets so you can see them
5) make use of icons clear. You had the wrong like to a version of Font Awesome that messed me up. i think you fixed this in the latest changelog. Simplify the use of
6) In swift page builder sometimes while working the “Visual” contents disappear and I have to use “text” to see them. Odd.
7) Fix the child theme, it appears to be tweaky. I tried to use it a while ago no luck. So I have added all my changes to the parent theme files, and backed them up as well as my code changes on a text file. So time consuming!

FOR MOBILE DEVICES ONLY
7) Add a way to disable top level menu on Mobile only. Not sure you can since its WP dashboard. Can you add it under Menu > Manage Locations so that users can choose? On my site top menu “pushes” the more important main menu down to be less important!
8) Like the issue we just revised on Mobile http://www.magnoliadds.com it would be nice to have more control over the UI and match the look on computers. Could you add it to Theme options? Animation on hover on laptop and iPad shows a fully covered image in blue that animates and enlarges and has text and icons. Do a click on mobile and it matches fairly well but not full box coverage. This is very limited on mobile but your code helped me make it look similar. See the 3 homepage images and you can see that the blue “Bar” does not match the look on computers. And there is no animation of the images. You explained this isn’t doable now. Bummer.

I’m looking at purchasing Dante it looks like it’s build with the latest, greatest you have to offer.
Thanks again Ed great job!

Bart

[Swift Ideas – Ed]

Thanks for the feedback Bart, glad I could help!

– Ed