Mixed displays in tablet view

  • Resolved Anonymous User 16103310

    (@anonymized-16103310)


    6 years, 6 months ago

    Well I’m sorry to ask this because I’m a beginner and I’m just learning css but I’m faced with a serious problem. When I’m editing my site in custom css, the live preview shows the same display both for mobile and for tablet (mobile view). But when I try to test the display using tools available on Google, the tablet view is mixed up. It picks the header for desktop version and picks the shop content page of mobile version and screen is covered only half way with only two items and the other two items go down onto another line leaving the other side empty. I would prefer if it inherits either that of the mobile version or that of the desktop version as it appears in the live preview when I’m editing but not mixing up the two. Thanks in advance

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter Anonymous User 16103310

    (@anonymized-16103310)

    I managed to figure out and got the solution. I was using max-width:768px and changed it to 767px in my custom css. Now I have a question. If I use a rule like (max-width 767px) and I set another for (min-width 768px), what happens to width which is (767.5px)
    Thanks in advance

    Job a11n

    (@jobthomas)

    Automattic Happiness Engineer

    Hi there @abanista – that’s the breaking point and those will be included within your definition.

    So, max-width: 768px will include everything that’s 768px or less wide.

    If there’s a gap, like what you’ve done, it’ll revert to a default. Ideally, you don’t use media-queries as you’ve done though.

    It’s best to always work with min-width (mobile first approach):

    Start with defining all values for mobile (mobile becomes your default), and then go to the media-queries to make the changes to those defaults.

    Thread Starter Anonymous User 16103310

    (@anonymized-16103310)

    Thank you very much @jobthomas – let me make those changes

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Mixed displays in tablet view’ is closed to new replies.