Hello everyone,I'm struggling to implement a layout, and I just can't ...
Hello everyone,
I'm struggling to implement a layout, and I just can't get it to look and work exactly as I want. Does anyone have an idea how to solve this? 🙂
What you see here is a skills section with a person in the center, surrounded by a semi-circle that contains icons. These icons should also have a hover effect.
What’s the best way to implement this? The semi-circle should always remain a semi-circle, but once the screen reaches a certain width, I want to change the arrangement.
I’d really appreciate your help!
8 Replies
What have you tried? What hasn’t worked? Do you have a codepen to share? Please see #How To Ask Good Questions .
This channel is for code-specific help and your question right now is borderline #discussions topic
@13eck First of all, I’m sorry if my question was not formulated correctly.
I’m primarily a web designer, and I created this layout, but I’m not entirely sure how to translate it into code.
I initially thought CSS Grid might work, but I ran into issues and couldn’t achieve the desired result.
I’d be happy to refine my question further, but I’m unsure how to describe the problem more precisely. Any advice on how to structure my question better would be appreciated!
Would it help if I shared a rough sketch or my Figma design? I can also create a CodePen with my current attempt if that makes it easier to understand. Let me know how I can provide more details! 😊
At first glance I would say grid for smaller viewports and absolute position for larger.
99% of the time posting code is always a good idea, even if it isn’t working. It gives anybody willing to help somewhere to start from and shows that the person posting the question has at least tried something. It also gives an idea of the abilities to then be able to tailor the possible answers/suggestions accordingly.
Basically what Chris said :p
At least the second paragraph. For your first image I'm thinking that you should be using CSS trig functions instead of a grid so you can layout the images on a circle. The (X,Y) coordinate of any angle (θ) is (cos(θ),sin(θ)). So you just need to do some maths to figure out what angle each item is from the horizontal, use that to plot the (X,Y) coordinates, and multiply a fixed offset to get it where you want it to go.
Not sure if you should use absolute position (I'm almost always against it as it causes more problems than it solves) or if there's a better way to place it on the screen.
Then again, unless they're clickable buttons/links there's really no reason you can't have it all be one image and use HTML for the text.
To be able to use trig functions they would need to be absolute or relatively positioned.
Thank you for your answers 🙂
I'll work on it now and then share some code – you're absolutely right that it makes more sense to include some actual code for better feedback.
I had already considered absolute and relative positioning, but I’ve also had the experience that it often causes issues.
I’ve never heard of CSS trigonometry functions before, but that sounds really interesting! I’ll check it out right away.
There are various ways to position items around a circular path. Here is one option: https://codepen.io/chooking/pen/yLGgBMG