NewClassicalDesign Posted August 4, 2022 Share Posted August 4, 2022 Site URL: https://timecraft.group/home-draft password for the site is "metaverse" timecraft.group/home-draft noticed an annoying graphic issue when I designed some custom buttons for a client site. When you view the site on mobile the buttons display a very subtle border around the text within the area of the button. However, when you check mobile view in squarespace or if you use chrome devtools to simulate the size on mobile the issue does not appear. You will likely need to enlarge the image to see what I am talking about, its a very subtle box surround the text of the button. here is the code used for one of the buttons: <style> .button-box { box-sizing:border-box; outline:none; } .drawn-button1 { font-family: 'squada one'; line-height: 1.2rem; align-self: center; text-align: center; background:#242637; padding:.6rem .6rem; margin:0 1rem; transition:all .5s ease; font-size:1.5rem; outline:none; box-shadow: 20px 38px 34px -26px hsla(0,0%,50%,1); border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; border:solid 7px #fff; opacity: 0; animation: appear1 2s linear 5s; animation-fill-mode: forwards; } @keyframes appear1 { 0% { opacity: 0; } 100% { opacity: 1; } } .drawn-button1:hover{ box-shadow:2px 8px 4px -6px hsla(0,0%,50%,1); } </style> <div class="button-box"> <a href="/#web3"> <div class="drawn-button1">TWO.FIVE <br> <span style="font-family:'Roboto Slab';font-size:1rem; line-height:.8rem;margin-top:0px;padding-top:0px;"> start your web3 journey</span> </div></a></div> Anyone know how I can keep the inner box from showing up? It does not show up on desktop. Link to comment
Beyondspace Posted August 4, 2022 Share Posted August 4, 2022 3 hours ago, NewClassicalDesign said: Site URL: https://timecraft.group/home-draft password for the site is "metaverse" timecraft.group/home-draft noticed an annoying graphic issue when I designed some custom buttons for a client site. When you view the site on mobile the buttons display a very subtle border around the text within the area of the button. However, when you check mobile view in squarespace or if you use chrome devtools to simulate the size on mobile the issue does not appear. You will likely need to enlarge the image to see what I am talking about, its a very subtle box surround the text of the button. here is the code used for one of the buttons: <style> .button-box { box-sizing:border-box; outline:none; } .drawn-button1 { font-family: 'squada one'; line-height: 1.2rem; align-self: center; text-align: center; background:#242637; padding:.6rem .6rem; margin:0 1rem; transition:all .5s ease; font-size:1.5rem; outline:none; box-shadow: 20px 38px 34px -26px hsla(0,0%,50%,1); border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; border:solid 7px #fff; opacity: 0; animation: appear1 2s linear 5s; animation-fill-mode: forwards; } @keyframes appear1 { 0% { opacity: 0; } 100% { opacity: 1; } } .drawn-button1:hover{ box-shadow:2px 8px 4px -6px hsla(0,0%,50%,1); } </style> <div class="button-box"> <a href="/#web3"> <div class="drawn-button1">TWO.FIVE <br> <span style="font-family:'Roboto Slab';font-size:1rem; line-height:.8rem;margin-top:0px;padding-top:0px;"> start your web3 journey</span> </div></a></div> Anyone know how I can keep the inner box from showing up? It does not show up on desktop. I check both on desktop and mobile are no box for text. Have you figured it out? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
NewClassicalDesign Posted August 4, 2022 Author Share Posted August 4, 2022 11 hours ago, bangank36 said: I check both on desktop and mobile are no box for text. Have you figured it out? no, I haven't figured it out. Again the problem only appears when you actually look on a mobile device, not just resize or simulate mobile while on your desktop. I've noticed it specifically in mobile safari and mobile chrome. 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