Forum Replies Created
-
Posts
-
OK, I figured out a workaround for anyone having the same problem. It uses the image only, no coding needed.
Use a square image. I used about 1700px X 1700px. Keep the subject matter in the bottom half of the frame.
Upload it as the section background. Set to “Fixed,” set the image position to “Bottom Center,” and the Background Repeat to “Stretch to Fit.”
This gives you the following croppings on desktop and mobile:
Desktop:
Mobile:
Hope this helps. Doesn’t matter what’s in the top part of the image – it isn’t seen.
This is from my developer:
Thanks for all of your help and suggestions in getting this resolved. I appreciate all of the ideas, but I think the problem is different. You have acknowledged that there is a difference in mobile vs. mobile simulated on browser, and you have suggested that this is due to bugs with fixed positioning in mobile and/or that we are simply not applying the right CSS commands. Based on my testing, I suggest an different theory: the theme is using javascript to detect mobile browsers and is then adding classes or styles which are overriding our custom CSS. I suspect the javascript is setting background size and position to make sure that no matter what image has been uploaded, the area at the top is filled. This is a reasonable theory, considering the theme author had to account for a wide range of input from users. Maybe this is due to a setting that has been chosen in the theme settings. If you can think of any setting that may be affecting us, that would be helpful.
To support my theory, I’ve created a test page where I’ve extracted the pertinent HTML/CSS for the top banner region. I’ve added the same mobile-targeted media query that I’ve added to the site. My test page looks the same in desktop when I simulate a mobile device as it does in an actual mobile device. I did this only to show that this is not a CSS or mobile-browser bug issue: http://www.abeautifulceremonynw.com/newsite/main-mobile.html
So, what we are hoping to gain from you is knowledge or ideas about what the theme may be doing in response to detecting a mobile/tablet browser. We need your help to find this because it won’t show up in our desktop browser and so we can’t use developer tools to find it. Also, I don’t want to have to sift through all the site’s javascript J Ideas? If I know what it is doing, I can override it!
Specifically, on the “Color Sections,” the theme positions the background images “center bottom” instead of “center top” on all mobile devices, and ignores CSS commands to position the background differently.
@Guenni007 – Thanks so much for attempting to help.
Here is what we are trying to resolve. If you look at the Enfold-Wedding Demo: http://kriesi.at/themes/enfold-wedding/ on a mobile device (not on a simulated mobile device on a desktop, but on an actual mobile device), you will see that the photo of the girl cuts off the head:
This is exactly what is happening with all of our photos contained in “Color Sections” – they crop off the top. I have written to the theme people, above, and they have offered various media queries. My own programmer, who is very good and very resourceful, has also implemented various media queries. They work fine on a simulated mobile device on a desktop, but do not work on an actual mobile device. We have tested many different media queries, both from the Enfold authors and from my own programmer and they do not work on actual mobile devices.
We believe there is something in the Enfold theme which is blocking these media queries from working on mobile devices. We have no idea what. The theme authors have been no help. If you can offer any suggestion that would be greatly appreciated.
It seems you don’t get what “media queries on this theme DO NOT WORK on ACTUAL mobile devices” means. Nor are you looking at your own theme demos on actual mobile devices. We installed and used the custom media queries you provided. They work in simulations but not on actual mobile devices. Try it yourself. Test it yourself. For the sake of your theme.
No reply needed.
Did you attempt to duplicate the problem by viewing our site on a mobile phone?
For that matter, have you viewed YOUR OWN Enfold Wedding Demo site on an actual mobile device? It has the same problem. Picture cuts off the woman’s head.
We don’t need a lesson in how to do media queries, we need, hopefully, some answers as to WHY media queries on this theme DO NOT WORK on ACTUAL mobile devices.
As I say, YOUR OWN DEMO SITE has this problem. Check it out yourself on an actual mobile phone.
Andy, I don’t know how much clearer I can be. We have checked on multiple mobile devices. To repeat, the parallax images are not obeying the commands we’re giving them as to where to position themselves within the frames. The commands work on a normal browser made to simulate a mobile, but have no effect on an actual mobile device.
Did you try this out yourself? Did you view the site on a mobile device?
Your theme is an excellent one and overall, the client is very happy with the look and functionality of it, however this one glitch is a serious problem.
Thanks for your attention.
I hope you have a solution to the above. The real issue appears to be that on mobile, with this particular theme for some reason unknown to us, the parallax images are not obeying the commands we’re giving them as to where to position themselves within the frames. The commands work on a normal browser made to simulate a mobile, but not on an actual mobile. Hopefully, you will be able to figure out why. Thanks in advance.
Thank you.
To be clear, we are no longer trying to create the parallax effect on mobile – I understand that is not possible. We are now only trying to control the cropping – the section of the photo that appears on mobile devices. As it stands, the desktop view selects from the TOP of the image, while the mobile view selects from the BOTTOM of the image. We are trying to get the mobile view to select from the TOP of the image – that would fix the problem.
My developer tried the code you sent. What happens is that the code is effective when the site is viewed in a browser on a computer that is simulating a mobile (for example, on Chrome); however, when the site is viewed on a mobile device, there is no effect.
Below, I will paste the contents of the custom.css file so that you can see we are applying these commands correctly. You can view the results for yourself by visiting the page: http://www.abeautifulceremonynw.com/newsite/faq/ and looking at the image at the top first in a browser in a mobile simulating view (where the screen size is small to trigger the css), and then again on an actual mobile device (We are testing on an iphone 5s and Nexus 5 and 6.
****************contents of custom.css below***************************** /* Have fun adding your style here :) - PS: At all times this file should contain a comment or a rule, otherwise opera might act buggy :( */ /* General Custom CSS */ /* Desktop Styles ================================================== */ /* Note: Add new css to the media query below that you want to only effect the desktop view of your site */ @media only screen and (min-width: 768px) { /* Add your Desktop Styles here */ } /* Mobile Styles ================================================== */ /* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */ @media only screen and (max-width: 767px) { /* Add your Mobile Styles here */ .responsive #top #main .container_wrap:first-child { background-size: 277% 85% !important; background-position: -337px 85px !important; } }Talking further with the client, it appears that the real problem is that the images are scrolling with the frame on mobile devices, rather than being fixed in position on the screen with the frame scrolling past the image. The images are frozen in position within the frame and are cropped oddly. Look at the site on a smartphone and you will see what I mean.
If the fixed/scrolling issue can be resolved, the images will be fine – don’t need to be responsive.
Here is the link to the site. I have started to replace the default demo content. You can see that there is NO LOGO in the upper left corner on my website but it appears if you scroll down. On your demo wedding site, there IS a logo in the upper left corner. WHERE does one enter that logo image? Thanks.
