Streaming live at 10am (PST)

Help on my First Project


#1

Hi,

I’ve just got started with Webflow, I’m loving it and finding it a good fit as a non coder, protects me somewhat from silly errors.

I’ve just finished my first site, it’s for my son who has a disco business and I’d really like to get some feedback in case I’ve done something wrong before I make it live.

I’m aware of one issue where the height of the navbar seems to get added to the height of each section. I’ve made the first three sections 100VH so they should fit nicely but not the case. If anyone knows how to fix this and/or sees other issues it would be great to hear from you.

Cheers
David


Here is my public share link: LINK
(how to access public share link)


#2

Hi @firstfruits

Can you share your preview link (it’s in the dashboard) and/or the published site …webflow.io ?

Happy to take a look!

Stu


#3

Hi Stu,

Sorry about that, I did copy and past it to the placeholder [ ] in the footer of the forum form but that must not be the correct place to do that…

Here it is: https://preview.webflow.com/preview/bpmevents2?preview=9aa2cd97eeec598f885ba0318aa8cc27

Thanks
David


#4

Hi David,

Great first site! When you say the navbar is adding height, do you mean affecting the centering of for example the first BPM Events box over the mixing desk? Or is it in the different viewports, mobile etc where you are seeing issues? Maybe attach a couple of screenshots of the issue if need be.

If you publish to the webflow.io domain first you can also get a better sense of the real life/finished product in browsers, on actual phones etc - the preview mode is just there as a sample guide. If you want to disable google indexing the webflow.io site, just go to site settings, and then SEO, disable subdomain indexing.

You could try making the ‘Home’ section Flexbox, and choosing the centering options (then add some padding to the elements inside the BPM events box - I added 60px padding to either side of ‘Container’). That seemed to help centering the first box/section.

Example:

Let me know if that helps?

Stu


#5

Hi Stu,

Thanks for the feedback, I don’t yet have any webflow hosting plan but have published it to http://bpmevents2.webflow.io and have been using that domain to do my testing. I’ve attached two screenshots of the site as displayed (in this case as iPhones) using http://re-view.emmet.io/ extension on Chrome.

The first screenshot show the homepage at the top of the page (home menu item clicked) and in the second screenshot I’ve moved the page down to the point where you can just see the white of the next (packages) section.

When I measure the vertical distance I had to move the screen to see the top of next section it comes in at 60px which is the same as the menu height. The homepage is set to 100VH, if I understand VH correctly it “should” fill any viewport exactly but I’m unsure if it takes the fixed menu height into account or if there is a setting to let it know the fixed menu is there?


#6

Hmm, ok I think I get what you are saying, maybe @AnnaKelian or @Waldo can help explain the relationship between a fixed top navbar, and 100vh sections?

With your home section, the navbar ‘floats’ on top of the image (visible by adding transparency to your navbar) but with the packages section it appears before the section starts (and actually ‘floats’ on top of the bottom of your hero image)

Design-wise, for me, I wouldn’t worry too much about constraining sections to 100vh other than the home/hero section. It is natural to scroll, and as a user if you can see that there is more info continuing beyond the bottom of your current view, it encourages the user to scroll further…

My preference would be choose ‘auto’ which expands the section around the content, and means no overflow onto other sections/elements - makes it easier designing for each viewport too.

Stu


#7

Thanks for the flexbox tip Stu, I’ve changed the hero page and it does look better. I’ve also changed each section height to auto (except here which is still 100VH) but I think I’ve generated other issues.

While the site now looks good on desktop screens (with the exception of that pesky 60px overlap at the bottom of the functions slider) I’ve got a new issue with the functions slider on screens below 767px (see screenshot) where the slider nav is missing.

Any thoughts?

Cheers
David

image


#8

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