Streaming live at 10am (PST)

Text styling within a column


#1

I would like to style text (for a pricelist) like in my example. So make the price line to the right side of the column. I can't seem to find a way for that in the typography dashboard.


#2

That would normally require an HTML tablen but tables aren't supported by webflow, yet. You can use the columns widget for almost the same result. Set it to 4 columns and use the same text style for all columns so the line height is the same.


#3

But then the price (within the second column) would be placed below the first column in (for example) landscape mode.


#4

Well you can adjust the behaviour of columns in the settings tab... but not for the last device, mobile view, so that's a problem yes

that would be cool to be able to keep the columns on mobile too.


#5

Thanx Vincent. I will go for a one column pricelist.


#6

Hold on a second please @Goderd


#7

I made a quick test for inspiration on how it could be done.

http://jorn-tabs.webflow.com

designer: https://webflow.com/design/jorn-tabs?preview=65ba07cd6049fd3c8ff24eac31615deb

Down at the bottom =)


#8

I've done it here and it will work for all devices http://sab.webflow.com/price-table

Type your item name and price on the same line, select the price, click on the brush icon, give it a class name, then click on the Float:right button.


#9

I've also explored the nested rows, but it still won't work with mobile device as any row is split vertically for this device.


#10

He he posted almost the same time. My table works on my iPhone. Ive used rows only as wrapper for the two main columns. No nested rows.


#11

You're right I've been too quick ditching your solution (: good job!


#12

No problem =) Just quickly thrown together. You can do it in so many ways =D


#13

So true. Doing my version, I realized that since working with Webflow, I wasn't using the float property at all anymore. And for the greater good, because it's not the most easier thing to play with, as it has the tendency to break layout and contaminate following elements. Webflow made me realize a few things CSS wise, and I'm cool using things that I wasn't before, like the super handy inline-block.


#14