diff --git a/src/components/BottomToTop.jsx b/src/components/BottomToTop.jsx index fd5c0d8..5f68a18 100644 --- a/src/components/BottomToTop.jsx +++ b/src/components/BottomToTop.jsx @@ -34,10 +34,30 @@ const GoToTop = () => { }; const Wrapper = styled.div` +@media(max-width:481px){ +bottom:7%; +right:12%; +display:flex; +justify-content:center; +align-items:center; +position:fixed; +color:white; +background-color:rgb(59,130,246); +width:48px; +height:48px; +z-index:9999; +border-radius:50%; +cursor:pointer; +transition:transform 0.3s ease,background-color 0.3s ease; +&:hover{ +background-color:#003a79; +transform:translateY(-5px); +} +} display: flex; justify-content: center; align-items: center; - position: fixed; + position: fixed;6 bottom: 17px; right: 10px; color: white; diff --git a/src/components/chatbot.css b/src/components/chatbot.css index 60f0129..a576ac0 100644 --- a/src/components/chatbot.css +++ b/src/components/chatbot.css @@ -6,6 +6,12 @@ right: 20px; z-index: 1000; } +@media (max-width:481px){ + .chatbot-container{ + bottom: 7%; + right: 15%; + } +} .chatbot-toggle-button { background-color: #007bff;