Responsively sized logo relative to page size AND text/items (above it)

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 very much Webflow-ers.

E

Hi Ecarter,

Could you provide a read-only link?

This way we can help you quicker.

Here you go.

https://preview.webflow.com/preview/bkmtest1?preview=a083e1bbdb66beb09a4a554f9fc406e2

Hello @ecarter

For understand relative/absolute/fixed positioning try to read this topic http://forum.webflow.com/t/explaining-relative-absolute-fixed-positioning/21829/2

For fix the issue with logo, I can suggest next steps:

  1. remove bottom padding on the logo
  2. remove 101% height and set it to “auto”
  3. make “Hero title wrapper” position: relative
  4. move logo inside that wrapper and set it position: absolute

With this settings, logo will never “cover” text above.

Regards,
Anna

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?

Hi @ecarter,

I am SORRY, my bad, I did mistake in point #4 :frowning: :disappointed_relieved:

Logo should have position: relative and also should stay right after subheading.

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.)

Thanks again.

Hello @ecarter

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%

Best regards

Thanks so much!! I completely forgot that some settings do not cross the media types.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.