Mobile portrait view not full width

  • kiwibrit

    (@kiwibrit)


    6 years, 8 months ago

    WordPress 5.2.3 running twentyfourteen-child theme
    Url: http://clapa.org
    viewed through iOS 13.1.1 iPhone 7 Safari and Chrome
    Problem similar in friend’s Android phone

    When viewed on a mobile in portrait view, the website does not run at full width. There is no problem when the phone is viewed in landscape, or on desktop or tablet. The main theme has had #secondary theme css commented out, as there had been a problem with left hand side of page links being blanked out.

    Oddly pages with my TablePress pages, such as http://clapa.org/calendar-2019/ the table part of the page does run at full width.

    I’d be grateful for advice on how to fix the pages not running at full width – for mobiles held viewed in portrait mode.

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • tapiohuuhaa

    (@tapiohuuhaa)

    6 years, 8 months ago

    Create conditional CSS. Typical phone use in portrait mode:

    @media screen and (max-width:472px){…}

    Try there set marging differently. Indeed I did not found problems with margin at that width.

    Typical tablet uses in portrait mode

    @media screen and (min-width:473px) and (max-width:782px{…}

    Thread Starter kiwibrit

    (@kiwibrit)

    6 years, 8 months ago

    Thanks for that. It is a long time since I regularly produced web sites – I am now well into my 70s; I produced and look after this site technically as a favour to the association – using WordPress kept things fairly simple. I thought I was still reasonably up to speed with css – but am unfamiliar with conditional css and @media.

    Looking through the main theme style.css I see that @media screen appears 15 times, so I will have to look through the sheet and figure out what each usage is doing.I shall also have to look that I haven’t caused conflict in the child theme css and settings in the TablePress plug-in. Now that I have had this initial prompt, I think I will get it sorted – though of course any steer on where to start would be welcome.

    I shall report back on how I get on.

    tapiohuuhaa

    (@tapiohuuhaa)

    6 years, 8 months ago

    There are two main breaking points:
    481/482
    782/783

    >481 : for mobile phones in portrait mode
    482-782: for tablets in portrait mode
    783+ for wide screen

    I think that you don’t need more than these three:

    @media screen and (max-width:481){}
    @media screen and (min-width:482px) and (max-width:782px){}
    @media screen and (min-width:782px) {}

    max-width:320px is nowadays so seldom needed that in my mind doesn’t need to take account.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Mobile portrait view not full width’ is closed to new replies.