Recently, I had a project where I had to include a div that was rotated 90 degrees and fixed to the right side of the screen. The challenge was making sure that as you scrolled down, the button moved along with the screen while maintaining responsiveness.
The issue arose when trying to rotate the div using either bootstrap or CSS - the fixed position wouldn't adjust accordingly, leaving some white space to the right of the div. This resulted in a less than ideal layout.
.popup-btn{
position: fixed;
width: 100px;
height; 100px;
right: 0;
top: 50%;
background-color: green;
padding: 1%;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
<div class="popup-btn">
<a href="#">Example div</a>
</div>
I attempted to use media queries and adjust the positioning with values like right: -5.5%, but it wasn't an elegant solution. Are there any suggestions on properly fixing a div to the right side of the screen?
Here's an example of how the button should stick to the side: