Configuration issue with custom views (phone/tablet/PC)

Configuration Frontend
1

Hi Guys,

I am trouble because I don’t understand what is wrong im my config. I would like to make a nice tablet view, but the colums withd doesn’t fit width my tablet screen but with the same resolution, it fit with the PC screen.

Could you please help me where I made a mistake?

here is the PC screen:

Másik-PC
Másik-PC1846×1075 105 KB

and here my tablet screen:

20240519_112418
20240519_1124181920×1081 153 KB

The two floorplan had a little different screen size but it doesn’t metter.

Here is my config

views:
  - type: custom:grid-layout
    path: home
    background: center / cover no-repeat fixed url("/local/blur_background.jpg")
    theme: noctis
    layout:
      #default
      margin: 0
      grid-gap: 15px
      grid-template-columns: 300px repeat(4, 1fr) 0fr
      grid-template-rows: 15px repeat(4, fit-content(100%)) 55px
      grid-template-areas: |
        "sidebar       almenu         menu          alap        alap          ."
        "sidebar       almenu         menu          alap        alap          ."
        "sidebar       media          menu          alap        alap          ."
        "footer_people footer         footer        footer      footer        ."
      mediaquery:
        #phone
        "(max-width: 800px)":
          grid-gap: 40px
          grid-template-columns: auto
          grid-template-rows: auto
          grid-template-areas: |
            "menu"
            "footer_people"
            "alap"
            "sidebar"
            "media"
            "almenu"
            "footer"
        #tablet
        "(max-width: 1200px)":
          grid-gap: 5px
          grid-template-columns: 250px repeat(4, 1fr) 0fr
          grid-template-rows: 30px repeat(4, min-content) 45px auto
          grid-template-areas: |
            "sidebar       almenu         menu          alap        alap          ."
            "sidebar       almenu         menu          alap        alap          ."
            "sidebar       media          menu          alap        alap          ."
            "footer_people footer         footer        footer      footer        ."

Thank you very much for you help.

2

Your code works fine and there is not much wrong with it. The problem lays with this part:


#tablet
"(max-width: 1200px)":
  grid-template-rows: 30px repeat(4, min-content) 45px auto

Your content in sidebar or almenu and media is too big. Because of min-content, this will create a container with too much height, resulting in yout footer being out of the view.

1 Like
3

Thanks your help.

But i tried this and a lil bit helped but till I can’t get what I see on the PC screen with the same resolution.

Do you have any idea?

#tablet
    "(max-width: 1200px)":
          grid-template-rows: 15px repeat(4, fit-content(100%)) 45px auto

This is now:

1000013359
10000133592560×1600 192 KB

4

The difference in size maybe comes from the different way OS’ handle pixels, points or percents.

I think the best fix is too make the main grid areas a little less ‘height’. You could use overflow or set a maximum value with pixels, points or (r)em.

Other options are to change the grid view for tablet and rearrange.

Good luck!

1 Like
5

Thank you very much. I will play with it. I give a try to resize fonts, perhaps it will help.

:v:

I will come back if I have a succes.

1 Like