Mobile Header Banner Image Cut Off (Birdseye Template)

[MeghanPM2002]

Hello, 

My client's website looks great on desktop, but the header banner images (in any format: landpage, short, tall, etc.) are not being resized for mobile and are being cut off to only repsent a middle slice of the photo. A lot of these photos are partners of the firm and it's imperative that the whole image show. Can someone offer any assistance with this?

Here's the site so far: smithshapourian.weebly.com

Thanks in advance!

[Erin6]

Hi, there!

It may be because you have customized your theme. Will you try first making a copy of your site, then changing it to the Birdseye theme without the customizations? Let me know if that makes any difference.

You can make a copy of your site by clicking the button with the three dots next to the Upgrade button on the dashboard.

Thanks,

Erin

Weebly Community Manager

[MeghanPM2002]

Hi Erin, 

I'm able to do this, but I don't see how this will resolve my issue. I need the customizations on the website for my client and I'd like the mobile website to function with the simple changes that I've made to the template like photo updates, etc. I didn't make any major chages or updates to the theme itself other than photos and fonts. Is there a way to resolve this without undoing the dilgient work I put into the customizations?

Thanks!

[bobafett]

@MeghanPM2002: I can't offer any suggestions as I can not even access your site - that is more than minor modification on a free weebly site.  Anyway, for your future reference if mobile view is important you need to design website with 'mobile first' mind set. View the changes you make on mobile as well as large screens and you will never have a problem.

I learned it the hardway! (had to eat the hours I spent)

[Erin6]

Hi, again.

I'm not sure yet if it will resolve the issue, but it's a great way to narrow down what exactly the issue is. The image should be responsive on mobile, so my first thought was that something you customized is overriding that responsiveness.

Thanks,

Erin

[bobafett]

@MeghanPM2002: and you do not have to convert your entire theme.  Just make a blank theme with default images and see how it looks on mobile.

[MeghanPM2002]

Hi Erin, 

Thanks so much. I went ahead and did this it's a little strange. One page (About) of the mobile version is responsive on mobile and the rest are still getting cut off, it doens't seem to matter whether they are short headers or landing pages either. See attached images. 

This did shed some light on what I customized that could have caused this, however it's strange that it's still not responsive when I reverted to the regular Birdseye template withut customizations. I didn't want any headlines for this theme, so I removed that from the CSS. Is there any way to remvove the autofill headlines without modifying the css?

Thanks for your help.

Meghan

[MeghanPM2002]

Just a quick note as I realized I was wrong before. The mobile error is only occuring on the Tall header Pages on my customized tempalte. On the Birdseye version I just created with no customizations it's actually occuring on even the short header pages, where it's not on my other site. Seems strange, but perhaps helpful.

[Erin6]

Hey!

To answer one of your questions, if you don't fill in the headline, nothing will appear when you publish the site. In other words, after publishing, the "Add a headline" text won't appear if you just leave it.

Let me take a quick look at your sites, and I'll see if we can do some further troubleshooting on this.

Thanks,

Erin

[Erin6]

@MeghanPM2002 - I'm still checking on this for you, but do you know the dimensions of this image before you upload it to Weebly?

Thanks,
Erin

[MeghanPM2002]

Hi Erin, 

Thanks so much for your help! Attached is what Preview is telling me about the size of the photo. Should I try resizing it?

Thanks again, 

Meghan

[Erin6]

Try making it a bit smaller, and see if that makes a difference on your site.

Let me know if it doesn't. 

Thanks!

Erin

[Tereva]

Hi Erin !

I followed your conversation because I have the same issue with my website (banner not resized on mobile view).

I tried to decrease the size but it doesn't function..

Do you have another advice ?

Here is my website (but I have 4 websites with the same theme and the same issue) : http://terevafr.weebly.com/

[Adam7]

Short of theme customizations, it's going to be tough to control which parts of the image are not shown on a mobile device @Tereva. The main cause of this is the difference in screen aspect ratio with a mobile device versus desktop. The header will become inherently taller and narrower with a mobile device, which then causes this sides of a image to be cropped out.

[Tereva]

Thank you Adam.

But I'm not sure to understand what you mean. Is it not possible to resize my picture ?

I would like to show you some image to explain but the "insert photo" button doesn't function !

Audrey.

[Adam7]

If you want to add an image to your reply, click on the "photos" button with the camera in the toolbar, then click "choose files". When it finishes uploading click on "done" for it complete inserting in the post.

The newer image editor will let you adjust the cropping of the image, but not actually resize it for header areas.