Image padding not working on mobile

Hi guys,

I have a small problem on this site. I have started to change the site for mobile use and this is where I am having problems. The images on the mobile home page all have 3vh padding at the bottom of them so they have a gap between each. I first had the padding set to percentage and this was not working (displaying no padding at all) so changed to vh and this seemed to work (kind of).

On the webflow preview it is showing as it should be with padding below each photo, however when I checked it on a mobile device the padding is random, some images have a little padding below, some have none. If someone could have a look for me it would be very much appreciated. I am sure it is something small causing it I just am not sure what.

Many thanks,

Sam

  1. https://preview.webflow.com/preview/emma-dodi-12-2?preview=3b2674bca8d4db06d4969a2d511f9a44

  2. http://emma-dodi-12-2.webflow.io/

Hi Sam,
On which page and section is the image gap an issue? Specifically?

  • Another Question:

What is the custom code doing? And what is the script for? I ask because the site is loading extremely slow. And it’s flickering with a completely black background.

Hi Gary,

Thanks for your reply, the problem is on the home page when in mobile view. The padding is on “imageMobile”.

Many thanks

Sorry for some reason it wasn’t showing your second point. Not to worry its just as the loader is turned off while I am working on the site. Il turn it on now so you can see.

1st:
Okay, I was wondering about the loading color. No problem. :grin:

2nd:
Ahh okay I see now. You’re using 1 div, then 1 div with background image. That’s not ideal but if it works for ya, keep it. I suggest removing the percentages and vh settings for this. You will get a really wide browser experience, they will interpret this differently and it’s hard to tweak this type of setting. Instead use ‘Inner Padding’ for all the photos.

The challenge really only comes in, if you decide to use CMS collections later to have a dynamic photo grid. Then you’ll want the image component, not a background image. But hey, all of this is only personal preference, there’s many ways to accomplish the same thing.

Great Site by the way. Really, really nice!

Ahh good shout! Thanks so much. Don’t know why I didn’t think to try that. All working as it should now.
Appreciate it man :slight_smile: first project I’ve taken on for a client and think its coming together nicely.

While I have got you, any ideas as to why a few of the images on the homepage in desktop view are jumping when the page loads in? Tried making it with a webflow interaction but wasn’t very clean. Re-tried using Greensock and its a lot cleaner but have this slight issue whereby a few images jump when all coming in.

Thanks in advance,

Sam

Hmm, jump… which photo on homepage, I’ll go take a look.

Sorry difficult to explain haha, the images with the issue are named… hp8, hp9, hp11, hp13

There are issues further down too but not a biggie as I am going to lock the page til it finishes loading. Just the immediate ones in view I need not to “jump”

Oh I see it. They’re not jumping, their scaling into the parent div, from the inner div, from the background. Haha, see those dang bg image settings. Just teasing. Honestly, this is what I meant, there’s really nothing you can do. Because aren’t you loading these photos with the gallery script? If they’re scaling from that, try removing the “Zoom” in the script, make it false.

If that doesn’t work, try adjusting from bg to image component. Test this on HP11.

  1. Set the imageHolder wrapper to Relative.
  2. Insert an image component into imageHolder, Set to Absolute, Cover, Width & Height 100%, add same photo.
  3. Set hp11 div to Display None to hid for now.

See if that eliminates the zoom scaling.

Oh just thought to share a few visuals I noticed. A few tweak suggestions:

Sidebar:

  1. Make all the elements either left-aligned or centered. It looks a little strange because the menu is left.
  2. Reduce the size of the logo just a bit, maybe 10-15 px smaller

Logo:

  1. I would take out the inner dotted line. I like the logo but the inner lines make it blurry. Just keep the outer line and it’s FIRE!

Awesome I’l give it a go, shall let you know how I get on. Cheers for your extra points too :slight_smile: the sidebar has always looked a bit dodgy haha. Playing around with that now. The logo I do kinda agree on, the lady in question however really liked that part of the logo so I am not gonna go changing that now (she has already had business cards etc printed so can’t go back on that one now haha.

Really appreciate your time dude! All the best

Word! No problem, glad I could help. Hopefully the photo zoom can be adjusted. Don’t hesitate to shout out to me with any questions. Have fun!