Responsive Header Image for The Snaps theme

thefictionanthology · Member · Feb 4, 2016 at 2:30 am
Copy link

Add topic to favorites
Hi!!

I’m using The Snaps Theme for my website:

http://thefictionanthology.com

I like a lot the theme and the small things I needed to change (some colors and small things) wasn’t very difficult with the help I found in this awesome forum.
Thank you very much for that.

There is still only one thing that it’s a little annoying to me: the header image isn’t responsive by default. It crop it when the screen is smaller.
I find a simple css code and that helps:
```
.site-header {
	background-size: 100% !important;

}
```
Now the image scale down when the screen is smaller, but it keeps some grey margins over the top or the bottom. I try several things but I can’t get rid of it.
I’m sure that it easier for you, master of the css
Any suggestion??

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Feb 4, 2016 at 8:48 pm
Copy link
Hi there, yes that is one of the issues when you set a header to resize where it wasn’t meant to resize. You can use Media Queries to adjust the height of the area at different window widths, but when doing this sometimes we have a tendency to go way overboard and add queries every 50-100px or so.

First off, I would suggest adding this which will make the image stay at the top of the header area.
```
#masthead {
	background-position: center top;
}
```
I’ll give you this Media Query that you can use as a guide, which adjust the heigh of the area for the header image at 900px.
```
@media screen and (max-width: 980px) {
	.site-text-contain {
		height: 310px !important;
	}
}
```
I would suggest adjusting things only at these widths to keep from having things get crazy. If you were going to cover all mobile/tablet screen widths, you would end up with over 100 media queries. The following should cover things pretty well although on some devices there may be a bit of a gap.

900 (the one I provided above)
768
600
480
320
thefictionanthology · Member · Feb 5, 2016 at 1:19 am
Copy link
It works!!
I checked it in every device (I have) and now it’s great.

Thanks a lot
thefictionanthology · Member · Feb 5, 2016 at 1:19 am
Copy link
It works!!
I checked it in every device (I have) and now it’s great.

Thanks a lot
thesacredpath · Member · Feb 5, 2016 at 2:48 am
Copy link
Woohoo! and you are welcome.

No items found.