Streaming live at 10am (PST)

Border Image scaling issues


#1

Hi,

I have been having this issue more often, but sometimes it happens and sometimes now.

This is the is issue. On my mac screen, the image looks good. But on my clients, who has a bigger screen, there are border scaling issues. What is this?

The image gets sort of cropped on the bottom by the border.

this is the shared link: https://preview.webflow.com/preview/matthias-stoopman?preview=200b8559b20b5944b80cfe7855c14f6a


#2

Dont know exactly what the problem is but I m guessing:

Do you mean the fact, that when you e.g. open "About me" the background image is tiling and repeating?
If so, thats just a matter of how you want the image to be display. try setting its view to "cover". Then the image will get stretched to fit within the viewport.

Cheers

p.s. if not, make a screenshot of the error being displayed.


#3

Hey @Daniel_Schultheiss!

Thanks for responding, it's in the portfolio section, here are two videos demonstrating it.

https://drive.google.com/file/d/0B2sOPChZq2kHa2FVSlROMV9EQm8/view?usp=sharing

https://drive.google.com/file/d/0B2sOPChZq2kHTTItZXpUQWtSRVk/view?usp=sharing


#4

anyone @pixelgeek @cyberdave @vincent?


#5

Why is there an empty div here?


#6

here used to be text there, But I didn't want text to be there. Is that what I did wrong @vincent?


#7

I mean there is no image border. So is you issue the unconsistent size of the black section called "portfolio nav menu"? It contains an empty element and it has no defined size (height). SO every condition for it to behave uncepectedly are gathered (:

Using Webflo, NEVER let an empty element in a design, even during development... if you create a gris, columns, any piece of layout, you can't start to test/debug it until you've put things in empty divs/elements. If you don't, elements can get default or preview or development default values and you get weird things.

If here you want the black horizontal element to be consistant in height, give it a height in px.


#8

If you consider this as a lower border for the image, remove the section nd select the image, then add a lowr border using the border CSS property.


#9

Ok @vincent. I really didn't know this about empty elements. I thought if you don't fill them, webflow doesn't use them.


#10

which section, do you mean @vincent. I removed the little div that was empty and have the portfolio nav menu a height size.


#11

To begin with, Webflow will give them visual defaut "dev" properties while you're in the designer. And then they won't behave as epected sometimes. I've answered quite a few user requests that had trouble to align divs when they only had put content in the first divs of a row.... the solution when that happen is to populate ths divs with temporary content.

Also, and it tends to be better than some years before, browser give default values when properties are not set. And sometimes these values aren't the same. That's why sometimes an issue is solved by just setting some properties to some objects (generally speaking, not only regarding webflow)


#12

Then ask your client to test again, it's possible the bug won't happen anymore at this stage.


#13

BTW the pixel works at the tome or the portfolio page is fantastic! Do you know this guy?


#14

@vincent he is my best friend and he is awesome!


#15

Allright so make him a great site (:




#16

I asked him to test @vincent It still doesn't work

he send me this screenshot:


#17

it crops the image at the bottom, do you see


#18

Where do you see a cropped image? The big image isn't cropped.


#19

Yeah it is @vincent, at the bottom of the coverphoto it's cropped.

This is how it looks on my computer and how it's suppose to look on his, but isn't:


#20

Do you see the difference @vincent?