Ideas to fix this little niggle

I realise this is going to get me tagged as a bit anal, but little things like this really annoy me :slight_smile:

If you go to my Foundry play site: Home | Bike Box

Use Inspect in a browser and select mobile phone view (any), then scroll right down to where the white container that houses the latest deals section (with the pink outline) meets the footer. If you look carefully you’ll see that these two containers have a 5px radius on the corner. On desktop, where there is space between the two containers and some side margin the radius works fine, but on mobile, it leaves a little nick out of each corner, which is really bugging me.

I’m trying to think of a solution that doesn’t involve replicating the content, removing the radius from the one version and using something like Agent to set which gets displayed on mobile. But I just can’t think of it!

Anyone any ideas?

1 Like

From the inspector, I see that there is a 5px border radius being applied to the container.

I know, I set it. I’m looking for a way to remove it on mobile, without having to resort to Agent though.

Then use BluePrintONE instead of the Container which gives you this level of control.


Nice one, good shout. Ta.

I actually like this project, showed it to a few clients who really like it, but then bike shop owners are not most design savvy peeps :wink:

I plan to rebuild it, replacing image stacks with warehouse friendly ones and sorting out all the margins etc, as at the mo it’s a right mix and match jobbie. When I get to the content I’ll look to using BP as the container. Which, since playing with it when it came out, I’ve never actually used on a live site!

1 Like