• Priority: Medium
  • Status: Closed
  • Closed by: Marek (marek)
  • Closed on: 30.08.19, 12:32
  • Reason: Closed
  • Comment: Glad to help!

Ticket #15166 - Header layout in mobile and tablet not showing correctly

Hello again,

I hope that you can please help us. We have Alysum running on Prestashop 1.7.5.2.

The issue we are having is that the header layout is broken when you view it on mobiles or tablets. We have tried turning AMP off, and having it ON, but the result is still broken.

We would be very grateful if you could please take a look and advise.

This ticket does not depend on any other tickets.

Marek (marek) 23 Jul 2019, 17:05

Hi, Stephen.
First of all, please check out the requirement for AMP here http://alysum5.promokit.eu/promokit/documentation/amp/troubleshooting.html

Then try to enable it again, it looks like this: https://take.ms/GUFJk

Stephen Selwyn (slselwyn) 24 Jul 2019, 11:23

Hi Marek,
Thank you very much for your reply, I’m very grateful.
I’ve had a read thorough read through of the installation, but I have a few questions that I am stuck on if that is OK.

1. Where do you get the amp_pk.zip file from? - your video shows you installing it, but I cannot see anywhere in the video that tells me where I get it from?
2. The troubleshooting guide says to make sure I have the ‘main URL Slug’ set in AMP Settings –> General. However,when I go to that page in my Prestashop 1.7.5, there is no option for Slug. Does this only appear after the AMP module has been installed?
3. It says ‘make sure you have no controllers-front folder. I have had a look in there and there are many files in there. These came from the install of Prestashop install. So just to be clear, I am to delete all of them?

I hope you can please advise and thank you for your help.

Marek (marek) 24 Jul 2019, 12:53

1. you don’t need the amp_pk.zip file, because it’s already installed with the theme
2. Here is it https://take.ms/8akAUy

3. You can ignore that because AMP works fine now https://take.ms/wrCWm

Stephen Selwyn (slselwyn) 25 Jul 2019, 12:20

Hi Marek,
We have encountered a further problem. As you quite rightly point out, the mobile view is now showing as it should.
However, if you click on the menu whilst on a mobile device, rather than the menu showing, we get a blank box/page instead.
I would be very grateful if you could please take a look an advise.

Marek (marek) 25 Jul 2019, 20:36

But where is the menu wishlist? I don’t see it

Stephen Selwyn (slselwyn) 26 Jul 2019, 09:58

Hi Marek,

We have the following problems to do with the mobile view and some other layout problems.

1. As you say, the Wishlist, Watchlist, and all the other menu items in that menu do not show up when viewing on a mobile.
2. If you click on the hamburger menu on a mobile device, the menu shows, but all of the menu items are missing so you cannot click anything.
3. One other thing we have noticed is that if you view the website on a desktop computer and then squeeze the browser horizontally as far as it will go so it looks like a mobil phone screen, the layout in the header completely breaks down.
4. We have the categories menu down the left hand side as we are using the ‘Electronic’ theme. If you click one of the links (try going to Resorative and then click on the ‘Materials’ link ), A row of products shows up. There are some products showing under the words ‘AllFeaturedSpecialLIst’. These are supposed to be menu items spaced out properly, but as you can see from my description, all of the link bleed together and are not styled correctly.
5. Also, when on that page, none of the products which have been assigned to that category are shown on the page as per your demo example on your website. There are products assigned to the categories on the left, so they should be showing. We have set the setting for product page layout to ‘electronic’

Hope you can please help.

Marek (marek) 26 Jul 2019, 11:39

1. Yes, because there is a completely different design for mobile what you can adjust in AMP Settings
2. You have to configure menu first, please go to AMP Settings
3. No one uses such way to browse websites, but ok, We will check it out
4. http://alysum5.promokit.eu/promokit/documentation/#faq7

Stephen Selwyn (slselwyn) 29 Jul 2019, 11:39

Hi Marek,
Thank you for your replies.
We have now go the main menu for mobiles working, so thank you for that.
I think you misunderstood point number 4.

This is the problem we have:

1. When you click on oneof the category items in the left hand menu, you will then see that underneath the slider is the ‘All Featured Special Latest’ sub menu. I have attached a screen grab of how this is showing. As you can see, the design style is not correct. Also, if you click on one of these menu items, nothing happens.

We would be very grateful for you help.

1.jpg (464.3 KiB)
Marek (marek) 29 Jul 2019, 11:57

you have to remove Isotope module from Category page in your layout. Or just set up “Default” layout for category page in the Theme Settings

Stephen Selwyn (slselwyn) 29 Jul 2019, 12:32

We want to have the Isotope showing, but why is the sub-menu for the Isoptope not styling properly?

Marek (marek) 29 Jul 2019, 13:02

Isotope can work in home page only

Stephen Selwyn (slselwyn) 29 Jul 2019, 14:43

Ah OK, thank you.

So at the moment this module is displayed correctly on the home page which is great. But if you click on one of the categories using the category menu down the left hand side, a new page is shown and the isotope module is still showing up.

1. I looked at the layout builder using the ‘electronic’ setting. Am I correct in thinking that the ‘electronics’ page in the page builder is the default home page and I then need to create new page layouts for the other pages?

2. I watched your video on building a new homepage and you had a feature called ‘amp.demo/mobile’ Can you please tell me where this is as I cannot seem to get that feature up?

Marek (marek) 29 Jul 2019, 20:44

1. Yes. it is, but it’s not necessary
2. Go to the Theme Settings → Amp and make sure the AMP option is enabled
Here is AMP documentation http://alysum5.promokit.eu/promokit/documentation/amp

Stephen Selwyn (slselwyn) 01 Aug 2019, 11:11

Hi Marek,
Thank you for your reply.
AMP is on as per your video. On your tutorial video you show a page where you can see the design and layout on a mobile phone or a tablet etc.
How do you reach that page as I cannot find it?

Marek (marek) 01 Aug 2019, 11:18

the AMP works fine for me https://www.evidentupdate.co.uk/mobile

Stephen Selwyn (slselwyn) 07 Aug 2019, 10:23

Ah! - it’s /mobile.

That was the bit I was missing. Thanks!

Marek (marek) 07 Aug 2019, 12:25

you are welcome

Loading...