How to resize image for mobile

Looks like the theme is using the Site Origin page builder?

You can try just adding the image in – and setting it to width:100%

https://wpbeaches.com/make-images-scale-responsive-web-design/

Though the way it is now, it is a background image, so you would need to do https://www.w3schools.com/cssref/css3_pr_background-size.asp

So perhaps background-size: 100% auto

YEs, site is using Site Origin. Where abouts should I change the code to 100% because when I change the max width and height to 100% in the custom-header.php I get a parse error and have no option to change it back to fixed px or auto, but 100% isn’t accepted..

Which type of widget are you using in Site Origin?

Button, Maps, Image, Slider, Post Carousel. Though I’m not as yet doing anything with them.

I’ve been using the visual editor mainly to build the page and make changes. Seems easier to edit the code for some things.

This is the code for the custom-header.php as I have it set. If I change auto to 100% I get parse errors so I’m not sure what to do?

<style type=”text/css” id=”tesseract-admin-header-css”>
.appearance_page_custom-header #headimg {
border: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
<?php
if ( ! empty( $header_image ) ) {
echo ‘background: url(‘ . esc_url( $header_image ) . ‘) no-repeat scroll top; background-size: 1600px auto;’;
} ?>
padding: 0 20px;
}
#headimg .home-link {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0 auto;
max-width: 1040px;
<?php
if ( ! empty( $header_image ) || display_header_text() ) {
echo ‘min-height: auto;’;
} ?>
width: 100%;
}
<?php if ( ! display_header_text() ) : ?>
#headimg h1,
#headimg h2 {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
<?php endif; ?>
#headimg h1 {
font: bold 60px/1 Bitter, Georgia, serif;
margin: 0;
padding: 58px 0 10px;
}
#headimg h1 a {
text-decoration: none;
}
#headimg h1 a:hover {
text-decoration: underline;
}
#headimg h2 {
font: 200 italic 24px “Source Sans Pro”, Helvetica, sans-serif;
margin: 0;
text-shadow: none;
}
.default-header img {
max-width: auto;
width: auto;
}
</style>
<?php

/**
* Output markup to be displayed on the Appearance > Header admin panel.
*
* This callback overrides the default markup displayed there.
*
* @since Twenty Thirteen 1.0
*/
function tesseract_admin_header_image() {
?>
<div id=”headimg” style=”background: url(<?php header_image(); ?>) no-repeat scroll top; background-size: 1600px auto;”>
<?php $style = ‘ style=”color:#’ . get_header_textcolor() . ‘;”‘; ?>
<div class=”home-link”>
<h1 class=”displaying-header-text”> onclick=”return false;” href=”#” tabindex=”-1″><?php bloginfo( ‘name’ ); ?></h1>
<h2 id=”desc” class=”displaying-header-text”<?php echo $style; ?>><?php bloginfo( ‘description’ ); ?></h2>
</div>
</div>
<?php }

Perhaps change:

background-size: 1600px auto;

to:

background-size: 100% auto;

Though to be honest I would try and find a way of doing it without having to edit that file. Or use a Child theme.

Otherwise if you update the theme in the future it will overwrite you r changes.

background-size: 100% auto;

That didn’t fix it. Still not resizing on my Nexus 7 in portrait.

Do you think if I used another theme it would resize?

This is the code that is currently being used:

style="margin-left: -316px; margin-right: -316px; padding-left: 316px; padding-right: 316px; border-left-width: 0px; border-right-width: 0px; background-image: url(https://konchokbuddhistcentre.org/wp-content/uploads/2015/06/Bodhgaya-Buddha1.jpg); background-size: cover;"

Why don’t you just simplyfy.

Delete what you have currently.

And just add the image in plain html:

<img src=”image.jpg” alt=”” style=”width:100%;” />

Now you’ll see how clueless I am :-/
Where do I find that code to edit?