The positions of my dot keeps moving depending on the mobile device how would I keep the button(dot) on my website to stay in the same position no matter the device. How could I fix this.
Website : https://sitharr.myshopify.com/
Topic summary
A user is experiencing issues with a clickable dot element that shifts position across different mobile devices and viewports. They need the dot to maintain a consistent position regardless of screen size.
Proposed Solution:
- Replace the existing CSS positioning code with viewport-relative units
- Use
position: relative, centered margins, and transform properties - Remove conflicting manual position adjustments that interfere with responsive positioning
Current Status:
- Initial CSS modifications were provided using
calc()functions andtransform: translate()for centering - User reports the dot still changes position depending on viewport
- Helper indicates they may have already fixed the original error, but user is requesting the complete code to verify their implementation
Technical Details:
- The dot uses absolute positioning with pixel-based dimensions (12px × 12px)
- Solution involves switching to percentage-based positioning with transform centering
- Code snippets and screenshots were shared to illustrate the changes
You should be aware that it is challenging to make a clickable point adapt dynamically to the width and height of the background image/video. However, you can try the following:
- First, locate the following CSS or fragment in your source code:
.dot {
width: 12px;
height: 12px;
background-color: #ffffff; /* White color */
border-radius: 50%; /* Make it a circle */
cursor: pointer;
border: none;
outline: none;
position: absolute; /* Position dot relative to the body */
top: calc(72.7%); /* Center vertically */
left: calc(54.9%); /* Center horizontally */
transform: translate(-50%, -50%); /* Center the dot */
}
- Then, remove it and replace it with this:
.dot {
display: block;
width: 12px;
height: 12px;
position: relative;
margin: 53.5vh auto;
background-color: #ffffff;
border-radius: 50%;
cursor: pointer;
border: none;
outline: none;
transform: translate(8.8vh, 5vh);
}
Results:
By the way, you should also remove this code. It is responsible for manually adjusting the position of the point on the screen. It conflicts with the code I provided, so you must remove it if you want to see the previous results.
1 Like
Thank you for your help but the dot keeps changing position depending on the viewport. Thanks a lot for your help though
Could you send the whole code in here so I could just try just in case I did something wrong
Thank you
The code I provided is what you should add to your code. However, from what I see, you’ve already managed to fix the error you had!
1 Like