PerfectCaptureBooth

Sorry Updated @tuanphan

Bumping this, could still use some help @tuanphan Any suggestions?

Hey guys, so I am trying to recreate this "word looping" effect that can be found on the first section of this site : https://focuspocusproductions.com/photo-booth-activation/ Here on my own personal site: https://www.perfectcapturebooth.com/activations I went ahead and put similar words as the example page for an accurate display of what I'm trying to achieve. I would like to get the words to re-center, and the loop words to have the blinds effect, but I can't seem to get any of my changes to the CSS to work. I am using the following coding that can be found here : https://www.beatrizcaraballo.com/blog/looping-rotating-words-heading-squarespace This is the Custom CSS:

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

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

This seems promising, but unfortunately , I have slideshow gallery reels attached to each menu option, So I cannot add the code blocks to those gallery sections 😕

@tuanphan sorry for constantly bumping this thread up But I'm really still stuck with this issue

I am trying to do something like this on my page : Perfectcapturebooth.com/backdrops When they click "Premium or VIP" i'd like the content changing, rather than a whole entire new page loading

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.

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.

Hey Tuan, I provided screenshots above

@tuanphan any idea?

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

Fixed thank you!

That worked thank you!

Hi, my site www.perfectcapturebooth.com is multi-lingual and I was previously successful at hiding certain folders with certain pages. But now it seems for mobile, all of the folders are being shown in the menu! These are the codes that I was using, the desktop code still works properly. Mobile isn't working Please help! : <style> /* hide items on desktop */ nav.header-nav-list>div:nth-child(1), nav.header-nav-list>div:nth-child(3), nav.header-nav-list>div:nth-child(4) { display: none; } /* hide items on mobile */ .header-menu-nav-list [data-folder="root"] .header-menu-nav-folder-content > div:nth-child(1), .header-menu-nav-list [data-folder="root"] .header-menu-nav-folder-content > div:nth-child(3), header-menu-nav-list [data-folder="root"] .header-menu-nav-folder-content > div:nth-child(4) { display: none !important; } </style>

Having the same issue, following for update

Updating, this code is no longer working for mobile, any solution? /* hide items on mobile */ .header-menu-nav-list [data-folder="root"] .header-menu-nav-folder-content > div:nth-child(2), .header-menu-nav-list [data-folder="root"] .header-menu-nav-folder-content > div:nth-child(3) { display: none !important; } </style>

Thanks a ton @creedon ! This fixed it!

Hey, I'm seeing this problem on my Spanish home, locations, contact, and FAQs pages for my site. In the tab it shows <br/> https://www.perfectcapturebooth.com/inicio https://www.perfectcapturebooth.com/ubicaciones https://www.perfectcapturebooth.com/contactenos https://www.perfectcapturebooth.com/faqs-spanish Any clue on why?

Solved it all! Thanks!

Update : So I'm trying this code instead, where I changed the "hide items on mobile " coding completely. And so far, this seems to work correctly. <style> /* hide items on desktop */ nav.header-nav-list>div:nth-child(2), nav.header-nav-list>div:nth-child(3) { display: none; } /* hide items on mobile */ .header-menu-nav-list [data-folder="root"] .header-menu-nav-folder-content > div:nth-child(2), .header-menu-nav-list [data-folder="root"] .header-menu-nav-folder-content > div:nth-child(3) { display: none !important; } </style>

Hey man sorry for barely getting to this! So I tried this code, for the desktop it works, but for mobile nothing is happening at all. Not sure if I'm inputting it wrong or something. This is how I inserted it: <style> /* hide items on desktop */ nav.header-nav-list>div:nth-child(2), nav.header-nav-list>div:nth-child(3) { display: none; } /* hide items on mobile */ [data-folder="root"]>div:first-child>div:nth-child(2), [data-folder="root"]>div:first-child>div:nth-child(3), { display: none; } </style>

Yes I ended up doing that