-
Posts
-
Hello!
I noticed today that our content breaks on our page during a specific event. If the browser is zoomed to 90% and the pixels reach the 767 mark then both the mobile and desktop versions of the content appear simultaneously and overlap one another. I created a fresh install of WordPress and uploaded and installed the latest Enfold template (just to make sure the problem wasn’t on our end), created a new page with two text blocks (one to be hidden from mobile and one to be hidden from desktop) and the issue still occurred. Is there a work around to this problem or is this something that may be addressed in a future release of Enfold?
I took a few screenshots of the my process as well as the issue if that would help illustrate the problem.
Thanks for any help!
Hey lssu,
I can see this occurring when one element is hidden from mobile and the other is hidden from desktop because some of the css may be written as:@media only screen and (min-width: 767px) and @media only screen and (max-width: 767px)where both min and max use 767px, but there is no natural device that is 767px it is just a common brake point developers have picked, once you hit 768px this error should disappear.
I guess it would be possible to do a search and replace of the css files, and replace “max-width: 767px” with “max-width: 766px” and that would correct the issue.
Please include your screenshots and explain which elements you found this error in and how to reproduce.Best regards,
MikeOkay, let me see if I can put these in a sensible order. Here are the settings I have for each of the text blocks:
But then if you zoom the screen to 90% and tweak the pixel counts you can view just the desktop block, just the mobile block, and interestingly at 767 you can view both blocks:
I’ll try to see if I can tweak the CSS like you suggested, but I just thought it was strange that this occurs in this very specific scenario. The only reason why we caught it was because one of our users was viewing our page on a laptop and switched their view to a “docked view”. I am not sure if docked views automatically adjust the zoom slightly, but that was when the issue became apparent.
Thank you for your response!
Hmmm…so I made the change from 767px to 766px in all of the css files I could find and all I managed to do was now break the page to also display both textblocks on 766 as well. =P
Hi,
Thank you for the feedback, but when you did your search and replace did you only look for the “max-width: 767px” and leave the “min-width: 767px” un-changed?
It sounds like you changed both.Best regards,
MikeHaha…that was exactly what I did. I returned the min-width to its original 767px and that fixed that second issue. Sorry for that. :)
I am still having my original problem though (with the two text blocks displaying). Are you able to recreate it on your end? If so, what would be a workaround for it? I can’t seem to find anything similar in my searches…
Hi,
I recreated this on my localhost, and my research points to how the browser window width is calculated including the scroll bar.
The best solution I can offer is a jQuery script to correct it.
I tested this and it works, but only when the browser is loaded, if the widow width is changed, such as resizing the widow, it doesn’t work 100% of the time.
Try adding this code to the end of your functions.php file in Appearance > Editor:function custom_script(){ ?> <script> $(window).resize(function(){ if ($(window).width() <= 767){ $('.av-small-hide').css({ 'display': 'none' }); } }); </script> <?php } add_action('wp_footer', 'custom_script');Best regards,
Mike
- You must be logged in to reply to this topic.