CSS fix for Site Title/Menu

  • Unknown's avatar
    ernestobarbieri · Member ·

    I’m in need of a quick CSS fix for an issue that’s popping up on the mobile version of my site: nurserants.com.

    When I view the site on a mobile device, the site title “NurseRants.com” bleeds into the Menu (the two text lines overlap). It seems the mobile view “squeezes” the two lines together.

    Any suggestions for how to (a) make the title text smaller, or (b) ideally have them not bleed into each other? (I tried using “font-size=50%;” in CSS text editor, to no avail)

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi @ernestobarbieri, I notice this thread is marked as resolved, but I still see the issue on the site you reference. We can actually fix this rather easily with a Media Query and tell the browser on 450px and narrower screens/windows, move the title/tagline up a bit so things don’t clash. This would be the CSS you can try. 

    @media screen and (max-width: 450px) {
	.site-branding {
		position: relative;
		top: -55px
	}
}

    See what you think and let me know. :)

  • The topic ‘CSS fix for Site Title/Menu’ is closed to new replies.