• 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

Fred 11 Jul 2022, 11:04

Hi, Alexander.
Could you please update your website link, current one is not working for me

Alexander Zuzzi 11 Jul 2022, 13:06

Sure. I forgot.
I was only able to edit the backoffice link. The new shop URL is www.weltfreund.at

Fred 11 Jul 2022, 14:51

Try to define a min height value for the slider - https://take.ms/FS58g.

Alexander Zuzzi 11 Jul 2022, 15:42

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.

Fred 11 Jul 2022, 15:44

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.

Alexander Zuzzi 11 Jul 2022, 15:56

That is very kind of you.

Fred 12 Jul 2022, 13:10

Could you please update your FTP credentials. Currently I see nothing there - https://take.ms/3GyHA

Alexander Zuzzi 12 Jul 2022, 13:20

Please try again. I have set the FTP home directory to public_html now.

Fred 12 Jul 2022, 13:29

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

Fred 12 Jul 2022, 13:30

I just can’t open “modules” folder, or any other one

Alexander Zuzzi 12 Jul 2022, 13:51

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.

Fred 12 Jul 2022, 14:41

When I try to open a file I see the following error https://take.ms/KOClq

Alexander Zuzzi 12 Jul 2022, 14:44

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.

Fred 13 Jul 2022, 14:57

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

<style type="text/css">
    @media (min-width:1200px) {
     .rev-slider-section .elementor-widget-pkrevslider {
      height:1800px
     }
    }
</style>

into the file

/themes/alysum/templates/_partials/head.tpl
Alexander Zuzzi 13 Jul 2022, 15:08

Thank you. Great work, it looks good now on the big screen. What’s about the screens under 1200px?

Fred 13 Jul 2022, 15:09

you can adjust that code as you like, for example
<style type=”text/css”>

  @media (min-width:1200px) {
   .rev-slider-section .elementor-widget-pkrevslider {
    height:1800px
   }
  }
  @media (min-width: 600px) and (max-width: 1200px) {
   .rev-slider-section .elementor-widget-pkrevslider {
    height:1000px
   }
  }
  @media (max-width: 600px) {
   .rev-slider-section .elementor-widget-pkrevslider {
    height:500px
   }
  }

</style>

Alexander Zuzzi 13 Jul 2022, 15:14

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 ?

Fred 13 Jul 2022, 15:16

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.

Alexander Zuzzi 13 Jul 2022, 15:18

Okay then I will edit the file. Thank you for your help and your patience!

Fred 13 Jul 2022, 15:19

No problem!

Alexander Zuzzi 13 Jul 2022, 16:14

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?

Fred 14 Jul 2022, 11:13

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

Alexander Zuzzi 14 Jul 2022, 11:37

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?

Alexander Zuzzi 14 Jul 2022, 11:38

screenshot

Attachments:

IMG_0113.jpg (211.8 KiB)
Fred 14 Jul 2022, 11:53

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

Alexander Zuzzi 14 Jul 2022, 12:05

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.

Fred 14 Jul 2022, 14:08

You can adjust the layout for different screens as you like - https://take.ms/SrsHg

Alexander Zuzzi 14 Jul 2022, 14:31

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:

Fred 14 Jul 2022, 15:40

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

@media (min-width: 769px) {

and

@media (max-width: 768px) {

and adjust the width as you need

Alexander Zuzzi 14 Jul 2022, 15:43

thank you. I will try that.

Fred 14 Jul 2022, 15:47

ok

Alexander Zuzzi 14 Jul 2022, 16:28

Thank you Fred. That worked just fine!

Fred 14 Jul 2022, 16:31

You are welcome!