Hi everyone.
Hope this message find you all well.
Have been trying to create the following design on a project site, and so far have been unsuccessful. Have tried Absolute positioning, with relative success - the problem is that when you try the site for responsiveness, the stamp moves outside it’s current position.
Any help will be greatly appreciated.
Many thanks in advance.
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hi @Svilen_Georgiev,
Did you get this working? I couldn’t click on the read-only link.
Hi Gary
Thanks for reaching out and trying to help.
No, I am still trying to figure out what would be the best solution. At the moment I think the best way to approach the issue is by adding the stamp to the image and create a new image that is combining both of them.
How would you approach the issue yourself? Any thoughts/solutions?
Oh you’re not talking about how to place them on the page? You’re trying to make the actual circle graphic? Is that right?
Hi Gary
Yes, but I don’t think that’s possible. Am I right?
Correct. You’d make those in graphic program. I have the exact same thing on my site. I used an SVG. Then animated the div. We current cant do anything on a curve in Webflow.
Many thanks for the prompt replies Gary, truly appreciated.
How about vertical text? Have been wrestling with that for a while, and I don’t really like the Webflow solution.
Have been thinking to ask you, do you user fluid responsiveness in your designs (REM). I have been trying to use FinSweet method, but I am clearly doing something wrong because it doesn’t work on my site - most likely something with the code that I have to insert, because I am doing everything else correctly.
Trust the week is going great.
Just find a solution to the vertical text problem.
I didn’t quite understand what your secondary question was about vertical text, but in my opinion it would be better to use CSS text orientation instead of transforming the element.
About the squiggly line and the circular text, have you tried left:0 and transform: translate(-50%, 0%) while making sure the parent can overflow ? I would take a look at your project but it doesn’t seem like you’ve included a read-only link.
Hi Shawn
Thanks a lot for the ideas. Not sure about the CSS text orientation, as I am still learning how to use CSS and Java.
Will try your suggestion about the squiggly line and the circular text, and will update you.
Thanks a lot for the help. Hope everything is going well.
I tried everything Shawn, I hope you can be the beacon of light and show us the way
Depending on the layout, you don’t really need to use absolute positioning, you just need to transform your stamp-holder 50% to the left.
Go down to Effects and click the + sign next to 2D & 3D Transforms and put -50% on the X axis. The 50% means half of the element’s width that you are moving (translating) it from its normal position.
Did that solve it for you?
Hi Shawn
Man, what a awesome source of knowledge you are. I still can’t believe you managed to fix it so quickly and easily. Maybe it worked because it was named after you 
One more question - how to keep the text in the same position. It is being pushed down and out the section when I test the site on tablet view. Also, in what way this solution is different from absolute positioning?
