Image size is different on different devices
hello everyone, i have a transparent image (the white circle) that goes over the moving gradient in that section. i was working on my pc (full hd monitor) until now, and when i opened webflow on my thinkpad the whole thing was cut off and i have no clue how to fix it so this image is always in the middle of this section? i dont want it to be cut off like it is on the thinkpad view and im confused why it even happened considering it doesnt cut off on any breakpoints on my pc
any help is appreciated. if you also have tips on how to make the section not get infinitely long as breakpoints go on and keep it anchored to the end of this image that would be nice to know too.
thanks in advance!
15 Replies
it definitely has to do something wtih this because i was following the gradient background tutorial and instead of the frosted glass card with text i just wanted this image on top
this is the div the image is in
all i want is for the image to be there and to be responsive and to not be cut off on any devices
i wouldnt have even noticed if i didnt look at it on my thinkpad
how do i make sure that the size of this first section is roughly the size of the monitor? it keeps getting dragged down and the image is messing everything up... the difference between 1920px and 992px is massive and looks horrible
Can you use a div with white background and rounded corners (50vw border radius) instead of a png of a white image? or do you need the png because of the blue stars?
Then just set the width using vmax I would think.
Can you share a copy of the png and I’ll give it a look?
yeah its quite important for me to use the png since it has my name on it (this is the portfolio "hero page" (more of a cover page really)) outside of the blue stars, i dont have this font separately anymore so i cant build it all up natively
here it is
this is the section and th eother image is the size options of section (the stuff the gradient animation is in and the image is in its own div which i shared before)
how about this? section gets min-height of 100vh and circle image width is 90vmin?
https://preview.webflow.com/preview/discord-help-examples?utm_medium=preview_link&utm_source=designer&utm_content=discord-help-examples&preview=421977fc83ae5c37a8bb9de1eeaca1b7&pageId=665b62ad2b823f00e4bddd0c&locale=en&workflow=preview
im not sure how to access this properly, it does seem to look like it doesnt get cut off
what do you mean by vmin?
Vmin is a css size unit that takes the minimum of vw or vh
CSS Viewport Units: vh, vw, vmin, and vmax — SitePoint
A thorough introduction to the use of CSS viewport units (vh, vw, vmin, and vmax) for truly responsive typography and layout elements.
so that would mean min w would be 90vw?
It means when the viewport width is the minimum value (I.e. mobile portrait) it uses vw. For the case of a landscape viewport like a laptop it would use vh.