Streaming live at 10am (PST)

Three column image help


#1

So, I have a 3 column setup on the Good Burrito Page and I’d like the images to be touching(right up against) one another and for whatever reason they start that way then suddenly out of no where a margin shows up. It’s very strange. one second they are fine them boom margin right. I’ve set everything to zero and my images are at 100%.

Any and all help would be much appreciated!

Thanks.

P.S. I’m new to Webflow, so I may be missing something I’m not aware of yet.

Here is my site Read-Only:
https://preview.webflow.com/preview/ericbeckmandesigns?preview=3279558be2f64ac4c7ad482ea68d3668


#2

@ericbeckman You have to remove the margin you set.


#3

I really appreciate that sir. It’s not there actually. It’s on the Good Burrito Page. Sorry I couldn’t get it to share the link for just that page, not sure why. Again I’m still new to Webflow so I may be looking in the wrong place.


#4

@ericbeckman we can only view it in the editor unless you give a live link in webflow, also your not telling us which page since you have multiple pages help us help you be a bit more specific which page is the issue what section or div is the issue resulting in. a project.webflow.io is helpful so we can see what is going on in the browser.


#5

@Poliigon Sorry I’m a little confused. I did indicate which page, which is the Good Burrito Page, you’re right though I should have been more specific. I’m having the issue in the Execution Examples Section - Middle Row specifically. In there, there is a three column which I would like to have the image right up against each other. I have everything set at 100% as well as all the margins and padding 0. They start out touching then as soon as I go to publish they suddenly develop what looks like a margin right. Also did the link I shared not allow you to navigate to that page? I apologize not trying to be a pain just trying to get this figured out. I really do appreciate any time that someone is will ing to put into helping out.

Share Link:
https://preview.webflow.com/preview/ericbeckmandesigns?preview=3279558be2f64ac4c7ad482ea68d3668

Live:
http://ericbeckmandesigns.com/good-burrito-co


#6

@ericbeckman are you talking about the green lines?


#7

Thats the right location sir! The three images there if you view the live link they are spaced apart for some reason. I can’t figure it out.


#8

Seems to be happening on any page I have three images side by side with not padding or margins.


#9

@ericbeckman ok I see the green spaces are those a issue also? and i see the white lines on yours are both of these an issue?


#10

No the borders are fine just the, what looks to be margin right(white spaces).


#11

@ericbeckman your first issue is your image has a white border maybe cut wrong

your 2nd issue is that your images are setting widths and heights following the css

in other words your images are not perfectly square and since they are not set to background and you have the height set to 100% its not gonna scale to proportion. I would scale width 100%

your images are 640px height 593px width so if you scale by height 100% then it will gap because height is bigger than width so scale by width and auto height


#12

Thanks for the help sir!


#13

@ericbeckman what i normally do eric is images that are in a column like that 600x600 so if i want to contain cover or even insert I can scale either height or width and they will stay proportional :blush:

and your very welcome


#14

So I just made my images completely square, unfortunately that didn’t help at all. I’m still getting this weird margin and or white space. It’s weird, in the editor it will go away and then re-appear again. Almost like it’s turning on and off. not sure how to describe it. I even tried deleting the section and building it in again from scratch. It’s also strange that it only seem to do it when I have three images side by side, not two, like I have above and below.


#15

@ericbeckman what version is your browser?


#16

I gave them a width of 640px and it seems to have fixed it. Though it’s not a good solution. For whatever reason they seem to not be fill the width of the div they are in. I’m honestly stumped. It’s driving me batty haha.


#17

@ericbeckman its not a bad solution either, i couldn’t replicate your issue it looked good in for me it may have been a cache issue


#18

@ericbeckman can you remove the 40 and publish let me have one more look at it let me know…


#19

I’m in there now messing with it. You may have just seen it when I still had the images 640px. I appreciate the time sir. I guess I’ll just keep it like that for now. I don’t understand why when I inspect it the div shows it’s taller than it is wide for whatever reason. I even changed the images to have just slightly more wide than height and it’s still doing it. I’m guessing some sort of bug maybe. I don’t know. Again thanks for all the help, I really appreciate it.


#20

Yea I have it off now. You should see the spacing again.