I’m building out a site for my personal portfolio and I’m creating a footer on each page that links to the next project. When I click the link, it doesn’t take me to the top of the next project’s page, rather it loads at the bottom of the page.
Below is a read-only link. Is this something that will only happen in preview mode? I haven’t published the site yet.
On your “Flex Wrapper”… remove the 100vh and just let the content dictate the height size… you could add 100vw on width… but the way you’ve design the site is Fabulous! I like the uniqueness… But you don’t need the sizes on height. The link will take you to the next page at the top of the browser
Okay did you save it and republish? I’ll look at what you did and I can share your options because … really you have 2 choices with your design:
Sidebar over full width content
Sidebar next to full width content
The difference will show when you cascade down to tablet and mobile. That’s going to be your final decision-maker, because
Option #1 = will mean you don’t need to change sizing structure, but you have a slightly off-center lay-out. The nice images you have will show a little on the left, but a lot on the right. Due to centered flex. And you will resize on all viewports - all the images and divs
Option #2 = you could take advantage of % design and only tweak a few settings on viewports because it will naturally take on responsiveness as you continue to develop
Okay I see… it is fixed on scroll and link works fine… the sidebar and main content is the next step I presume. The way you have it now, I’ll be honest is going to be tough for responsiveness. The homepage is Great! The other pages, which can basically be template content holders for all, really need 1 more div layer to do it the right way. I would add:
One div above all, just under body - could be “Main Wrapper”
Drag both “Sidebar and Work Content” inside it
Set Main to flex
Remove all the sizing and all the styles on sidebar and content divs you want to start with a clean slate
Simply set Sidebar width to 20%, and Content to 80%
That will be a good foundation for your layout design.