- Priority: 0
- Status: Closed
- Theme: Alysum
-
Assigned To:
Fred
- Private: No
- Open Date: 11.07.22, 10:15
- Opened by: Alexander Zuzzi
- Closed by: Anonymous Submitter
- Closed on:
- Reason: Not a bug
Ticket #23542 - Layout Shift Revolution Slider / Menu Tablet view
Dear Fred,
my shop is live now.
I encountered following layout issues:
1) There is a layout shift on the homepage. The first element is a revolution slider, which loads quite slow. So you see the second element for a second before the layout shifts. Is it possible to block the space where the slider will load to avoid this jump?
2) I tested the page on my old iPad. In the landscape view there is neither the mobile header nor the desktop header visible, but only a menu icon which does not respond to touch. I tried to change the @media setting to show the mobile menu on all devices that are max 1024 px wide, but I was not successful. Could you give me a hint how to achieve this?
Best regards
Alex
P.S. I want to let you know that I honored your great support with a review on envato market :)
Comments
Hi, Alexander.
Could you please update your website link, current one is not working for me
Sure. I forgot.
I was only able to edit the backoffice link. The new shop URL is www.weltfreund.at
Try to define a min height value for the slider - https://take.ms/FS58g.
I have tried, but unfortunately it did not work. The jump still exists and it creates a gap between header and Revolution Slider on mobile.
That’s a question to module developers https://classydevs.com/slider-revolution-prestashop/
But from my experience it will take much time to get a solution, so we will try to fix it ourself.
That is very kind of you.
Could you please update your FTP credentials. Currently I see nothing there - https://take.ms/3GyHA
Please try again. I have set the FTP home directory to public_html now.
Something wrong with the connection.
I can connect but when I try to open a folder nothing happens. Here is the log https://take.ms/yEj0U
I just can’t open “modules” folder, or any other one
okay. It seems we have triggered some security feature. I will contact the support of the server provider. I let you know, when it is fixed.
When I try to open a file I see the following error https://take.ms/KOClq
Please try again now. We have changed the FTP password for your account (it is updated in my profile). In Filzilla I can enter the directories now. Please let me know if it works now.
I have tried to add height attribute to the revolution slider root element but that didn’t help. Seems it renders in a bit different way. So I decided to add height property using CSS. I have added following code
into the file
Thank you. Great work, it looks good now on the big screen. What’s about the screens under 1200px?
you can adjust that code as you like, for example
<style type=”text/css”>
</style>
Great I will play around. Can I just add the code in the Customer CSS of the Theme or do I have to edit /themes/alysum/templates/_partials/head.tpl ?
You can try, but why I have added it into the file? because in this way the styles will be ready before the layout is loaded.
Okay then I will edit the file. Thank you for your help and your patience!
No problem!
I have done the @media adaptions. Looks good on most devices now. Thank you again.
Speaking of media queries. Have you read the second part of the ticket regarding the menu on tablets?
Sorry, I missed the second question.
I know about such problem, it’s because of outdated safari browser. Did you try to check it out on a fresh Safari browser?
P.S. Thank you for the support on Envato website
I have only an old iPad Air for testing. It is not possible to update it further than iOS 12.5.5
Is it possible to use to mobile header up to 1024px instead of the present header for this screen resolution. I have attached a screenshot, so you can see how odd the layout looks.
You are very welcome! Is there any other platform, where I could give a good review for your exceptional support?
screenshot
Attachments:
I just checked out global statistics and didn’t even find out iOS12 there https://gs.statcounter.com/os-version-market-share/ios/mobile-tablet/worldwide
So I would suggest to ignore the issue because it has no sense to find a solution for such an outdated iOS
Yes, you are totally right about the support for that outdated iOS. But the not functional menu is only a part of the concern. As you can see in the attached files the header looks odd in the range of 769px to 1024 px. My Analytics suggest that quite a few tablet users are in this range.
Attachments:
You can adjust the layout for different screens as you like - https://take.ms/SrsHg
But I can’t define the “Simple Mobile Header” (screenshot) here. I would like to show it instead of the header for all screens up to 1024 px. I tried to do it with CSS, but it did not work out that way.
Attachments:
it’s designed for small screens under 768px, but you can try to change it in the file /modules/pkheaderitems/views/css/front.css
find two lines
and
and adjust the width as you need
thank you. I will try that.
ok
Thank you Fred. That worked just fine!
You are welcome!