PlasticArcade
-
Posts
21 -
Joined
-
Last visited
PlasticArcade's Achievements
-
PlasticArcade reacted to a post in a topic:
Help with CSS backgrounds, floating BG parallax effect, BG Breaks Site!! :)
-
it should have a footer with page info on each page like this one... it shows up fine if I remove the CSS for the parallax BG's, however if I use that feature it disappears and just shows the image you posted above.
-
That worked thanks, now there is still the issue of my footer disappearing on pages that use this effect, is there a way to get that back?
-
PlasticArcade reacted to a post in a topic:
Help with CSS backgrounds, floating BG parallax effect, BG Breaks Site!! :)
-
I want to use CSS code to create floating fixed backgrounds like on this website https://briankesinger.com Like a parallax effect where the content floats over top of the backgrounds. Here is a test page I setup https://creativejourney.life/test125 site pass: nga2023 Here is the my CSS code that I used so far, however when I try to use more than one background with the effect it breaks the page. I am only able to get one background to function not multiple backgrounds like the page above. Additionally I loose my footer as well, which totally disappears. //-- Fixed BG Page Test mountains --// section[data-section-id="632a686e08fe477e2b4ad9d8"] { .section-background { background-repeat: no-repeat; position: fixed; z-index: 0; } } Any help would be awesome. I really like the look and want to get this to work. thanks 🙂
-
Solution!... So I have two solutions to my problems... First Solution for the invisible elements that get shown if I have a visible object that is the size of the my page or larger, in my case I used a shape along the left side of the page that stretched the whole height this kept invisible elements from shrinking the page when they disappeared, there may be a coding way around this like making the page stay the same dimensions even if elements are are larger than the page are but I don't know this code. Second Solution This is less of a solution and more of a bandaid, however... The issue is with Squarespace API that when I use CSS code to alter the page in some way, note; it's usually only visual code elements that cause the issue, but my solution at the moment is to remove all my CSS code for the block I am working on and save it in a separate text doc then paste it back once I make the changes. Unfortunately this doesn't fix the issue causing the problem but it does keep me from pulling hair out when my page elements jump around on me as I watch my whole page destruct itself in front of my eyes SO for the meantime I will be removing my code when I edit a page then put it back again once finished, at least until Squarespace fixes their CSS code problem. Additionally another thing that could work is to add a code in your CSS that turns it off when you are editing a page and back on when you are viewing it live. I assume this would fix the issue but I'm not sure and I do not know how to code that in CSS. So that's about it
-
tuanphan reacted to a post in a topic:
Help... Rollover hover effect causes page to jump around?
-
Here's what I figured out.. anytime I apply CSS to formatting an element on the page no matter what it is it freaks out and the page elements move around or stop working al together. If you use the site without any CSS code at all it works fine and has no issues This is problem because Squarespace removed elements that I used in my page before when they updated to the fluid method so now I have to code them back in with CSS, so I can either have a page that looks weird, change my design and use something basic and boring or leave Squarespace till they fix the problem. the fact that I cannot use CSS code really not acceptable I tried this code on a text box and same thing happened I made a new page with nothing else on it to do the test and same things happened everything stopped working when I used the CSS code.. once I removed the code everything went back to normal and worked fine. .fe-block-yui_3_17_2_1_1678469370930_40214 { padding-top: 6% !important; padding-bottom: 18% !important; padding-right: 6% !important; padding-left: 6% !important; }
- 8 replies
-
- 1
-
-
- css
- style-editor
- (and 3 more)
-
Here's some code Im using for the HOME2 page Still have the issue if I edit the mobile version everything stops working now that I have added the hover effects and animations to this page I can no longer edit the page everything is moving around on me again. /* HOME2 TEST */ /* BG */ .fe-block-yui_3_17_2_1_1678418564612_23150 { display: none; pointer-events: none; @media screen and (max-width:767px) { display: block; } } .fe-block-yui_3_17_2_1_1678418564612_14015:hover ~.fe-block-yui_3_17_2_1_1678418564612_23150 { display: block; } /* text */ .fe-block-yui_3_17_2_1_1678418564612_28726 { display: none; pointer-events: none; @media screen and (max-width:767px) { display: block; } } .fe-block-yui_3_17_2_1_1678418564612_14015:hover ~.fe-block-yui_3_17_2_1_1678418564612_28726 { display: block; } /* END HOME2 TEST */ /* HOME2 TEST 2 */ /* Text with BG */ .fe-block-7037f3f1143f999c8e88 { display: none; pointer-events: none; @media screen and (max-width:767px) { display: block; } } .fe-block-6f912b053e299dd59052:hover ~.fe-block-7037f3f1143f999c8e88 { display: block; } /* END HOME2 TEST 2 */
-
I setup a page called HOME2 its linked at the top menu that has the effect working... I redid it on a separate page and it seems to be working there... I was also using a text box with background originally, I like it better but I had issues with that so on HOME2 I used a separate shape and text box and altered the code to incorporate that... Im going to try adding the old version to the second image and see if it works or not.
-
the home page but its gotten all screwed up Im going to have to start over I think. All the page elements keep sliding around I had to dump my CSS code a bunch of times and start over. I can't even edit the page now without something move or shifting on me and whenever I edit the mobile version it screws up the regular version even worse. These effects were working fine a few months ago without any problem then they just stopped working. I didn't change anything I just logged in this week and everything was messed up. Now I can't seem to fix it 😞 I removed the effect from the other two images only "World Building" doorway image has the effect still, I think I'm going to just remove the animation and hover effect and see if that changes anything. I really like it... it adds some kool flash to the site but its not worth the headache if I can't get to work properly or it breaks all the time.
-
/* Home Door 1 Hover Text */ .fe-block-f5c934caa91889b9e570 { display: none; pointer-events: none; @media screen and (max-width:767px) { display: block; } } .fe-block-yui_3_17_2_1_1678404060999_4355:hover ~.fe-block-f5c934caa91889b9e570 { display: block; } /* Home Door 2 Hover Text */ .fe-block-ff32fbe389b37d7b7de5 { display: none; pointer-events: none; @media screen and (max-width:767px) { display: block; } } .fe-block-yui_3_17_2_1_1678403196682_6422:hover ~.fe-block-ff32fbe389b37d7b7de5 { display: block; } /* Home Door 3 Hover Text */ .fe-block-1e85010964a3f108df10 { display: none; pointer-events: none; @media screen and (max-width:767px) { display: block; } } .fe-block-yui_3_17_2_1_1678385933045_5384:hover ~.fe-block-1e85010964a3f108df10 { display: block; }
-
So new issue whenever I edit my mobile version of my site my CSS hover effect stops working... I have a hover effect where a text box appears under my gate images on my home page, I have deleted everything and started over twice and as soon as I edit the mobile version code it all stops working.
-
Hello So I am having an issue on my main page. I have a mouseover hover effect on some images that displays or shows a text box when you hover over the image, this causes the page to jump around when viewed in safari or firefox and when using the editor in chrome, it doesn't seem to do it when viewing the page in chrome browser on its own. website creativejourney.life sp: nga2023 Also... An unrelated question to the issue above, how do I turn off the hide/reveal effect in edit mode so I can edit the text boxes?
-
tuanphan reacted to a post in a topic:
Disable Hover Text Effect on Mobile
-
Disable Hover Text Effect on Mobile
PlasticArcade replied to PlasticArcade's topic in Customize with code
I figure it out added " @media screen and (max-width:767px) { display: block; }" Full CCS Below .fe-block-6313f2fbbc5132d2d90956ca { display: none; pointer-events: none; @media screen and (max-width:767px) { display: block; } } .fe-block-6313f2fbeeba99d22dcc2360:hover ~.fe-block-6313f2fbbc5132d2d90956ca { display: block; } -
Site URL: https://creativejourney.life Hello I am trying to disable this effect on the mobile version of my site Pass is ngart2022 if you want access the site Heres the CSS Code I am using .fe-block-6313f2fbc9287602656c2b6d { display: none; pointer-events: none; } .fe-block-6313f2fbcf37a66948dfbf63:hover ~.fe-block-6313f2fbc9287602656c2b6d { display: block; } I want the captions to the images to be active and visible all the time on mobile essentially I want to disable the "display: none;" on mobile versions and not wait for the hover Thanks for the help
-
Problem with section background transparency
PlasticArcade replied to PlasticArcade's topic in Site Design & Styles
I wasn't getting any response so I changed it... Im now using a floating image from the section below, instead of trying to figure out how to float a section and make it transparent... I would still like to do that if I can but I couldn't get it to work as I said. the images above are from the same page, I changed what I did but I could setup another page with the same thing if you wanted me to I guess. -
Site URL: https://plasticarcade.com Hello Here is my site and pass https://plasticarcade.com @PLA2022 So I have a floating section over my top section and I made the section background transparent but now there is a white background there. My whole point to this is I want to to have a floating section with my site title floating overtop a gallery slideshow for top banner auto cycling though image I want this to be transparent with a slight color where you can see the gallery behind the section background. This is what I have... And this is what I want... I'm using a gallery slideshow because it animates on its own and I don't have code injection to add animation to banner slideshow. Separate thing to the background thing Another issue I'm also having some weird white color shifting effect on my menu at the top, I know its because of the social icons because when I remove them it has no problem
