Jump to content

Text Popup Coding - Text Is In Different Positions Across Multiple Mobile Devices

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 6
  • Views 221
  • 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

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.