doesn't work on my theme, widget "jumps" to the right side

Hi!

I have checked your site.
The problem is in theme styles.
But there is no easy solution (
Did you see styles corresponding to sidebar and widgets? All width values are relative. It is good for making responsive layouts, but creates troubles with fixed positioned elements. So you need to make choice: responsive sidebar or fixed widgets… or wait for a couple of weeks I have one idea how to workaround responsive sidebar problems, but not sure will it work…

My other site uses a different but also a responsive theme and this plugin works 100% there.

Maybe it’s just in the CSS rules? Did you check the CSS on my site? Let me know if you need access or something. I really would like to make this plugin work with my theme.

Thanks!

Maybe it’s just in the CSS rules?

Yes, theme styles and CSS rules are the same things )
Of course I checked them.

My other site uses a different but also a responsive theme and this plugin works 100% there.

Not all responsive themes creating troubles.
The problem with this theme is in responsive sidebar styles.
Sidebar changing its width! Widget width is bind to sidebar width. That’s the problem. We can set fixed width for sidebar and widgets and there will be no jumping, but you’ll loose responsive functionality for sidebar.

I made some changes to better support responsive layouts.
Update the plugin: https://downloads.www.ads-software.com/plugin/q2w3-fixed-widget.4.0.5.zip

On the plugin setting page you’ll find new option “Inherit widget width from the parent container”. Enable it!
See result. I am sure that wont solve the problem completely, but will help us to enable fixed widget for responsive sidebar with future css modifications.

I gave it a quick try but it still didn’t work. The widget still jumps to the right side.

Here are the settings that I used – https://i.imgur.com/OxHpW2y.png

I have ‘jQuery(window).load() hook’ checked because if I leave it unchecked, the plugin will mess up my homepage and some elements won’t display properly.

I also tried increasing the hook priority to 100 but that too didn’t do anything.

The options are ok!
Did you deactivate the plugin?
I need it active to see which css modifications to do next

I activated it again.

Hopefully you can fix the compatibility issue because I have this running on another website and I really like it.

Thanks!

ok!

Change your css this way:

theme.css line 54:

#section-header {
position: relative;
left: -25px;
}

change to:

#section-header {
position: relative;
/*left: -25px;*/
}

skeleton.css line 266:

.container .five.columns {
width: 310px;
}

change to:

.container .five.columns {
width: 310px;
padding-left: 20px;
}

styles.css line 258:

.sidebar > * {
padding: 0 0 0 8%;
width: 91%;
}

change to:

/*.sidebar > * {
padding: 0 0 0 8%;
width: 91%;
}*/

styles.css line 273:

.widget {
margin-bottom: 40px;
display: inline-block;
max-width: 100%;
width: 100%;
}

change to:

.widget {
margin-bottom: 40px;
/*display: inline-block;
max-width: 100%;
width: 100%;*/
}

Don’t forget to backup changed files!

And you have to fix a javascript error:
Uncaught TypeError: Cannot read property 'top' of undefined sf.js:111
It causes widget to be fixed too early!

I did the CSS changes above but now my site doesn’t look right! The sidebar disappeared and is now at the bottom.

As for the JS error, I have no idea how to fix that. I have virtually zero JS knowledge. ?? It’s from this plugin – https://www.ads-software.com/plugins/ajaxy-search-form/ – but it’s not actively supported by the author so I wouldn’t get any help from him.

Here’s what it looks like – https://i.imgur.com/NsVSkLc.png

I’m going to revert the CSS changes as I need to do add some stuff in the footer and the sidebar is taking up some footer space with these changes.

Well-well… I just wanted to show the ways how to change css in you case.
Of course you need to fine tune styles.
Sidebar went to bottom? Try to reduce sidebar padding-left value or sidebar width!