Develop Reference

css-grid rendering differently in Firefox and Chrome

Heads up - I'm new here, and new to some of the css-grid stuff. Bear with me if this isn't a peak Stack Overflow question.
I'm implementing the Slick jquery slider/carousel plugin into the website. However, I need the carousel slides to (a) all be the exact same height, and (b) be the same height as the slide with the tallest content. I'm getting two different responses on Firefox and Chrome when I try to modify the css to allow for this
I have copied the plugin's css straight into the css of the files I'm working with (so it becomes just part of the native css) so I have better control over it.
I've modified this new pasted css slightly from the original script slick.css file, but only by modifying one the display: none; to display: grid; on the .slick-list selector. This deals with the issue on Firefox, but not on Chrome.
All code that I am using is located here. I have added one line of code background-color: red; to the .slick-list selector to illustrate the space that SHOULD be taken up by slides that are shorter than the tallest slide: https://codepen.io/kyleshepherddev/pen/eqMOxm
I'm not sure what I'm expecting - the css I'm using may not be the right way to fix the problem. We have a client who used this plugin on their site, and I'm mucking around trying to figure out exactly how to fix it. The content of the slider shifts a bit from slide to slide, so the goal is to make ALL slides the SAME HEIGHT as the slide with the most content in it.
Works like a charm in Firefox; doesn't work at all in Chrome.

Simple update these two classes:
.slick-list to display: flex instead of display: grid
.slick-track to display: flex instead of display: block

owl-stage width on mobile (or small devices) view is larger than screen

I'm working on a clients website, implementing owl-carousel, but when going into mobile view in chrome + Firefox, owl-stage width (Which is auto calculated) goes crazy as I resize and go back go normal, widths around 4000px...etc.
P.S. code works fine on normal desktop view, it all goes crazy on 576px and below.
I have googled owl-stage width issue and found many old reports and solutions (including stack-overflow) that did not fix my problem, including setting overflow, removing owl options to debug.
code can be found here:
https://www.fisique.co/v2/
owl-stage width should be normal and not more than screen, which in return will render the h1 above it to be perfectly centered on the screen.

Ok, I spent more than 12 hours to figure out why this weird behavior.
Turns out, if you're using PagePilling.js (or fullPage.js) and trying to mix with Owl.Carousel or any other Carousel plugin, a conflict occurs because of css display property of auto generated divs set to table
The solution for my case was adding table-layout: fixed:
.pp-section.pp-table {
display: table;
table-layout: fixed;
}
If you're interested to read more about it:
https://github.com/alvarotrigo/fullPage.js/issues/895

Background Stills Scrolls on Mobile With Menu Open

I am going to get roasted for this but I've searched on StackOverflow and tried to implement the suggestions provided to no avail. Whenever I am using the menu on my website (on mobile devices) the main page still scrolls when I move my thumb and it causes glitches with the display. I cannot get it to lock in place when the menu is open.
Here's what I've tried
Position: relative (on body)
Height: 100% (on body)
Overflow: Hidden (applied to Body when you click to open menu)
None of those have worked. As you can see, the page still scrolls on mobile. Currently my live example shows this:
https://www.brotherhoodgaming.net
Any suggestions are welcome. I'd prefer a CSS solution to this rather than Javascript or Jquery (although Jquery toggleClass is fine as long as CSS is the baseline solution).

Centered slide carousel with bxslider

I require a reponsive, height adjustable carousel showing a hint of the next and previous content for a mobile website. After some research I came around the bxslider, which almost fullfills all my needs.
http://jsfiddle.net/8greL/1/
Unfortunately, I was unable to write a carousel and make it adapt to the width automatically. At the moment I was just able to force my way through ugly, static hacks suchs as this one...
$('.bx-wrapper').first().css('max-width', '240px');
Maybe my choice of library or my approach is wrong, but I have no clue how to get it done without writing a carousel by my own...

You will need to update the width(to max-width) of the bxslider so the responsive can go fluid...
But what I did to fix current state is this:
.galleryWrapper {
margin: 0 auto;
max-width: 240px;
}
.galleryWrapper .bx-viewport {
padding-left: 20px;
width: inherit !important
}
FIDDLE

Ok, I came up with a solution by adding/changing the calculation of the slide width and the amount the slides have to be slided inside of the library.
After I finalized my local changes I'll share it on github. :)
Update: I uploaded my changes into github ~> https://github.com/Gumbagubanga/bxslider-4/tree/develop

CSS margin-left is breaking in Chrome Extension

My situation is extremely confusing, and I haven't the slightest clue what's going on. I made a Firefox add-on to redesign a website using jQuery and CSS. When I tried to migrate the addon to Chrome (that part was simple, because the features I am using in each SDK are very similar), everything worked except one of the main design elements:
I have a menu with position: fixed; aligned to the left of the page, and margin-left: 150px; on the main container element. The problem is that the margin is completely disappearing when I open it in Chrome. It works fine in Firefox.
So then I copied all of the HTML, CSS, and JavaScript into a jsFiddle, and the margin worked fine. Everything was completely identical, so I can't figure out why it would work in jsFiddle but not on the website.
Using left: 150px works, but then the page spills 150px to the right, and those dreaded horizontal scrollbars appear.
Links:
Extension File (CRX): https://docs.google.com/open?id=0B3k3BjZD2YfiTWNzTlhsa0t5STg
Demo Website: http://demo.flvs.net (Username: demo, Password: demo)
jsFiddle (Some images don't load, but the code is identical): http://jsfiddle.net/CjSXA/

I just removed the margin-left from #page_cont and added it to #content-cont.
That made the content stop hiding under the menu, though the footer is still partially covered by it.