Site title on mobile

  • Hi,

    I’ve been trying to stop the site-title from being suppressed when the site is viewed on a mobile device.

    I’ve used the custom css below (from another support post):

    @media (max-width: 767px) {
    #masthead {
    min-height: 160px;
    }
    .site-logo-link + .site-title,
    .site-description {
    display: block;
    }
    .site-branding {
    top: 30%;
    }
    }

    This does indeed stop it being suppressed.

    BUT … the header of pages other than the home page is laid out differently, using :

    .site-branding {
    left: 50%;
    position: absolute;
    top: 40%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    }

    This causes the div containing site-title (site-branding) to be 50% the width on the homepage … so the site-title wraps within it. Which looks awful.

    Is there a way to prevent this ?

    I tried applying the css from home page (below) to all pages … but this ended up giving different appearance on different pages.

    #masthead .site-branding {
    left: auto;
    position: relative;
    top: auto;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    }

    Any help appreciated as I’ve been trying this for day! Thanks

    • This topic was modified 6 years, 3 months ago by Dan761.

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

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

  • Hi there,

    This code appears to give a consistent result across all pages:

    @media (max-width: 767px) {
	.site-logo-link + .site-title,
	.site-description {
		display: block;
	}
	#page #masthead .site-branding {
		position: relative;
	}
}

    Can you check it on your end?

    Thread Starter Dan761

    (@dan761)

    Hi,

    This works really well … except for with Safari on a Mac.
    The menu bar appears on top of the site-title on all pages except home.

    Any suggestions ?

    Tested successfully (ie no issues) on :
    – Chrome & Safari on an iPhone 6
    – Chrome & IE on a laptop PC
    – Chrome on a Mac

    Thanks !

    I don’t see what you’re describing in Safari. Here’s how the menu and title appear to me on all pages on your site – screen shot specifically on the Services page:

    https://cloudup.com/cS5r61CPyKz

    Did you manage to figure this out? Is any of the CSS you tried from your original post in this topic still active on the site?

    Thread Starter Dan761

    (@dan761)

    Can you see this ?
    https://www.spacesandsenses.com.au/wp-content/uploads/2018/08/Screen-Shot-2018-08-30-at-10.59.17-pm.png

    It seems to be only on the Services page, and only when I first open the page.
    If I resize (width) the screen a bit – either wider or narrower – the menu bar drops to its ‘proper’ position.

    I have deleted the original css I tried for this.

    Thanks

    • This reply was modified 6 years, 3 months ago by Dan761.

    My apologies for the delay.

    I don’t see that if I look at the page, no.

    What version of Safari and Mac OS are you using? I’m wondering if it might be an older version of Safari that might be rendering the theme’s code differently, but I don’t know why it would affect only that one page.

    Hi @dan761, were you able to tell whether this was related to your browser version? I’m not seeing it here either.

    Thread Starter Dan761

    (@dan761)

    Thanks all.

    I got some assistance from a colleague who does web development – turns out there was a bug in one of the underlying theme files. Can’t remember which one though.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Site title on mobile’ is closed to new replies.