Text From Code Block Changing Positions Throughout Desktop and Mobile Devices. How To Make This Consistent / Stationary?

Hello,
I am recently added custom coding for a "text pop-up" containing information for a piece of text on my website.

I implemented the text popup using a code block : 

<span class="text">ⓘ<span class="popup">A $1 per mile round-trip travel fee will apply for each mile traveled beyond a 35-mile radius from our Business Location: 2550 Canyon Springs Pkwy Suite I, Riverside, CA 92507</span>

And I used the following code in Custom CSS to make the pop-up visible on hover/pressing it on mobile:
 

//add text popup style
.popup {
visibility:hidden;
/*style of the popup*/
padding: 1rem;
background-color: #D4ADAF;
border: 1px solid #ccc;
box-shadow: 5px 5px 15px #ccc;
border-radius: 10px;
opacity:.9;
/*placement of the popup*/
display: inline-block;
position:relative;
top:-1.5rem;
left:6%
}

My issue is, that on mobile, the position of the text (not the pop-up itself), is in different positions across mobile devices.
I am viewing the text on my android device. And it is exactly where I want it, but on my gf's iphone device, the text is nowhere near the spot that it needs to be,

How can I fix this, so that it is in the same position across all mobile devices.

Im also unsure of whether or not it is in the right position across all desktop devices as well.

I went ahead and attached pics to this post so that you can see what I am talking about.



Thanks in advance.

Edit: The page URL is - https://www.perfectcapturebooth.com/book

@tuanphan any idea?

Can you provide screenshot on both mobiles? We can imagine problem easier.

Hey Tuan,
I provided screenshots above

 

Quote

I see both icons/icon position look same

10 minutes ago, tuanphan said:

I see both icons/icon position look same

The Icon Position is in the correct spot on the first picture, which is on my Android phone. Next to the phrase "Free Local Travel (Within 35 Miles From Business Location)"

But on the iphone, the Icon Position is next to "Free Setup / Teardown"

Not sure if you're able to see the position differences in the picture, but I also circled them.

I think you try using JS code to move Popup content into Free Setup text, then use CSS to set position, so it will show same position easier.

Use this to Code Injection > Footer to do this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
  	$('div#block-922b4d43368e97bc5019').appendTo('div#block-c1c464cda17f8b8f3752 li:nth-child(9)');
  });
</script>
<style>
  div#block-c1c464cda17f8b8f3752 li:nth-child(9) .code-block {
    position: absolute;
    left: -10px;
    z-index: 99999999 !important;
}

.fe-block-c1c464cda17f8b8f3752 {
    position: relative;
    z-index: 99999;
}
</style>

On 6/15/2024 at 2:34 AM, tuanphan said:

I think you try using JS code to move Popup content into Free Setup text, then use CSS to set position, so it will show same position easier.

Use this to Code Injection > Footer to do this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
  	$('div#block-922b4d43368e97bc5019').appendTo('div#block-c1c464cda17f8b8f3752 li:nth-child(9)');
  });
</script>
<style>
  div#block-c1c464cda17f8b8f3752 li:nth-child(9) .code-block {
    position: absolute;
    left: -10px;
    z-index: 99999999 !important;
}

.fe-block-c1c464cda17f8b8f3752 {
    position: relative;
    z-index: 99999;
}
</style>

 

Hey Tuan,
The popup content is correctly positioned already as is, in correlation to the "ⓘ".

The issue is with the "ⓘ" itself being in different positions throughout different mobile, and desktop devices. 

@tuanphan sorry for constantly bumping this thread up

But I'm really still stuck with this issue 

I don't know this. You try posting to new thread, maybe someone can help with this.

Ok thank you for attempting to find a solution, I appreciate the help.
Ill go ahead and post it to a new thread

I am having an issue where I have a code block, with the text "ⓘ", appearing in different positions across different desktop, and mobile devices.

I want the text "ⓘ" to appear immediately after the sentence on my page that says  

• Free Local Travel (Within 35 Miles From Business Location)

But on certain devices, the position of this text/code block moves despite how it appears in the editor.

How can I fix this, so that it is in the same position across all desktop and mobile devices.

I went ahead and attached pics to this post, of the issue happening on mobile devices, so that you can see what I am talking about. On my android, the closest that I am able to get this code block to the sentence, is immediately to the left of the sentence. 

But when I view this on iphone, the code block is in an entirely different position.

Thanks in advance.

Edit: The page URL is - https://www.perfectcapturebooth.com/book

I am having an issue where I have a code block, with the text "ⓘ", appearing in different positions across different desktop, and mobile devices.

I want the text "ⓘ" to appear immediately after the sentence on my page that says  

• Free Local Travel (Within 35 Miles From Business Location)

But on certain devices, the position of this text/code block moves despite how it appears in the editor.

How can I fix this, so that it is in the same position across all desktop and mobile devices.

I went ahead and attached pics to this post, of the issue happening on mobile devices, so that you can see what I am talking about. On my android, the closest that I am able to get this code block to the sentence, is immediately to the left of the sentence. 

But when I view this on iphone, the code block is in an entirely different position.

Thanks in advance.

Edit: The page URL is - https://www.perfectcapturebooth.com/book

1 hour ago, PerfectCaptureBooth said:

I am having an issue where I have a code block, with the text "ⓘ", appearing in different positions across different desktop, and mobile devices.

I want the text "ⓘ" to appear immediately after the sentence on my page that says  

• Free Local Travel (Within 35 Miles From Business Location)

But on certain devices, the position of this text/code block moves despite how it appears in the editor.

How can I fix this, so that it is in the same position across all desktop and mobile devices.

I went ahead and attached pics to this post, of the issue happening on mobile devices, so that you can see what I am talking about. On my android, the closest that I am able to get this code block to the sentence, is immediately to the left of the sentence. 

But when I view this on iphone, the code block is in an entirely different position.

Thanks in advance.

Edit: The page URL is - https://www.perfectcapturebooth.com/book

Do you mean adding the icon inline with your HTML block?

My idea is using link embed function in HTML BLOCK

1. In your HTML Block, add you icon and text reference together

2. Set the link for icon with #cus-icon

3. Set the link for text reference with #cus-des

4. Apply the following custom css to set the effect of showing text reference when you hover the icon

[href="#cus-icon"] {
  text-decoration: none !important;
  color: #000 !important;  
}

[href="#cus-icon"]:hover + [href="#cus-des"] {
  opacity: 1;
}

[href="#cus-des"] {
  position: absolute;
  text-decoration: none !important;
  background: #d4adaf;
  color: #000 !important;
  padding: 1rem;
  background-color: #d4adaf;
  border: 1px solid #ccc;
  box-shadow: 5px 5px 15px #ccc;
  border-radius: 10px;
  pointer-events: none;
  width: 200px;
  opacity: 0;
}

This will make sure the icon is always in the same line with text

Here is my test

Pros: basic setting with only custom css

Cons: with css, we can not prevent the click action if user click on the icon

Idea from read less read more post: