Being a fan of using position:relative along with top, left, bottom, and right for positioning elements, I find myself frequently adjusting the values manually in the console before updating the CSS file. While I enjoy this process, there is a major drawback - it lacks responsiveness to changes in size. Allow me to demonstrate with a quick example.
In the initial image, the topic icons such as delete topic and edit appear well-aligned. However, upon zooming in, as seen in the second image, the alignment is completely off. Here is the code for the page in its entirety. I am desperately seeking a solution that would allow for easier responsiveness. Position:relative may be convenient, but sadly it doesn't offer responsiveness :(
Minimal CSS:
span.icon_share_topic {
position: relative;
/* left: 1422px; */
/* top: 1048px; */
margin-left: 60%;
}
<span.icon_flag_topic {
position: relative;
left: 990px;
}
...
Minimal HTML :
<div class="topic-buttons">
...
</code></pre>
<p>If you are interested in more than just the above code, please let me know. Any help would be highly appreciated! By the way, I'm working on this project <a href="https://ide.c9.io/amanuel2/ng-fourm" rel="nofollow noreferrer">here</a>. It would be fantastic if we could collaborate on resolving this issue here!</p>
<p>Based on James Howell's suggestions, I made adjustments to the HTML:</p>
<pre><code> <span ng-if="flagSee();" class="container_flag_icon">
...
</span>
And updated the CSS accordingly:
span.container_flag_icon.ng-scope {
position: relative;
}
span.icon_flag_topic {
position: absolute;
left: 976px;
}
Unfortunately, even after making these modifications, the issues persist when zooming. -_-