The problem isn’t that the image is too large. It’s that there are elements which have their width property set that keeps the page too wide when viewed on a mobile device. For example, the #wrapper has a width property of 930px and the #header has a width of 890px. If you fix that, the image will shrink down appropriately when viewed on a smaller screen. You can do that by adding this media query:
@media screen and (max-width:767px) {
#header, #wrapper {
width: 100%;
}
}
Note that you shouldn’t be modifying the theme’s stylesheet. If the theme gets updated because of feature enhancements, bug fixes, or security patches, or if the theme has to be updated because of a change to the WordPress core, then your changes will be lost. Instead, either create a child theme or use a CSS plugin like Jetpack or Custom CSS Manager.
