Community Forums › Forums › Archived Forums › Design Tips and Tricks › header image for Balance
Tagged: background, Balance
- This topic has 7 replies, 3 voices, and was last updated 9 years, 5 months ago by SavvyJackie.
-
AuthorPosts
-
May 13, 2015 at 11:38 am #152018jlphParticipant
I am using a taller image than the default header image space for the theme. Default width is fine at 960, but the image height is 728 instead of default 135px. I changed the css code for min-height here, but of course it looks ok only on my laptop. Do I need to change every instance of header image height in the css for it to look right on mobile? Thanks!
#header {
margin: 0 auto;
min-height: 728px;
overflow: hidden;
width: 960px;May 13, 2015 at 12:01 pm #152027SavvyJackieMemberHi,
What theme are you using? Do you have a link you can share?You can use StudioPress http://www.studiopress.com/responsive/ design checker to see how it looks on different viewports.
Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie
Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂
May 13, 2015 at 1:08 pm #152037jlphParticipantThanks for the response! I can't share the URL right now though. That site is interesting, and I did already check it on an iphone and ipad so I know it's not working. I just need to figure out what areas in the css I need to change the header image height to so it appears correctly everywhere, thanks!
May 13, 2015 at 1:13 pm #152041SavvyJackieMemberThe @media queries sections at the bottom of the stylesheet is where to look.
Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie
Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂
May 13, 2015 at 1:15 pm #152042emasaiParticipantA height of 728px is not great for SEO as all your content will fall beneath the fold. For mobile phones I would remove it completely, people checking web sites on their phone are looking for information not pretty pictures.
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comMay 13, 2015 at 1:25 pm #152046jlphParticipantI totally agree with you on the fold problem, but that's just the way it's going to be for this particular site. Also, it works for the subject matter of the site, so it will be ok I think. : ) Thanks!
May 13, 2015 at 2:24 pm #152062jlphParticipantThanks SavvyJackie! That's what I'm looking at but I can't find an element for the header image file itself to edit....or maybe I don't know what I'm looking for ha! Still trying...
May 13, 2015 at 2:29 pm #152064SavvyJackieMemberIf you don't see then try adding a copy of it from in the main section, and adjusting the values. Remember each @media query section is in it's own set of brackets. The max-widths may be different on yours. Just be sure to keep your additions inside the section brackets.
@media only screen and (max-width: 1139px) {}
@media only screen and (max-width: 1023px) {}
Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie
Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.