I'm currently working on a WordPress theme and I've run into a problem that I can't seem to solve. I've created a footer area for widgets and want to run Masonry on it. When there is no Masonry running, then the widgets align in 3 columns on a 1920x1080 screen, which is what I am aiming for, but when the Masonry is activated, then all the widgets crash into one column. I've tried a lot of searches, but can't seem to find someone running into the same problem.
Here's a website I had lying around that i could upload the theme to, so you can see the problem: https://youtube.akusasdesign.com/
And I've added the whole theme to Github, so that you can look through my code. Hopefully, someone will be able to help me, cause I've run completely out of ideas as to what is causing the problem.
Github: https://github.com/AkusasDesign/Akusas-Studio
Related
Kindly check this page: https://cutt.ly/mDYu9Nr (I have removed the unwanted section here to make things less complicated).
After adding thumbnail carousal website top menu had stopped working.
After some digs I found out that "slick.min.js" is giving me trouble. If I removed this script menu dropdown work properly.
It will be great if someone help me in this regards. I have already spent 2 days and tried almost every solution which are on internet like adjusting JS sequence, css solution etc.
I have a site over at https://sofubiki.com, running on Wiki.js
There's a column down the left hand side that holds the contents, then there's a big space beneath this that'd be perfect for adding some ad banners or other info. Is there any way to insert a section in this column without being able to edit the main site theme (limited knowledge and a confusing process!) Looking around the web it seems that a JS div is a possibility but I'm not too sure!?
Any help would be much appreciated!
Thanks!
So I added scrollmagic to my website at the start of the project. However, I did not end up using scrollmagic and instead went with a different approach.
Now, when I try to remove scrollmagic from the website, it breaks the scrolling of the website.
If i try to remove the code in the HTMl where I link the scrollmagic files, the scrolling stops working.
If I try to remove the scrollmagic code from my js file, the scroll stops working.
Scrollmagic code is at line 1137 of the all.js file. Also, I can't just leave it in because it breaks scrolling on mobile.
Here's the project: PROBLEM FIXED
I would really appreciate it if someone could help me figure out what is breaking the scroll
Edit: I know my code is ugly and ineffecient, I'm still a novice and learning. All I need to know is how to fix the scrolling
Edit2: Fixed. It was the stupid css file of the multiscroll plugin causing the problem.
need someone familiar with Masonry JS. I'm developing a site locally, and everything is fine. When I push to my live staging site, my Masonry items seem to ignore the bottom margin that I have.
See here: http://dev.benadelt.com
You can see that the right-most grid items are overlapping each other, and the rest of the grid items don't show the 35px bottom margin I have in the CSS so spacing is off. If you resize the browser so the grid re-adjusts, even if you then bring the browser back to full size, everything looks fine.
Also, on my local machine it all works just fine upon first page load.
Any ideas there? Thanks so much!
Ben
AH figured it out. I had to use $(window).load rather than $(document).ready!
Here is my app - http://www.shalgreetings.com/ I am trying to override the scroll bar going down to a imagesection in CSS, so that whole app is visible with logo, header and other controls all the times when people navigate through different #sections. I am not sure where in the CSS, I am making the mistake as clicking on #sections traverses the page. Here is this app's original inspiration code, which has got this right.
Anyone can point me where the problem seems to be in the above app?
Edit - It was not a problem with CSS. Perhaps I am looking for a Javascript solution that would follow the link, but still ScrollTo(0,0).
There is no mistake in your CSS, the inspiration code "cheated" in a way: he used just a few photos so the viewport would never be too short to display everything. In the example you can make your window height short and it will exhibit the same problem.
You probably already know that you can solve this problem with a bit of javascript (onclick="return false;"). I'm afraid there is no pure CSS way from preventing this from happening.