After creating the footer for my site I made a symbol of it so that I am able to use it on all my pages.
But somehow when I placed the footer on the new page the layout of the ‘Call To Action’ badge with the phone number got screwed up. I tried to adjust it by clicking the symbol on the new page and edit it until it was okay. The strange thing is that I then messed up the layout on the original (home) page and whatever I do I can’t seem to get it right for the homepage. On the new page (‘Wat we doen’) it is okay now. And I am really stuck … It is just a subtle difference but I’d like to have it perfect. And it worries me that this occurs when creating a symbol …
Can someone please tell me how to resolve this? And can anybody tell me why creating a symbol messes with some layout parts? Does that happen more often? And how can I make sure that it doesn’t happen?
Here are two screenshots of the same symbol (the footer) with the two different CTA badges (the most right part of the footer, the badge with the phone number):
Great site!
Here’s a short video to explain why this is happening.
The short answer is that elements inside symbols can still inherit styles from the parent elements they sit in, in this case, your Body class on one page, that doesn’t exist on the other.
You can remove the Body class from the home page to fixi it and instead inherit from the Global Body Tag which is the pink label. It’s not always ideal to add to many styles to the Body, it is preferrable to style those elements with their own global tags, this makes it easier to manage long term.
Take a look at the video, and if you have any more questions, then please don’t hesitate to ask!
That was really easy to fix … but I never would have found that on my own.
And thank you very much for the compliment about the site.
I really appreciate it!
This is my first webflow site but I’m falling in love with it every day a bit more.
Yeah, you can encounter some really tricky self made bugs for sure.
What Webflow offers is a tool for manipulating CSS and HTML visually, so having some knowledge of CSS structure and inheritance can always help. CSS Tricks is always useful, you don’t have to learn the code, but knowing some of the principles can surely help.
This is my first webflow site but I’m falling in love with it every day a bit more.
So glad to hear it! I totally get that. I started here on the forums and then ended up getting a job, and still feel that way
It is just a subtle difference but I’d like to have it perfect. And it worries me that this occurs when creating a symbol …
