Streaming live at 10am (PST)

Problem with top aligning text…


#1

Hi there,

I'm pretty sure this is going to be something really really obvious but I'm trying to use a 2 column grid in webflow and in the left column have an image aligned to the top of the column (this works) and then in the right hand column have some text which will have an H2 tag and then some paragraph text underneath that.

The problem I have is that I want the text in the right hand column to line up vertically with the image in the left column and cannot get this to work for the life of me without having to take off margins and all sorts on the H2 tag which causes problems when going to the mobile layout as then the text is stuffed up beside the image.

I've attached an image to show what's going on and perhaps I shouldn't be using a 2 column component and instead should be doing it in some other way?

As is shown in the image I'd like the (in this case H1) text to start at the very top of column 2 so that it will align vertically with the image.

Any help would be greatly appreciated.

Best wishes,

Mark
a


#2

The column may have a top padding, and the H1 may have some top margin or padding too.

Add a class like .no-top-padding to the H1 and put top margin and padding at zero, even if there is no value entered there yet. Do the same for the column.

Should do it.

Next time if you're willing to share the read only link of your site it's really more effective to help you :wink:


#3

EDIT - This did work, mostly :frowning: although the H1 is still not quite completely aligned to the top with the image. I think it might be the line-height that's doing it (although hopefully something else?) as when I take the line-height all the way down then the text on the second header line obviously then bunches up too much.

Hi vincent,

That's fantastic thankyou. A little confusing as they did have 0 in their respective values although not set explicitly so that's a little why I wasn't getting there I suppose.

Why therefore is it that even though it says 0 you need to over-ride it and explicitly set it to 0?

Also now on the mobile view the text is too close to the image but I guess I can just place the margin / padding back into that view now though?

Many thanks for the help there and sorry about the preview link. Will look at doing that next time definitely.

Best wishes,

Mark


#4

Actually just a quick question about the preview thing.

Is it possible to let someone have a preview of the site but then take back that privilege once they've seen it?

The only reason is that I'd need to make a separate site to show things like this as there might be parts of a site that I don't really want people to see until it's ready to go live?

Thanks,

Mark


#5

When values aren't set, browsers have defaults, especially on common elements like titles etc. I don't know if it's the case here though.

And yes, set adequate values for each device.


#6

Yes, go uncheck the sharing.

I understand, nobody wants, but here we're here to help not to juge and a very, very, veeeeery few people will see you site, guarantee that :wink: If you free your mind from that fear then getting help gets effective and quick and you learn much more. Seriously, don't mind it :slight_smile:


#7