Mobile View on Arcane Theme Problematic

  • Unknown's avatar
    theartofintegralbeing · Member ·

    Hello!

    I wonder if you can help me with the mobile view of my website. It seems that the view is great on a PC/mac and tablet/ipad but not so good on the mobile phone. Mostly, the header takes up too much space and doesn’t disappear whence scrolls down as it doesn’t normally. That gives the viewer little space to actually read.

    Any ideas what can be done? I got the following CSS:

    @media (max-width: 480px) {
    .site-branding {
    display: none;}

    which only works on the vertical view of the mobile and removes the title, but the horizontal view doesn’t work, and also, is actually more important on the horizontal view because there is less space in general. Help! I have a headache ;-)

    Thank you in advance.

    Kind regards,
    Gabriella

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

  • Unknown's avatar
    hallluke · Member ·

    You could try something like this to hide all but the title, reduce the font size and shrink some of the spacing:

    @media screen and (max-width: 640px) {
	.site-logo-wrapper,
	.site-description {
		display: none;
	}
	.site-title {
		font-size: 1.5em;
	}
	#masthead {
		padding: 0;
	}
	.toggle-menu-wrapper {
		margin: 5px 0;
	}
}

    Alternativerly you could make the whole title section scroll off the screen like normal on mobiles, although this would mean the button to display your sidebar is only visible when scrolled to the top of the page:

    @media screen and (max-width: 640px) {
	.site-header.stuck {
		position: inherit;
	}
}
  • Unknown's avatar
    theartofintegralbeing · Member ·

    Hi Halluke,

    Forgot to reply before but need to say thank you! I used the second one an d it’s exactly what I needed.

    Kind regards,
    Gabriella ;-)

  • The topic ‘Mobile View on Arcane Theme Problematic’ is closed to new replies.