Re-design Pianist site

Hello, everybody! :slightly_smiling:

Wanted to share with you one of my last works: total re-design of old site.Customer gave me some kind of “full freedom” in the design process. :slight_smile: Still waiting for the final review from the customer, but know there will be no major changes.

The original (old) site has been designed and built by using tables.

Now it will look like this:

Live link:
http://richardbosworth.webflow.io/

With love… Anna :slight_smile:

6 Likes

It’s not mobile responsive. :pensive:

May I see screenshots?

beautiful work @sabanna!! :heart:

but make sure you space your text away from the images and videos:

This was on load…

It is weird… Site built in Webflow and works fine on my phone :confused:

Thanks, @PixelGeek, will go to check all views again…

Same here, looks weird on iPhone, like mentioned from @VLADinSACRAMENTO.

Load weird only home page or any other page too?

Looking good!

Each page seems to lack responsiveness below a certain width. There’s also something affecting vertical heights of certain divs…looks like the height is inheriting VW properties? I’d love to take a closer look if you can post your Webflow share link! :smile: So much easier than poking around in inspector. :wink:

Edit: On Performances, I LOVE the hover effect on the YouTube videos!!!

1 Like

Ok guys, it seems like site has a bug with responsiveness ONLY on iPhones… For some reason, it does not react on any media quesry. To check this I set the content row to fixed width 320 px, but on iPhone views it still look huge.

Really have no idea what it can be and how to fix it :frowning:

Here is Preview link:
https://preview.webflow.com/preview/richardbosworth?preview=a3a388401435ba6c8b44d10ecbab6358

Will appreciate any help

How about setting the Logo [Bosworth-logo1-grey.svg] in the menu logo container to “cover” instead of “100%”, so it won’t take up 1621 x 324 px.

Would that work?

@Diu, the issue is actually the min-width; not the settings of the background of that div. I’m going to record a quick video to demonstrate.

Hey, @sabanna, I put together a quick video that goes over a couple of the challenges we’re facing. Hope it helps! :smiley:

1 Like

Thank you very much @McGuire.

Now things look even more weird. Here is a screenshot of how settings of Main logo div looks like in Chrome. As you can see I set its minimal width to auto. I did it when I designed that section, at the first step.

And it shows absolutely correct in all views in Webflow designer

And same story with Content row

I set it to AUTO … But Safari doesn’t see it? even in the Webflow designer?

I’m a bit lost. :confounded: Can you explain what the expected behavior is and what you’re seeing instead? (On my way to a meeting so I may not be able to reply to this for a bit…)

You opened site in Safari and it shows fixed width in tablet and mobile modes. But when I opening it in the Chrome browser min-width shows set to AUTO.

Now I wonder if it is only this one site issue, or we got a bug with “min-width” in Safari.

Maybe try to use all VW and VH measurements in your site. I don’t know… I am confused… :hushed: