Streaming live at 10am (PST)

My columns won't auto size to the background they are given, they stay small? why?


#1

The Columns I am trying to imitate are like this (http://www.hiverealestate.com.au/) but when I make them and add the background and expect them to size correctly they don't. I need it to be the background and not an image in the column because eventually the background will just be the dotted line and I'll have actual text and buttons over it within the column.


Here is my public share link: https://preview.webflow.com/preview/list-for-less?preview=e509f76bed3c291f502a7ee6e80b6bfd


#2

It sounds you are trying to edit columns by making them classes. Rather I would add Divs into the columns and edit the Divs. Hope this helps! :wink::+1:


#3

Well I actually tired that too. I'll make the Div and class it as Column Div then I give it a background of the image I want and instead of the div scaling to the image the image scales to the div.


#4

Yes, you would then add a class to the image and give it the properties 100% height by 100% width. If you still need help be sure to tell me. :wink:


#5

I really hate to be a pest. I mean I must be missing something, so what I'm doing is I make the div, then make the background the image, then when the image editor is there I make the width and height 100% but it still stays small.

Did you mean to put an image block in the div and then class that?


#6

Yes. . . . . . . . . That's what I meant. :wink:


#7

Ok, it's quite easy to do what you want, I don't understand the adding divs idea. What you will have to do is get rid of the div inside of the column and just put the link block in there. For the link block styles, the background, choose contain under the image settings. This will make the image fit the width and height of the image. Then simply set a set width of however wide you want it to be and a height of however tall it needs to be to fit the whole image, I found 350px wide x 192px tall worked well. You can then add whatever you want inside the link block. I would suggest sizing your image to 2x the size it will end up being. Right now your image is huge at 1008 pixels wide. I was going to make a video but it seems you just deleted your link block. Can you undo what you just did?


#8

It seems @DFink has a better idea of what you would like so I would listen to him rather than follow my guidance. :wink::+1:


#9

Ok so I put the link block back in so you can see. Honestly all I am trying to do is replicate this hover action of the dots changing color on this site (http://www.hiverealestate.com.au/) I really can't understand why any of what you guys are saying isn't working. I understand how and why it should, I just dont get why it wont work for me.


#10

Oh, you didnt mention the color change. That won't be possible with my solution. You will have to create 2 images, one with each color and lay them on top of each other, creating a hover effect that shows the topmost image and blocking out the background image. It's a seriously hacky way to do it and it will likely not always line up perfectly. They used a sprite, which is 2 images in one that gets swapped. It's very complicated to set up. If you think you can deal with a simply dotted box without the pointing bottom part, i can help you build that with css, no images required.


#11

@davidglinski So are you just wanting to change the outline color or the text inside also?


#12

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