I posted something similar about this a few months ago, but never really resolved it (my own fault, been busy). My problem is:
I have an svg logo, which is a squarish vector symbol. When people view my site, and resize the page on their device of choice, I want the logo to resize accordingly. Currently the logo resizes pretty well. The problem is that when the logo resizes, eventually it gets so proportionally large that it creeps up into the text that is above it. The text above it is just some text in a subheading.
So - do I need to put the subheading size text into another container such that it will bump into the container the logo is in (thus stopping it from growing into the text)? Or should I do something else? Cyberdave previously advised me to avoid using negative margins in the class that the logo is inserted in, and to use percentages. Ok… but I’m still confused as to how to make this work, really. Part of this could be because I’m another person who is confused about the “position” parameters, in general, but I don’t think that’s the only bit of it that needs working.
Thanks Anna! However, after following your directions (at least, I’m pretty sure I followed them), now the logo is directly covering the text. Same result no matter where in the order it is inside the Hero title wrapper. Should I now make another Position adjustment?
Ok, I changed that as you say. However, if resize the desktop screen past a certain point, the logo doesn’t stay put, and it doesn’t work at all when I test the other media types, either.
(I also made sure to publish your change suggestions, and then tested the page in Chrome as well as Firefox.)
On the tablet and mobile views logo has big negative top-margins. It is definitely should be removed. Yet I would change “hero title wrapper” top alignment on the tablet, from 40% to 20%