Mobile layout

Store Design
, ,

Topic summary

A user seeks help adjusting their mobile website header layout to reposition elements including the menu drawer, search box, logo, and account icon. They provide before/after comparison images showing the desired configuration.

Solution provided:

  • A web designer shares custom CSS code to restructure the header using CSS Grid
  • The code repositions elements: menu drawer, search box (spanning full width on row 2), localization icons, and account icon
  • Additional CSS adjusts spacing between the logo and drawer using left padding

Follow-up issue:

  • The search box later shifts position unexpectedly
  • Resolved with targeted CSS fixing the grid-row and grid-column properties for the search element

Current status:

  • The original poster confirms the solutions worked successfully
  • Later comments discuss general mobile layout best practices for forms and registration processes, though these appear tangential to the specific technical issue resolved
Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hi There

I was hoping I could get some assistance with changing the mobile layout website from the below

IMG_FD2B113F3E75-1.jpeg
IMG_FD2B113F3E75-1.jpeg750×1006 115 KB

to look like this

IMG_FD2B113F3E75-1.png
IMG_FD2B113F3E75-1.png750×1006 847 KB

2

Hello Sir,

Please Share Your Store Preview Link

3

https://gizmosphere.co.za/?_ab=0&_fd=0&_sc=1

4

Sir,
Can you Share Password?

5

JuraT3mp3st@Hunt3r

6

Add this code in edit code > base.css file

@media screen and (max-width:767px){
   header.header.header--middle-left.header--mobile-left.page-width.header--has-menu.header--has-account {
        display: grid !important;
    }   
    header-drawer {
        grid-column: 4 / 4;
        grid-row: 1 / 2;
        margin: 0;
    }
    .EzfyHeaderSearch.EzfyHeaderSearch--mobile {
        grid-row: 2 / 3;
        grid-column: 1 / 6;
    }   
    .header__icons.header__icons--localization.header-localization {
        grid-column: 5 / 5;
        grid-row: 1 / 1;
    }
    a.header__icon.header__icon--account.link.focus-inset.small-hide {
        display: grid !important;
    }
    h1.header__heading,a.header__heading-link.link.link--text.focus-inset {
        grid-column: 1 / 2;
    }   
}
7

Thank you so much, that worked. Can you tell me how I can space it out just a bit more between the logo and drawer?

8

add This css in you edit code > base.css file

@media screen and (max-width:767px){
   header-drawer{
     padding-left: 3rem;
   }
}
1 Like
9

Thank you so much. This worked

10

Hi there, could you please take a look at my code. I am not sure what has happened however the search box has shifted. I cannot seem to get it back to the original location. Your assistance would be greatly appreciated

Screenshot 2024-07-29 223500.png
Screenshot 2024-07-29 223500.png396×826 69.7 KB

11

Add this css in edit Code > base.css file

@media screen and (max-width:767px){
  header.header .gizmosphereHeaderSearch.gizmosphereHeaderSearch--mobile {
    grid-row: 2 / 2;
    grid-column: 1 / 6;
  }
}
1 Like
12

Mobile layout is essential for enhancing user experience on smaller screens, particularly for processes like registration. When it comes to SIM registration globe the design needs to prioritize clarity and accessibility. Features like streamlined forms, intuitive navigation, and touch-friendly buttons make the registration process smoother. An optimized mobile layout ensures that users can complete their registrations easily, ultimately improving engagement and compliance.

13

sistem pengurusan identiti (idme) kpm yang digunakan untuk memastikan keselamatan dan ketulenan maklumat pengguna. Ia membantu dalam proses log masuk dengan ciri keselamatan tinggi, mengesahkan identiti pengguna untuk mengakses perkhidmatan kerajaan, kewangan, dan lain-lain secara selamat

1 Like
14

For the mobile layout issue, he just needs to select the image and set it to full width. that should resolve the layout problem on smaller screens.

Also, I’ve designed and developed many websites using Gutenberg, including a project for IDme. Feel free to check out my previous work if you’d like to see examples of how I handle responsive design.