I’m stuck with a little issue and was hoping, that you could help me out here.
At the moment, I’m designing an experimental agency website and there is a page, where all the services are listed.
I chose a design, where on page load a SVG hexagon gets drawn and then some icons pop in. You can find the site here: http://pixelworks-cba508.webflow.io/leistungen
The animated design is only supposed to be displayed on Desktops but I did not adjust that yet.
My issue is now the following:
On my own monitor (1920x1080), everything looks nice and clean but when switching to Chromes Dev Tools and trying out the Laptop dimensions, the design is totally unclean because the hexagon is not resizing itself properly.
I tried to solve that through applying different sizes and percentages which solved the issue for the small laptop screen but in return created an unsatisfying design for big desktop monitors.
Is there a way to solve this issue without any special custom code or is the only way to integrate some custom breakpoints to target the different laptop sreen sizes?
Hey Moritz, it’s G.J. we spoke earlier in the forum about the animation.
Others in the community may have input as well. However, I’m looking at your site and I have a slight suggestion for this issue to take a quick look at.
The structure itself is where I’m leaning.
1st: Everything is in the “Hero” wrapper. Which is has the parent css height and width properties. However, like a big box is going to control ALL your elements as 1 unit. Now they all need their own specific css properties, but in this case, we’re asking the parent to allow them to override it’s control. Scaling down to multiple screen sizes requires each element to respond to this sizing request, and they should; however these individual elements are not able because they are being contained by a parent ‘box’. They’re actually not in their own space when this happens (theoretically, you know what I mean).
2nd: I would look at restructuring the layers so ‘independence’ becomes more fluid for items to responds to your sizing requests. I’m leaning towards “Separation & Stacking” on top of each other, like a vector, to give more flexibility.
3rd: Separating then grouping the elements that need more specificity for scaling, in my opinion, would give a better testing process. Otherwise, it will be challenging to see exactly who’s the culprit causing the “Left and Right” horizontal pushing.
Let me know if you need a video, or conversation on the phone.
Hey GJ,
thanks for your detailed answer, much appreciated!
However, as I’m still learning, it would be great if you could clarify some points
I totally understand that every element should be free and be able to interact with the screen on their own. But when setting the top parent wrapper with 100vw and 100vh, am I not making the children elements responsive automatically as the parent one is also affected by the screen size?
And regarding the vector resizing issue. Would the usage of vw units for font size, positions, etc. be a good solution or only a “hacky” workaround? Otherwise I thought about emulating the SVG with the help of simple lines out of div blocks which then get positioned using transforms.
Yes:
You are making children responsive but if you have css on those, they will override the fluidity of the entire box, so each element will follow but not completely. There will be minor movement. The inner content doesn’t need anything if you’re setting styles on the parent. This is always the first place to adjust. Remove all styles on children, set css on parent, the test responsiveness, then on each device tweak and adjust child styles. This process offers cleaner layouts, in my opinion.
Yes:
VW in Typography scales just fine. Font settings are never exact no matter what you use. Em, %, etc, they all work. Yet, I like VW because it flows with other content from a definitive aspect. Because you’re saying “show me a set number of the viewport” of that user’s device. Others may have a different opinion, but I tend to lean this way.
There are many approaches and I think you’re on the right track. Try each of them and see what works best for your site. It looks great so far!
