Mobile version title overlap

  • Author
    Posts
  • #63711

    arronbarnett
    Member
    Original poster

    Hi,

    I’m using the Port Theme on arronbarnett.com with CSS customisations.

    My problem is that when viewing portfolio screens from a mobile device, the responsive layout is causing an overlap. The title is overlapping the navigation items, as you can see from the image below.
    https://docs.google.com/file/d/0B9XgPCO4YI1gRU1xTVhoM0lfVlk/edit?usp=docslist_api

    Link to an example of an affected page:
    http://arronbarnett.com/portfolio/orbital-distant-lands-poster-collection/

    Is there any quick way I can sort this out with CSS for example?

    I’ve seen it on Nexus 5 running both 4.4.4 and 5.0 in chrome.

    I am also able to replicate this issue by resizing the window to certain sizes in the desktop versions of chrome, Firefox and internet explorer (Haven’t tried any others), so it looks like a general issue

    The blog I need help with is: arronbarnett.com

    #63922

    themetrust
    Theme Author

    Hi,

    This custom CSS should do the trick:

    @media only screen and (max-width: 400px) {
    .single-jetpack-portfolio h1 {
      max-width: 250px;
      line-height: 1.2em !important;
    }
    }
    #64073

    arronbarnett
    Member
    Original poster

    This seems to work on most screens on the Nexus 5, but not on others. For example, this screen is still having problems
    http://arronbarnett.com/portfolio/android-redesign-concept/

    Also by resizing the browser on desktop I can tell that this has not fixed the issue at all widths, so I’m worried that this will still leave issues on other devices for example.

    #64074

    themetrust
    Theme Author

    Upping 400px to a higher value should solve the issue.

The topic ‘Mobile version title overlap’ is closed to new replies.