Jump to content

Help... Rollover hover effect causes page to jump around?

Go to solution Solved by PlasticArcade,

Recommended Posts

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?

Link to comment

/* 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;
}

Link to comment

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.

Edited by PlasticArcade
Link to comment

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.

Link to comment

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 */

Link to comment

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;

}

Edited by PlasticArcade
Link to comment
  • Solution

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

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.