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
Related
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
I have been working on a website and I'm very happy with the results.
The menu works quite well on mobile. However, I decided that I wanted to try a menu that disappears when viewd on smaller screens.
Here is the javascript plugin I used [Responsive-Nav][1]
I followed the directions, and when I finished, it messed up my navigation and didnt work.
Here are both versions
[Site before plugin][2]
[Site after plugin][3]
Im not sure what is causing
You must also define the rules for different screen sizes in css.
In responsive-nav.css line 11:
.nav-collapse li { width: 100%;
For desktop browser set width: auto. This way the menu items will be displayed inline.
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
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.
I have two problems... I've tried altering my CSS file, the JavaScript files and all kinds of other things. A google search yielded no remedy to these problems, so I come to the awesome site of answers!
This page -> http://students.cmps.subr.edu/aaron.chauvin/misc/test2.html
has some issues in Chrome and Safari. Only when my CSS is in effect, the pictures that are supposed to be side-by-side aren't, but when the CSS is off, they are. This problem isn't evident in FF/IE9. I'm thinking it has something to do with the but I'm not totally sure. Edit Edit: Thanks for the fix Genzer!
Also on that page, even if all my CSS/JavaScript isn't linked, I have a small gap between the bottom of the images that are links and the dotted link border... I want to get rid of the gap. What's causing this gap? This happens in all browsers.
Thanks in advance.
Edit: Here's the CSS: http://students.cmps.subr.edu/aaron.chauvin/misc/style.css
Edit Edit: Fixed the side-by-side image link problem, now trying to figure out what's causing the variation in the display of the custom a:focus border (non-existent in IE9, partially encases image link in Webkit browsers) and the gap between it and the bottom of the image link (all browsers BUT IE9).
The problem is you're wrapping all your column's info in a span: <span class="reg">...</span>
IE9 and FF figure out that you want it to display as a block element, but Webkit (Chrome and Safari) don't. Set display:block on the "reg" class and you should be set. (I think this fixes the "dotted border" issue as well, but i'm not quite sure what you meant there)
To get the orange border to show up in IE9, make sure to set outline-style to something like "solid" or "double" in the a.piclink:hover css class, in style.css. Once i did that, the border shows up.
I'm still not entirely sure why your links and nested images are behaving like they are, but I found a little tweak (tweak = almost a hack) to get it to work: Set display:inline-block; on a.piclink and set a fixed height on it. Note that inline-block tacks on 4px, so the height should be 4px taller than the height of the image; in your case: 47px. It's a bit of a hack, but it's valid and it works. Unfortunately IE7 doesn't like this, but zoom:1; *display:inline; get it working.
Adding following CSS code in your style will make Chrome display your TestPage the same as IE8.
span.reg a {
display: inline;
}