Design comparison
Solution retrospective
Please anyone can solve its mobile view .... In browser dev tool it looks normal in mobile view but if you check in your mobile phone its behaviour is abnormal.
and its svg image
Plz help!!
Community feedback
- @yishak621Posted almost 2 years ago
Its very easy and tricky at the same time ...by default The two circular background svg pics are placed in center....so to place them at the desired place u should use
transform:translate
property it enables the svg to keep them in the position even if u resize the width of the screen .....so how can we do it? well ...first we add the backgrounds as pusdoelements (:after and :before ) and then we will move both of them to the left 50% and to the top 50%/*psuedo elments*/ .container:before, .container:after { position: absolute; content: ''; width: 100vw; height: 100vh; background-size: auto; transform: translate(-50%, -50%); /*to the left and top*/ z-index: -1; }
then if u see in the screen one of the circular svg is in position so we don't touch that we just keep that svg pic in that place(left top) ...
/*adding the top svg before the container*/ .container:before { top: 0; left: 0; background: url('/images/bg-pattern-top.svg') no-repeat ; }
But what about the other circle ? well its just out of the screen completely ..so we should bring it back to a desired place by moving it 100% to the bottom and 100% to the right ..
/*adding the top svg after the container*/ .container:after { top: 100%; left: 100%; background: url('./images/bg-pattern-bottom.svg') no-repeat ; }
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord