Jump to content

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

Recommended Posts

Posted (edited)

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

Resized_Screenshot_20240605_193355_Chrome_1717641242905.jpeg

IMG_5763.jpg.jpg

Edited by PerfectCaptureBooth
Link to comment
  • Replies 11
  • Views 744
  • Created
  • Last Reply

Top Posters In This Topic

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.

Link to comment

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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. 

Link to comment

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

IMG_5763.jpg.jpg.745183f9780ead489a759ba9b2c38461.jpg

Resized_Screenshot_20240605_193355_Chrome_1717641242905.jpeg.eb4f05a3a64de70fd2375dd1e4e266ab.jpeg

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.