Why setting display grid without using grid template columns/rows creates new row with space
Hello, I have a quick question. Consider the following codepen. I have set display of grid on my
body element and center the items. When I add 2 element inside my grid container, it seemas that the body is divided equally for these 2 elements.
My question is why is that so? What is happening here? Like I didn't set any padding nor any gap and the elements appears like that. What creates the space?
https://codepen.io/Fakeur/pen/ByyMeMa...
Portfolio website ratio and zooming problems.
Hello, I'm trying to make the background of my portfolio. But I realized that the page only maintains the correct ratio at 75% zoom in the page.
On the other hand, when zooming the website less than 75%, it starts to scale to the top left corner instead of the top middle, which is what I want. I'm a beginner at HTML/CSS, so I may have chosen the wrong unit at the start and actually have no idea about the ratio properties. Here are the page.tsx and the global.css.
There are also other components, but I think they are not related to the problem here. There are still more problems with the pattern and navigation bar when scaling, but I think tackling it step by step is much easier. ...
figma to website is looking worst !! how can we develop it proper design.
so i made design in figma. on the frame of slide 16:9. W 1920 x H 1080 so when frontend guy developed the design it looked not the same. what can he do to develop it properly like the same.
we both have different laptop i have macbook pro m2 pro and he has realme laptop resolution of his laptop is 1920x1080 but in chrome inspect tool it showed he has 692 height and 1536 something of width. technologies i think it is tailwind that's all i know.
what i exactly want is the website to look like my design like 100% if not 100 then at least 99 😭...
Text Truncate in CSS
https://codesandbox.io/p/devbox/hf4xqz
I have a dropdown component using the Shadcn library. I want to limit the no of letters it can display, Once the length crosses certain threshold, I want to use truncate and display eclipsis. Do we have only way to do it using max-w or do we have any better solution for it. Can you please let me know? I have attached codesandbox...
Dynamic header
I want to make header that automatically switches between desktop/mobile modes.
Logo is constant size. Social buttons are constant size.
So everything depends on size of nav links and screen size.
If all nav links fit into single line, keep them. Otherwise show burger button and put nav links into modal window....
Scattered Grid Help
Hello! I would really appreciated it if I could get some insight/guidance regarding the easiest way to do a “scattered grid” / “asymmetrical collage layout.”
I will attach two pictures. The first one is a full masonry layout that is symmetrical in the way that the spacing is even, not random. Easy to work with. The second one is my target, where images not only have slightly different sizes, but "random" placement....
Feedback on user-info web page
Hello, can anyone give any feedbacks of what can be improved here please. I don't know yet what to add to the side-bar, maybe some links but even if I add some, it will be 3,4 links, there are still lots of space left, any recommendation to fill that please?
Also, is there anything I can add to the section below "My profile" please, doesn't it feels void?...
