Question 409359 in CSS Question posted in
Some basic documentation can be found here.

Problem with conditional CSS media query for mobile phones

I am trying to have two columns in landscape mode or one column in portrait or landscape mode on phones.

For some reason I am getting one column on my iPad Pro when in portrait mode. Can anyone help me understand why?

Tested on the largest iPad Pro and an iPhone 12 mini, both machines in both orientations. The iPhone is correct, one column in portrait, two in landscape. The iPad is two columns in landscape (correct), but one column in portrait (incorrect).

This is my CSS:

article {
    max-width: 99%;
    columns: 2;
    }

@media only screen
      and (min-width: 375px)
      and (orientation: portrait)
    {
    article {
        columns: 1;
        }
    }
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I successfully used the following, but I have not yet tested it on other devices than the iPhone 12 mini:

    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px)
    and (orientation: portrait)
    {
    article
        {
        columns: 1;
        }
    }

    Perhaps someone could comment on this? I want the code to work on all smartphones, not just the iPhone 12 Mini.


  2. 0

    You used min-width: 375px in the media query – everything wider will have one column.

    (Maybe you meant max-width?)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search