Make splash page image responsive on mobile device in portrait mode

[Infinity08]

I am having an issuee with my splash page image when viewing it on a mobile device.  When the mobile device is used in landscape mode, the entire image is shown, but the image is cropped when viewing from portrait mode.  All of the headers and images on the other pages adjust perfectly fine to the phone screen size in portrait mode.  I am assumming I just need to change some code in the main css file to make the width 100%, but it all looks good from what I can tell.

For reference please visit my website at www.atoley.weebly.com.  I am using the Saucy - business template.

Thank you in advance for your help.

[Erin6]

Hi, @Infinity08!

The image should be responsive regardless of layout. It looks like you have customized your theme already, so something may be overriding the responsiveness at this point. Although I can't give you specific advice on HTML/CSS, it does sound like adding that code to make the image 100% would work.

Thanks,

Erin

Weebly Community Manager

[Infinity08]

Hi @Erin

Thank you for your quick response.  I replied to your message earlier but it appears it did not submit successfully.  I have changed the css files but only the color codes to match the theme of my business.  I have already tried adding the code to make the width 100% but I will continue to try.  Is there anything that I may need to adjust in the mobile.js file?

Thank you again for your help.

[Infinity08]

I have called into Weebly Support and they cannot help me.  They suggested to resize the image and I went as far as changing it from 1200 by 500 to 150 by 63 pixels, and no change ocurred to the image size when viewing it on mobile.  There should be a way to adjust the image size to show 100% width when viewing in portrait mode on a mobile device when using the splash page on your themes.  The images adjust fine for every other page except the splash page.  I have tried other themes as well and I get the same result.  Why can no one help me? What is different about the splash page?

[BJ5 · Accepted solution]

It's possible to force it to fit the entire image horizontally, but you'll end up with white space underneath it because the image dimensions are very different (very long and short):

A better solution would be to make a more square version of your image, with more "bleed" space around the bits of the image that you want to be shown all the time.  It's kind of like designing graphics for print in that you want extra space around things so it doesn't matter that much if parts of it are clipped.

[bodyandsoul1]

How did you end up forcing it to fit horizontally? I'm having the same problem.

[VivekPanicker]

I have same problem

what should I do to make my site normal again

Please guide me

You can go through my site at vivekvpanicker.weebly.com

You can see the issue once you open the site in mobile browser

Kindly help me

Thank you

[Adam7]

I think the custom code you have on your home page is doing it, @VivekPanicker. Try removing the code you have right underneath the first image on the page, and re-publishing.

[VivekPanicker]

Thanks @Adam for helping out

I didnt add those codes.

I have no idea how it came on it

trying to remove it but its not getting selected or deleted.

Please let me know how should i delete it

[Queso]

If you're not aware of any editing, it may have just been accidental. You may want to start by changing the theme back to one of the standard Weebly themes, as it looks like some editing has taken place there as well. That should get everything back into a more easily editable position.

[VivekPanicker]

I have an extra code type something running in my footer
making it extra large that the page further extends more to right affecting its alignment of content on desktop and mobile version
It affected in all types of pages like splash, short header, tall header, etc.
Issue can be much easily understood in mobile version as u scroll to right side
Tried changing themes and all contents of the sight but it still remains same

For further understanding of the issue kindly go through the attached photograph

Site: http://vivekvpanicker.weebly.com/home.html

Kindly address this issue as soon as possible as we want to sort it out soon.

Awaiting your response
Thanking You

[Adam7]

Usually when you see code like that, it's in one of a few places:

1. The Footer Code field in Settings > SEO

2. The Footer Code field for the page itself in the SEO Settings for the page on the Pages tab

3. In your custom theme changes