Hey everyone! So I am in the process of trying to remake a section on my site that is not behaving properly. At the moment there are 2 versions of the section in the project located as the third and last sections of the project.
The idea is to have the final design look something like this:
At the moment as the browser is resized the diamond shaped elements I have on the page will move away from where I want them to remain. In the old version this may have been due to how I assembled and aligned the elements. The newer one has similar but different issues in that the objects resize differently to how they appear in the designer and the appear in a different place.
However I haven’t gone too far with the newer one as I could see it was just going to result in similar issues. So instead I thought I would ask instead of going any further with its assembly .
Any feedback on how I might solve the problem would be appreciated, otherwise I may have to go back and do a redesign. Thank you!
Did you start working on this yet? From what you said, it looks like you want your photo, the shapes, the text and the v-shape cover, to all act independently and responsive when scaling to smaller devices?
Hope I said that right?
But what is the foundation, or main goal? To keep your headshot in one place and don’t let the shapes cover over it when scaled?
thanks for the reply! I have started working on it, is my preview link not working?
I have actually been able to get the scaling for the photo, the BG, and the v-shaped overlay to work (at least on my monitors) with the second version I put together. What is misbehaving is the diamond elements.
I would say the main goal is to keep them aligned against the edge of the top of the v-shaped overlay as seen in my ‘final design’ photo and have them dynamically scale as the browser is reshaped so that they maintain their positions from the top (tip of the blue diamond) to bottom (tip of the yellow diamond) point of their positioning in the section.
I’m still relatively new to web design and I’m finding that this design has its drawbacks when reducing it to tablet and below versions. If you believe that it might be better to redesign this section for functionalities sake it is something I am considering.
