Header Image too big for mobile phone

Hello,

I think (because I’m a bit of a hack) I overcame an issue similar to yours by adjusting the “@media (max-width:359px)” to 400px. But I made other changes to the header as well which I did in the style.css of my child theme. I would highly recommend the use of a child theme. But you could test this change in “Addtional CSS” I believe. You could view my site at ucanknowgod.com

Below I have pasted the section of my child style.css relative to displaying on a phone: (As I said I made other changes to the look of the header.)

/**
* size of title and description fonts changed to fit better on phone. 3/1/2018
* —————————————————————————-
*/
@media (max-width: 400px) {
.site-header{
position: relative;
width: 100%;
min-height: 100px;
margin-bottom: 1.5em;
}

.site-title {
font-size: 2.0em;
letter-spacing: 1px;
margin-top: 5px;
margin-bottom: 3px;
}

.site-title ::after{
margin: 2px auto;
}

.site-description {
font-size: 14px;
letter-spacing: 0px;
margin-top: 1px;
margin-bottom: 2px;
}
}

Cool, thanks @b4iamnot! I will have a look at this tomorrow and see if it works for me!

I will let you know how it goes.

Thanks

Actually @b4iamnot, I went ahead and added the code to the Additional CSS section and it made a huge difference. There is still just a little bit of clipping on each side of the header on a mobile phone but it is much much better. I think I can work with this now.

I greatly appreciate the help!

Bryan

I just wanted to add a comment and tell you this fixed it for my mom’s website I am working on, too. Thank you so much!!!!