Support » Theme: Scrawl » Header-space Behaviour on Phone in Portrait-orientation.

  • Resolved zer0blok

    (@zer0blok)


    Hi,

    I have an on-going issue with the Site-Title and Post-Title as they appear when viewed on my phone in portrait-orientation.

    A part of the Post/Page-Title is obscured by the white-space of the Header-area (Site-Title area).

    This is only an issue when the Site is viewed on a phone in portrait-orientation.

    I have asked for support on the ‘Header-area obscuring the Post-Title’ before, and the code i was given resolved issues i was having on the desktop-Site and mobile-site -but, i can’t fix this phone-in-portrait issue with the code i’ve got.

    This is the code which controls all the changes made to the theme’s Header-area /Site-Title:

    /* TITLE VISIBLE on SCROLL and  White-Space Manipulation*/
    
    .site-header {
    	  
        position: fixed;
        top: 0;
        opacity: 1;
        z-index: 1;
        background-color: #FFFDFD;
        padding-bottom: 0px;
        
    }
    
    .site-branding {
    margin-top: 8px;
    }
    
    .entry-header {
        padding-top: 10px;
    }
    

    *The only way i can get the Page-Title to appear as i want on my phone is to change the ‘padding-top’ value to 80px -this then appears perfectly; however, it also ‘pushes’ the Page-Title too far down on the desktop /tablet-sites…

    -Although this is a working solution across all devices, it also feels like an unnecessary compromise… i’d appreciate any helpt out there.

    With thanks
    πŸ™‚

    (A page which shows a long-Title: http://puproket.com/words )

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • Hi @zer0blok,

    Did you resolve this issue since writing in? I visited the page you linked to on my mobile device but am not seeing the overlap between the title and the page title any more. If you’re still seeing it, please let me know the device and browser you’re viewing the page on.

    Adding some margin to the top of your site’s main content area should help to resolve the issue, if you’re still having it:

    .site-content {
        margin-top: 3em;
    }

    If the above creates inconsistency that across devices, we could look into using media queries.

    For example, the following would only add margin to the top of the main content area on mobile devices:

    @media screen and (min-width: 48.9375em) {
        .site-content {
            margin-top: 3em;
        }
    }

    I’ll need to be able to replicate the issue you’re having in order to help with more specific CSS, though. Alternatively, you could have an experiment with the CSS I provided above.

    Increase/decrease the value of margin-top to your liking. Please note that increments/decrements of 0.1 are enough to have an impact e.g. 3.1em, 3.2em, etc.

    Let me know how you get on with that!

    Thread Starter zer0blok

    (@zer0blok)

    Hi @siobhyb !

    Always so pleased when people reply πŸ™‚

    No, the issue isn’t resolved. I’m using an iPhone SE. -Perhaps you are seeing a part of the Title, thinking it’s complete? For example, on the Front-Page the full-title is “*Please* Note”; on the Blog-Page (/words) it is “*The* Downside of Intergalactic Travel.” –

    However, it hadn’t occurred to me that this issue might be specific to the mobile-platform /phone model… I live an almost hermetic existence at the moment; i have to walk a mile to see anyone at all, or i’d check this on someone else’s phone immediately. I will check as soon as i can -just wanna point out that there is no issue when the iPhone is used in landscape-orientation, if that makes a difference.

    Regarding the code you’ve suggested:

    I have received and tried this code before, there were issues with it (from memory it messed with the Site-Title in an unwanted way); over a couple of support requests the code evolved to what it is now.

    I’m very happy to try it again because while i still know almost nothing about coding /Wordpress, i do know more now than i did then… The ‘@media screen’ code does look a little different to the one i had before –

    I’ll get back to you as soon as i’ve given it a good go. Thanks for your help.
    πŸ™‚

    Hi again, @zer0blok! πŸ™‚ I double checked and can confirm I’m seeing the full titles when viewing the site from my Android Pixel. It seems like this issue is specific to the iPhone, likely due to the difference in sizes.

    Media queries enable you to target certain devices based on their size, so definitely give that second piece of CSS I gave in my answer a try. Let me know if you have questions!

    Thread Starter zer0blok

    (@zer0blok)

    Hi @siobhyb

    Sorry, it’s taken a few days to be able to sit and work with the code.

    Good to hear that the Title does show correctly on some phones. I’ve tried the media query code but it doesn’t change anything. (Again, playing with the numbers does move the Title down on the phone-screen, but then the Title is also moved down on the desktop /tablet screens.)

    As a note, on the WordPress Customise preview, the phone-screen shows that the Title is obscured -I’m thinking then that although it does show as desired on your phone-screen, this is an issue for phone-screens in general.

    I followed ur media querys link, and have tried using @media code from there, as well as this code i picked up which is supposed to be iPhone specific:
    `@media screen and (max-device-width: 480px) {
    .class {
    background: #000;
    }
    }’

    Again, no luck.

    I understand why you’re saying that a media query should resolve this… but i haven’t found it.

    Any suggestions?
    πŸ™‚

    Thread Starter zer0blok

    (@zer0blok)

    *******

    I’ve used a solution which is basically re-sizing both the Site and Page Titles, and then changing padding /top /margin values in the code i already have to make them work across all devices.

    Although there is a visual change in the spacial-relationship between the site and page Titles, it is acceptable… i’m not designing the site with really tight aesthetics… just trying to make the work appear as it does on a writer’s page.

    I’m gonna stick with this solution. Thanks again for engaging so positively.
    πŸ˜‰

    Hi there,

    Apologies! I just noticed a typo in the CSS I originally provided to you: min-width should have been max-width:

    @media screen and (max-width: 48.9375em) {
        .site-content {
            margin-top: 3em;
        }
    }

    If you’d like to give the media queries another go, let me know! Otherwise, I’m happy you’ve found a different solution. πŸ™‚

    Thread Starter zer0blok

    (@zer0blok)

    @siobhyb

    Ah, just found ur reply. I’m gonna put the code in my little code-file, and try it another time. Thanks πŸ˜‰

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Header-space Behaviour on Phone in Portrait-orientation.’ is closed to new replies.