Background image in mobile phone

Design help General
1

I’m having issues with the background images when I am loading the website on my mobile phone! Below is how it looks like when I load it in my phone"

1440×2560 700 KB

And this is how it looks like when I tried to zoom out to see the menu and characters:

1440×2560 1.01 MB

Is there any ways to resize my sections/background images so that it will fit according to the mobile screen size?

Read only link: Webflow - Chen and Chin

2

You should not have to zoom to do anything on mobile. But that’s another story.

Your site has a bug, you can see it in the designer by scrolling to the right (2 fingers swipe on trackpad), you can see the viewport shifts and there’s “room” left.

http://vincent.polenordstudio.fr/snap/hhzca.jpg

there’s probably an object that bleeds out of the body. Let’s find it.

It’s the footer row, it’s wider than the viewport because of that 120% max width.

http://vincent.polenordstudio.fr/snap/jeykq.jpg

I dont know why you did the 120% thing, you can either modify it back to 100% or give the Footer element an overflow-hidden property:

http://vincent.polenordstudio.fr/snap/7zvg7.jpg

Should fix you problem.

Now 2 things:

  • your site is extremely slow, the page definitely too big for mobiles. All your background images are more than 1MB. try not to go over 250k for bg images and 150 for images. Compress them more and downsize them. No need for them to be 1980 wide, stop at 1200 and see what it does.
  • I LOVE the little suits on the little characters :smile:

Can you try all this and come back with results to see if the sites gains in speed?

1 Like
3

It has been done!!

Thank you so much for searching and advising everythin for the website. Everything looks ok on iPhone’s browser but on Android’s there is still a some irritating thing sticking out to the right. Oh well, I try to figure out later!

Once again thanks !!

4

Hi @Manru_Ong, I took a quick look at the overflow issue to the right on the home page.

Check out my video, I would check a few element styles to avoid the overflow:

​I hope this helps :slight_smile: Cheers, Dave

5

OMG… Awesome! :+1: :+1:
Thank you so much for the help, much appreciated everything seems good.

1 Like
6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.