Header image cut off on mobile devices

[kspkspksp]

Hi,

I created a new portfolio demo and can't seem to adjust the css to make the header image on the home page mobile responsive. Looks fine on the desktop, but on mobile devices the right half gets cut off. The rest of the images look fine.

This is the stock image that came with the weebly theme.

How can I adjust the css so the image on the header will adjust in size accordingly for mobile devices??

There is no main.css, only a main.less under Styles.

[Adam7]

Could you post a link to the site, @DeComputermanEU? I think it would be easier to figure out seeing the live site.

[DeComputermanEU]

It's not supposed to be live yet so I used this as a temporary link.

https://testdiederik.weebly.com

Thnx for your response

[Adam7]

Add this to Settings > SEO > Header Code and it should fix that on the live site:

<style>
	@media screen and (max-width: 992px)
	{
		.banner-wrap .container{
			margin-top: 30px !important;
		}
		.banner-wrap .container
		{
			padding: 150px 20px 50px !important;
		}
	}
</style>

[DeComputermanEU]

Thank you verry much! It worked! I only had to change the numbers a little to get everything in there.

I hope some day I can return the favor. 

[Adam7]

Awesome! Glad to hear that code worked for you.

[JacintaBennett]

Hi Adam, I am having similar problem however the height isn't an issue, just the centering of the header image.  Is there any way to add in some css code to center the header image in mobile view.  It seems to center ok on Desktop but not on mobile view.  This is an example page https://cgparish.weebly.com/groups--ministries.html to show you what I mean.  Many thanks for taking the time to read this message.  Jacinta Bennett

[JacintaBennett]

Actually please ignore my last message Adam.  I solved the problem.  I re-read some of your other responses and tried reducing the size of the whole image (while maintaining its width/height ratios) and it worked - yay!    Many thanks for all your responses to everyone.  I am an avid reader in my quest to solve some of the little complexities of Weebly.  Absolutely love the product but couldn't do it without your expert advice.  Jacinta

[Adam7]

That's great, @JacintaBennett! It's always nice to find a solution that doesn't involve any additional CSS code.

[DeComputermanEU]

Same problem on this site https://proefversieondermoedersvleugels.weebly.com/

Header shows great on desktop but is cut off for 80% on mobile.

Do you think the previous code will help me with this problem to?

Thanks in advance.

[Adam7]

It could, @DeComputermanEU. It's possible you might have to make some adjustments to suit your image, but it won't hurt to try.

[DeComputermanEU]

It seems that it does not change anything.

I added the code. I published it. Then I go to my mobile phone and enter the weebly link.

Any other Idea's?

[Adam7]

The horizontal dimensions of your image mean that the image isn't tall enough to fill the space well on mobile. Do you have a taller version of your background image, @DeComputermanEU?

[DeComputermanEU]

No I don't. This is the only image that came from the graphic designer.

[JustinCH]

---

@Adam wrote:

The horizontal dimensions of your image mean that the image isn't tall enough to fill the space well on mobile. Do you have a taller version of your background image, @DeComputermanEU?

---

That fixed the cropped image issue on mobile for me. Thanks!

[Adam7]

Fantastic!

[Adam7]

Hmm... Is there a particular part of the image that you would want shown more than another part? It would be possible to make it so that the two figures are shown, or the road, for example.

[sarahfm2018]

I have captions on my images (embedded in the image JPEG file).  www.brainhappy.co.uk.  It's the captions that won't show as they are on the edge.  I have tried making the images really small but mobile still zooms in.

I have spent hours on this.  Is there a solution?  Thanks.

[Adam7]

Something like this in Settings > SEO > Header Code should help with that on the live mobile site:

<style>
    @Media only screen and (max-width: 767px)
    {
        .wslide-slide-inner2 img 
        {
            float: none !important;
            width: 400px !important;
            margin-left: auto;
            margin-right: auto;
        }
    }
</style>

[sarahfm2018]

Hi Adam,

This still doesn't work for me and leaves a huge gap between the header and the rest of the page.  Any advice?

Thanks,

Sarah

[BCMarketing]

Hi Adam. I am also having the same problem where my header (no-header top section) is being zoomed in on mobile and cutting off the two boys fishing on the far left and far right. How can I fix this? Either by making this image 100% responsive on mobile or by creating a header section that only shows on desktop and another one that only shows on mobile?

http://bcmarketing.loginportal.site/preview/k7k00d.cflj3c4bm37j6.4735c5b241fa544f7c3a46a83ef9e214

Thanks!

[Bernadette3]

Are you able to post a screenshot of the mobile site? I'm having a hard time loading the url on my phone. I think the issue is the image ratio and the location of the subjects in the image. I don't think it would be possible to adjust the image responsively so that the boys were not cut-off, if that makes sense.