Viewport check: 320px

[mparvazi]

Header logo

The logo container display must be defined as block, in current implementation there is overlap with search icon if the logo width is more than 150px.

User menu button (Fixed by #343)

When customer is not logged-in there is an unwanted right padding, so we have extra space on the right side.

Newsletter block

Need to use full-width style for input elements.

Pagination

We have overflow when Next and Previous buttons are displayed at the same time. I think we need to hide text label for mobile screen.

Account page (Fixed by #357)

It's better to use an unstyle button for Back and place it under the page title.

Products list

Just a suggestion: showing one product per column on mobile screen.

[mparvazi]

I tried to change pagination display for XS screen with current design, but not works for big page numbers:

[mparvazi]

Wdyt about this?
A compact version for XS screen:

Support page numbers until 999 :P

[mparvazi]

I used pagination like this for ps 1.6 theme and it works fine:

[SharakPL]

I like that last one!
The compact one begs a question:

Does it go to previous page or to 1st?

Previous/next buttons are obsolete if it would look like this:

[Hlavtox]

Yeah, the prev/next ones maybe can go on mobile, or we can put them to next line, that also looks good.

[mparvazi]

Can we decrease page numbers on left and right side of selected page? (for mobile by css tricks)

I mean change it to:
< 11 | 7 (6) 5 | 1 >

[SharakPL]

Imo the top version is better since < and > are just duplications for 7 and 5 in this case. Top one gives more options to the user without taking more space.

[mparvazi]

@NeOMakinG Wdyt?

Desktop, tablet:

or

Mobile:

[NeOMakinG]

Imo the top version is better since < and > are just duplications for 7 and 5 in this case. Top one gives more options to the user without taking more space.

I guess it's not about duplication but make it more accessible with your finders, it's easier to click on a <> button than on a number on mobile

[NeOMakinG]

@TristanLDD can we have your input on this?

[SharakPL]

Imo the top version is better since < and > are just duplications for 7 and 5 in this case. Top one gives more options to the user without taking more space.

I guess it's not about duplication but make it more accessible with your finders, it's easier to click on a <> button than on a number on mobile

Actually it's all the same :) and if it's about having < and > in the mix then maybe we should use the most obvious:

| « | ‹ | 6 | › | » |

[NeOMakinG]

Go for the most obvious one anyway, if the product or design team wants to set some feedback later, they'll do it, 100% trusting both of you on this subject ;)

[mparvazi]

Fix for logo block.
Wdyt?

    {* index *}
    <h1 class="m-0 d-inline-flex">
      <a class="navbar-brand">
        <img class="logo" src="" width="x" height="y">
      </a>
    </h1>

    {* other pages *}
    <a class="navbar-brand">
      <img class="logo" src="" width="x" height="y">
    </a>

    // desktop
    .navbar-brand {
      .logo {
        width: auto;
        max-height: 4rem;
      }
    }

    // mobile
    .navbar-brand {
      .logo {
        width: auto;
        max-height: 2rem;
      }
    }

Before

Screencast-from-07-21-2022-01_08_47-PM.mp4

After

Screencast-from-07-21-2022-01_21_22-PM.mp4

[NeOMakinG]

Looks fine to me, I don't see any blockers!

[JBLach]

I will improve the view of the newsletter.

[JBLach]

I will improve the view of the newsletter.

Oh now I see that the newsletter has already been corrected and it looks good

[NeOMakinG]

I will improve the view of the newsletter.

Oh now I see that the newsletter has already been corrected and it looks good

Oh, I don't even remember who did this but that's cool then!