-
Posts
-
Anyone have any idea why my layout would differ so greatly from what it is supposed to look like? Using 4.8.6.3 and no child theme.
Please see screenshot:
Further information: The above screenshots were created in standard windows. On mobile, I used an incognito window and the site loaded on mobile properly. THIS SHOULD NOT BE. Why the difference? Nothing on the site requires logins.
Additionally, I tried updating to 4.8.6.4 and it completely broke the logo size in the header. Logo was much larger that it appears on the screenshot above on every page. This issue was not oly for this site but many others I manage => I had to revert back to 4.8.6.3 on them.
Hey Ralph,
Thank you for the inquiry.
Did you set the background attachment to “fixed”? This might be causing the issue on mobile devices. We tried to inspect the site but it is not loading properly on our end. We may need to login to the dashboard first. Please post the admin account info in the private field.
Best regards,
IsmaelHi Ismael, Gunther just chimed in on a similar issue on this matter at https://kriesi.at/support/topic/logo-missing-quick-fix/#post-1323606. Would this be the issue and it was not found until after you replied?
The problem was not fixed with Gunther’s SVG file change. I updated again to 4.8.6.4 and swapped out his replacement php file. I am not sure why you said you could not inspect the site – I use Wordfence but there are no location blocks setup at all.
If you go to https://ready.mobi/ and run my url https://logancoedsoftball.com/ you will see exactly what the site should look like in all modes. BTW, I removed the bg graphic from smaller renderings below 768px since it would not work period. So, if you look at what ready.mobi delivers and the actual content on a real cell phone, they are quite different. On a real phone the logo in mobile is MUCH larger than it should be and pushes the mobile menu to the right so much you don’t even see the Facebook icon any longer. This also has nothing to do with anything child theme related since I am not using a child theme here.
I have numerous sites to manage and this was the first I tested on. There is definitely something wrong with the way logos are being downsized for mobile in the code.
Also, there should be no difference in what I see when I load the site in a standard mobile browser window vs. a private or incognito window. This is NOT the case. Elements are all loading in an incognito window and the logo is oversized. In a standard window, I am missing the blue color section backgrounds.
Hi,
Looks like you have hidden the section with the background image on mobile view. Can we access the dashboard? We would like to re-enable the section on mobile view so that we can check the issue properly.
Regarding the logo, please try to use this css code. We will forward the issue to our channel.
@media only screen and (max-width: 767px) { .responsive #top .av_header_transparency.av_alternate_logo_active .logo a>img, .responsive #top .av_header_transparency.av_alternate_logo_active .logo a>svg { opacity: 1; max-height: 80px !important; } }Best regards,
IsmaelHi Ismael, the code sent was entered into my Quick CSS and it had no effect whatsoever. Again, I am not using a child and the entry you gave me was the only thing in Quick CSS. Not sure if you’re understanding what I am seeing so here are 2 more screenshots from actual mobile. iPhone SE2 – both Safari and Chrome has exactly the same results. There should not be any difference between viewing the site in a standard window or a private/incognito window – but there is.
Safari/Chrome incognito/private
Safari/Chrome standard
If you view the site on desktop you’ll see the major difference. I have numerous other sites to update so I don’t want this happening everywhere after spending numerous hours getting things to look perfect on mobile and desktop.
Rikard commented in my post on:
Please read it. Is this a known issue and should I revert back to 4.8.6.3?
I’ve already replaced the file:
https://github.com/KriesiMedia/enfold-library/blob/master/temp_fixes/Enfold_4_8_6_4/framework/class-svg-images.phpThis dealt with svg images in the header and supposedly fixed non-svg images displaying properly.
Hi,
Thank you for the info.
Yes, the css code above should resize that logo. You may need to include this code inside the css media query to adjust the position of the mobile menu icon.
.responsive #top #header_main>.container .main_menu .av-main-nav>li>a { height: 80px !important; line-height: 80px !important; }This is what we get after applying the css code directly in the browser.
Screenshot: https://imgur.com/zUkNIx1
And yes, this is a known issue and it will be addressed in the next patch. For now, please keep the file modifications and try the suggestions above.
Best regards,
IsmaelHi Ismael, thanks for the additional code above. I added the snippet in reply #1323837 to your media query snippet in reply #1323734 and the logo is resized to a reasonable size when the page loads on mobile. BUT, it is still wonky on actual mobile browsers. This is precisely why I included real mobile browser screenshots in my reply #1323784. I am pretty sure you were on a desktop when you checked after the fix you generated – it is not the same on a real phone.
Now, in mobile Chrome, standard window, I still don’t see the blue title background under the logo. But, in a mobile Chrome incognito window, it shows up. ==> Why the difference?
In mobile Safari, all is good except for the fact that when you swipe up the logo resizes large again. Yes, it moves out of view during the swipe up but it only stays small in the page loaded position.
I have also always simply resized a desktop window to see where media queries would make tablet and phone layouts look – but they are not the real thing. Kindly try the site out on a real phone and advise on now to put this issue to bed once and for all. I have numerous sites to update and am not even remotely close to confident in the huge changes made in 4.8.6.3 and 4.8.6.4.
This issue is STILL present after updating to 4.8.6.5. There should be no difference in viewing this site in a standard window or an incognito window. Also when swiping the page upwards, the logo attempts to resize itself larger for a split second.
Still wiggy.
Hi,
Thank you for the update.
We do not see the css modifications that we suggested above when we try to look for it in browser inspector. It is supposed to limit the height of the image to 80px and it should work regardless of the device where the site is being tested.
.responsive #top .av_header_transparency.av_alternate_logo_active .logo a>img, .responsive #top .av_header_transparency.av_alternate_logo_active .logo a>svg { opacity: 1; max-height: 80px !important; height: 80px !important; }Where did you add the css code? The css code should also display in the browser inspector but it’s not present when we checked the site, which might mean that the css code is not added correctly, has been removed or it was not added at all.
Screenshot: https://postimg.cc/WDhkt9Bp
Best regards,
IsmaelThe following is the entire contents of my Quick CSS area as per your directions – it is there. Don’t know why you don’t see it. Try clearing cache.
@media only screen and (max-width: 767px) {
.responsive #top .av_header_transparency.av_alternate_logo_active .logo a>img,
.responsive #top .av_header_transparency.av_alternate_logo_active .logo a>svg {
opacity: 1;
max-height: 80px !important;
}.responsive #top #header_main>.container .main_menu .av-main-nav>li>a {
height: 80px !important;
line-height: 80px !important;
}}
——-
The screenshot you linked is certainly not current, that was from before I added the code.
And my last issue was not whether the code worked – it did from what I can see – it is WHY I see a difference in Chrome mobile between a standard window and incognito – there should be no difference.
Now, in mobile Chrome, standard window, I still don’t see the blue title background under the logo. But, in a mobile Chrome incognito window, it shows up. ==> Why the difference?
In mobile Safari, all is good except for the fact that when you swipe up the logo resizes large again. Yes, it moves out of view during the swipe up but it only stays small in the page loaded position
Hi,
The screenshot you linked is certainly not current, that was from before I added the code.
Please check the date of the screenshot (2021 10 08 at 9:10:08 am). We suggested the css code on the 7th of October 2021 (2021 10 07 at 5:01am).
Please post the login details in the private field so that we can access the site and check the issue properly. Or try to replace the whole css > layout.css file with the following code.
// https://github.com/KriesiMedia/enfold-library/blob/master/temp_fixes/Enfold_4_8_6_5/css/layout.css
Make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css code.
Best regards,
Ismael
- You must be logged in to reply to this topic.