Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to make header image mobile responsive
Tagged: header image, mobile responsive
- This topic has 3 replies, 2 voices, and was last updated 9 years, 7 months ago by breadcrumbsguide.
-
AuthorPosts
-
August 9, 2014 at 1:21 pm #117967breadcrumbsguideMember
I am having trouble getting the logo header image for my website http://www.breadcrumbsguide.com to scale appropriately for mobile devices (or even narrow windows in a standard web browser on my pc). I am happy with how it looks down to a screen size around 768px but below that it crops too much of my logo. When I've tried messing around with the @media only screen and (max-width: 767px) section, nothing seems to be able to scale the image as I scale down the window size.
In the @media only screen and (max-width: 767px) section, right now I have the height set at 130px (the height of my logo image) for the following:
.title-area,
.site-title,
.header-image,
.site-header,
.header-full-width.header.image,
.header-image
.site-titleand background size is set to 100% 100% for:
.header-image .site-title aBut when I view my site on a small screen, it just crops my logo rather than showing the entire width of the image. Is there a way to scale the image so that I can show the whole thing or only have it crop 20-30% of the width so the text is at least visible when I scale down the screen size? I also don't want any padding around the image so I'll need to scale the boxes containing the image appropriately.
I've been tearing my hair out trying to figure this out so any help is greatly appreciated! Thank you for your help!
http://www.breadcrumbsguide.comAugust 9, 2014 at 1:39 pm #117973Genesis DeveloperMembertry the following CSS
@media only screen and (max-width: 767px){ .site-title a{ background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } }
August 9, 2014 at 8:21 pm #118010breadcrumbsguideMemberThanks genwrock, but that didn't seem to change anything. It may help if I also post this excerpt from my functions.php file:
//* Add support for custom header
add_theme_support( 'custom-header', array(
'header_image' => '',
'header-selector' => '.site-title a',
'header-text' => false,
'height' => 214,
'width' => 1068,
) );If anyone has been able to do this, please let me know!
August 9, 2014 at 9:47 pm #118017breadcrumbsguideMemberI went back through my code and stripped it down to the original css and was then able to figure it out using the background-size: cover feature and then changing the height within each media query. Thanks for your help! Here's the code I ended up using
.header-image .site-title a {
/*Changed background-size from contain to cover*/
background-size: cover !important;
height: 84px; /*I had to change the height for each media query otherwise it would use the default 214px and the image would spill off the side of the page*/
} -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.