Header Image Resizing For NATURAL Theme

mandalamassageleura · Member · Aug 17, 2017 at 7:47 am
Copy link

Add topic to favorites
Hi guys,
I have a header image that doesn’t resize properly when it is viewed on mobile’s and is cropped. I know that dynamic themes do this and apparently this theme isn’t dynamic.
I really like the them though and was hoping for a solution.
I know that CSS coding might help but also have read that every theme is different.
So can someone help me out with the CSS coding and/or any other options open to me.
Thank you.
The site is mandalamassageleura.com

The blog I need help with is: (visible only to logged in users)
g471n · Member · Aug 17, 2017 at 11:00 am
Copy link
Hi mandalaleura

Try adding this line of CSS.
```
#custom-header .header-img {
    min-height: auto;
}
```
To add custom CSS

Select Appearance > Customize > CSS from your Admin Dashboard and enter the custom CSS there.
mandalamassageleura · Member · Aug 17, 2017 at 10:58 pm
Copy link
Thanks for the response, g471n.
I put the code in but it only cropped and narrowed the header on the pc display and did nothing for the mobile header :(
g471n · Member · Aug 18, 2017 at 8:17 am
Copy link
Oh yes, I see what you mean. I only previewed the change in my browsers developer tools mobile simulation. Let me have a closer look and find a solution.

g471n · Member · Aug 18, 2017 at 8:38 am

This should give you a better result.

@media only screen and (max-width: 500px) {
	#custom-header .header-img {
    min-height: auto;
	}
}

mandalamassageleura · Member · Aug 19, 2017 at 1:00 am
Copy link
I so absolutely appreciate your efforts, g471n, but it still doesn’t seem to be working, i’m afraid :(

g471n · Member · Aug 19, 2017 at 7:46 am

@media only screen and (max-width: 500px) {
#custom-header .header-img {
min-height: auto;
}
}

g471n · Member · Aug 19, 2017 at 8:04 am
Copy link
The apostrophes at the beginning and end were not supposed to be there. Sorry for the confusion.

If it’s still not working correctly, please leave the code in the CSS customizer and let me have another look at it.
thesacredpath · Member · Aug 19, 2017 at 9:02 am
Copy link
Fixed the backticks on your reply, @g471n. :)
g471n · Member · Aug 19, 2017 at 9:10 am
Copy link
Thank you kind wizard ;)
thesacredpath · Member · Aug 19, 2017 at 10:27 am
Copy link
You are welcome. :)
mandalamassageleura · Member · Aug 22, 2017 at 1:51 am
Copy link
HI g471n,
Thanks again for your perseverance. Unfortunately, still not working with the new coding you provided.
Have left it in the CSS customizer as you mentioned.
Fingers crossed you can find a solution and thanks again for taking the time :)
mandalamassageleura · Member · Aug 22, 2017 at 7:06 am
Copy link
Forget my last comment, g471n, it does work! It just doesn’t on Internet Explorer for some reason, but works in the other browsers.
Thanks so much.
I really appreciate your time and patience :)
g471n · Member · Aug 22, 2017 at 7:26 am
Copy link
Hooray! You are welcome :)
g471n · Member · Aug 22, 2017 at 7:39 am
Copy link
I’ve got Internet Explorer 11 on my computer and it’s working.

Couldn't find what you needed?