Solved: My mobile site looks all distorted

nilesh · ‎06-23-2017

Hi

I have spent hours building the site and cannot launch now as I happen to see the mobile version. Since it is a responsive template I do not have any control over how it is displayed. But the pain point is on mobile it looks all distorted. Not sure how can I fix this without making any change on the desktop site. URL is http://adt08.weebly.com

Any help much appreciated.

thanks

N

MJCS · ‎06-23-2017

Hi @nilesh,

Your site looks okay with two things that need fixing on the mobile view.

The main one for me is the Social Icons. You've added them as pictures. They're all varied sizes and are laid out in separate elements. I suggest you use the Social Icons under the More category in Weebly's builder. They'll resize correctly and look more modern.

The other thing that looks to be an issue is the image in the Header of your first page. You would be better of using an Image element from the build pallette there as Header Images need to resize and be flexible to accomodate all screen sizes and resolutions. Another option would be to add the 'Hide' app, set it to mobile, and put a spacer inside it. That way when mobile screens view it - the spacer will push the image dimensions out to include the lower half of the face.

Hope that helps somewhat.

Regards, Mark

View Best Answer >

MJCS · ‎06-23-2017

Hi @nilesh,

Your site looks okay with two things that need fixing on the mobile view.

The main one for me is the Social Icons. You've added them as pictures. They're all varied sizes and are laid out in separate elements. I suggest you use the Social Icons under the More category in Weebly's builder. They'll resize correctly and look more modern.

The other thing that looks to be an issue is the image in the Header of your first page. You would be better of using an Image element from the build pallette there as Header Images need to resize and be flexible to accomodate all screen sizes and resolutions. Another option would be to add the 'Hide' app, set it to mobile, and put a spacer inside it. That way when mobile screens view it - the spacer will push the image dimensions out to include the lower half of the face.

Hope that helps somewhat.

Regards, Mark

nilesh · ‎06-23-2017

Hi Mark

Appreciate your response and it did the trick. Site looks great on mobile now. What I did as you suggested:

1. Removed the header and added an image element

2. Removed the social images and used the ones which are available.

The only thing is not all the social icons are available, the one I am missing is IMDB. Do you know if I get it from somewhere without disturbing the layout.

Many thanks for your help.

regards

N

MJCS · ‎06-23-2017

Hi @nilesh,

I'm glad to hear you're happier with the appearance of your site. It's a shame about the IMDB link. My only suggestion is to link that one to text or an image. If you set the position to centered it should look okay on mobile devices too.

Regards, Mark

web_dev_12 · ‎10-14-2019

I'm trying to do the same thing (i.e., change the header to an image element so that the mobile version of the home page looks decent. But my theme isn't allowing me to delete the header in the first place. Is there a way around this? Currently the image header is cropped and resized so much that there's no way to tell what the actual product is.

Website is https://www.stampmyfeet.com/#/

TIA.

Adam7 · ‎10-14-2019

Have you tried changing the page type to "no header", @web_dev_12?