Fat_Bird_Creative Posted March 29, 2023 Share Posted March 29, 2023 Hello, on my home page (https://www.fatbirdcreative.co.nz/) I have a text animation that cuts off the g. Does anyone know a code to extend the view box? Here is the code I'm using: <html> <head> <style> .button2{ background-color: #00939f; border: none; color: white !important; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 50px; } .button1{ background: -webkit-linear-gradient(to right, #66c0cc, #00939f); background: linear-gradient(to right, #66c0cc, #00939f) !important; border: none; color: white !important; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 50px; } .fadeIn {font-family: 'Snicker-Bold'; margin: 1px; display: inline; } </style> </head> <body> <div class="sec-rev-data" style="background: #ffffff; color:#000000; padding:40px; border-radius: 0px;"> <h1>Hi, I'm Fat Bird Creative – a freelance graphic designer that creates <br> <div class="fadeIn"> <span>branding</span> <span>illustrations</span> <span>logos</span> <span>websites</span> </h1> <p></p> <a href="/contact" class="button1">START A PROJECT ➜</a> <a href="/work" class="button2">VIEW WORK ➜</a> </div> </body> </html> Link to comment
Solution tuanphan Posted April 3, 2023 Solution Share Posted April 3, 2023 Add to Design > Custom CSS /* animation text cut off */ .fadeIn span { overflow: visible !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Fat_Bird_Creative Posted April 3, 2023 Author Share Posted April 3, 2023 @tuanphan Thanks Tuanphan, your amazing! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment