• Closed by: Marek
  • Closed on: 27.09.18, 15:02
  • Reason: Closed
  • Comment: Glad to help!

Ticket #12962 - problem with ipad screen width

Hi Marek,
I have add in main menu “spot” category and now I see not full width in ipad or tablet screen. You can see that cart icon is visible only if you make an horizontal slide.
I need to have a smaller padding in menu in tablet display or I would like to put an “home icon” instead the “home” text. I see the svg icon in template but there is not for the home and I have some svg icon but i prefer to put the same style icon of other in template.

I attache a file like you see the issue.

please let me know a solution… (css code) and if you can also icon.

Thank you so much for your attention.

Grazie

Comments

Marek 25 Sep 2018, 11:17

Hi, Alessandro.
Try this:

@media only screen and (min-width:767px) and (max-width:1199px) {
    body .pk-menu-horizontal li.level-1 > a {
        padding-left: 10px;
        padding-right: 10px
    }
}

don’t forget about cache. As I can see you have enabled css compression

Alessandro Borsani 25 Sep 2018, 11:40

Ciao Marek, thank you!!
It work! now the menu is perfect on tablet.
But I don’t know because in tablet resolution is not more in full-width screen.
If you check you can see that if you want to see all width you have to use horizontal slider. I don’t know what generate this issue because before (when I went online) site was full-width with all resolution.

Please check also you and tell me about.

Thank you for your work and super efficency.

Grazie

Marek 25 Sep 2018, 13:44

Try this:

.header-1 .logo-left .header_logo {
    order: 0;
    text-align: left;
    flex-grow:1;
    min-width: 150px;
}
Alessandro Borsani 25 Sep 2018, 15:31

Ciao Marek, I try with last code but it doesn’t fix the issue.
The problem about not full-width is also on little screen. I have a 27 inch screen but if you just reduce the screen in 20inch for example you see that to see all home page you have to use horizontal slider!

Thank you

Alessandro Borsani 25 Sep 2018, 15:34

I just explain better:
the issue is visible on all pages: not onli homepage, but also in category or product page. So I think that problem is in footer or header like menu. This is strange because this issue there was in past and I just asked you and we have fixed it. probably or some override or other makes wrong now.

please check it out and let me know.

thabk you

Marek 26 Sep 2018, 12:23

Yes, I see the issue. Try this:

.header-1 .logo-left .header_logo {
    flex-grow:0;
    min-width: 150px;
}
Alessandro Borsani 26 Sep 2018, 12:31

Ciao Marek, this code fix the problem but now menu goes to the left position like you can see in attached file. I would have menu on right like before and only full width resolution.
Perhaps we can only add a left padding.
Please check it out and let me know. you can also see directly on website.

thank you so much

Marek 26 Sep 2018, 12:44

Use this:

.top-menu {justify-content:flex-end}
#pk_top_menu {flex-grow:1}
Alessandro Borsani 26 Sep 2018, 14:50

I put last code but it doesn’t fix the issue.

please check it out

Thank you

Marek 27 Sep 2018, 10:58

It works fine for me http://take.ms/IS4YN

Alessandro Borsani 27 Sep 2018, 15:02

Ok Marek, you are right… I have deleted cache in my browser and not it works good….mmmmm this cache is a nightmare hahahaha

You can close it

thank you so much