Header for phones and tablets

  • Hello,

    Would someone please be able to help me out with site’s (www.eurasianwhispers.com) header?

    I’ve just finished designing the header and it works fine when you view the website on full screen without the bookmark sidebar open. However, as soon as a sidebar is opened/the browser is taken off full screen/the website is viewed on a mobile/tablet the header image – site identity layout gets messed up.

    (I’m not explaining this very well, but it’s very easy to see the problem when you open the website up)

    Is there anyway I can stop this problem so that wordpress automatically crops out some of the image as the header space is reduced?

    Thanks!

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

  • Go to Appearance → Customize → Additional CSS and add this rule:

    
#masthead {
   background-position: center;
}

    By the way, it looks like you made some changes to the theme’s style.css file? You should be cautious about making any changes to theme files. The next time you update the theme, your changes will be lost. Use WordPress’ new Additional CSS option instead.

    Thread Starter asfhrrrt1

    (@asfhrrrt1)

    CrouchingBruin,

    Thank you so much! – that worked perfectly.

    Just a small question: do you happen to know how I can have a separate header for when someone views it on a mobile?

    With regards to the theme’s style.css file, I think the only changes I have made are these:

    #masthead {
   background-position: center;
}

#primary {
	float: right;
	padding: 0 2.5em 0 0;
left;
	padding: 3em 0 0 2.5em;

}
#secondary {
	float: left;
	padding: 0.333em 0 0 2.5em;
}

    which are at the top of the style sheet. Would it be possible for me to just copy these onto a separate document and copy them in if the theme gets updated, rather than transfer them over to Additional CSS?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Header for phones and tablets’ is closed to new replies.