Streaming live at 10am (PST)

Vertically Center Text? / Category Link


#1

Several related questions regarding setting up a category flow.

  1. “Portfolio” in the main Nav should link to a landing page with all our project categories. This works. But then I’d like each category photo to link to its respective category. How?

  2. Is there a way to center text vertically in a text box which covers 100% of the container behind it? I want a hover effect that when you roll over the photo, the whole photo grays out, with text in the center.

  • I’ve tried using a very large line height, which works… until you have text that needs to wrap
  • I’ve used the 50%/-50% spacing trick, but this makes a small text box which does not cover the whole photo
  • I’ve tried placing a div block behind the text and doing a hover effect on both, but this produces a sequential-hover effect (whole photo grays out, then only the space behind the text grays out) which is not what I want.

You can see the flow & styling working the way I want here (ignore the hover styling on this page; click on any sub-page to see what I’m trying to do): https://sdg785.wixsite.com/sdgarch/portfolio


Here is my site Read-Only: https://preview.webflow.com/preview/ashleys-first-project-825c72?utm_source=ashleys-first-project-825c72&preview=85c879d117521a01b82175538c4adec5

Published: http://ashleys-first-project-825c72.webflow.io/portfolio


#2

Category link

must to know:

Next:

vertical align by flexbox

  1. Its hard to understand your specific issue (Add screenshot). A lot of options for this - anyway vertically align by flexbox is very easy (Two clicks + remove the margin-top/bottom from the heading):
    https://university.webflow.com/article/centering-elements-with-flexbox

The idea by regular CSS:


#3

Ok. Flexbox solved the centering issue. Super easy, once I knew what I was looking for. Thank you!

However, none of the stuff you linked about the collections seems to apply. I need the items in a collection list to each link to a different collection. Should I not do this as a collection list but just have freestanding images linked where they need to link? Either way, I can’t figure out how to link to a collection outside of a collection list.

Also, how do I link to a specific item in a collection (not in a collection list - I’m specifically thinking of the Featured Projects on the homepage, which are just images)? It won’t let me copy the item’s URL.


#4

Flexbox great.

URL combinations

Collections list and custom URL. No way to combine this :slight_smile:

Or:

  • You select bind link to “collection page” for all items

  • Or you create “custom feild” --> “my url” and bind this feild in the collection.
    image

By javascript i could solve this for specific cases.


#5

I might try option 2, but I can’t find anywhere to link to collection template pages. (I know this is basic info that must be out there somewhere, I just can’t find it!)


#6

folder name

Set parent (Folder name her):
/blog

page slug

page slug under post setting (Webflow auto-generate this depend on page name)

page named: hello world
the slug is hello-world

relative path:
/blog/hello-world

absolute path:
https://mydomain.com/blog/hello-world