Slick carousel content does not show - html

I'm having a problem with a slick carousel that loads and works (verified with Element Inspector) but does not appears on screen. Another slick carousel works fine in the same page. I've gone through it many times but can't find the problem and it's driving me nuts. Here's the link to the page, go to EXPERIENCIA section:
http://nhtest.esy.es/buro/index-06-06.html
Notice that the containing div displays perfectly, I've added it some text and a red border to check it.
You can see below the navbar that the main slick carousel works fine, but this other one doesn't display its contents. If you inspect it in small devices size, you can see that the first image loads, and then disappears, and if you look in the code inspector, you will see it working, but not displaying. For some reason it doesn't even show the first image in responsive inspection mode.
Looking forward to your answers, many thanks in advance!

Related

Bootstrap width whitespace issue avilon theme

I having issues that you can drag website to left and it seems like width is larger than viewport.
When website load it seems to work but then i can click left on mouse and drag it....and then you see whitespace that appear.
No idea where this is happening. Im using https://bootstrapmade.com/demo/themes/Avilon/ theme.
See images below:
Problem image where you can see whitespace
How it suppose to look

White space in top/bottom of header on mobile (WordPress)

Working on a WordPress website.
Everything looks fine on desktop but on mobile there is a significant amount of whitespace at the top and bottom of the header.
New to WordPress so I'm having a hard time figuring out what is going on.
Here's a link to the website: http://reluctant.ceo
I would like to note that when I change the size of my browser window this problem does not occur, only when I'm looking at it on my iPhone.
Also, when I turn of "responsive layout" in the theme options I still have this issue on my iPhone.
One more thing, not sure if it matters but the header is using Slider Revolution.
The issue was that I had my revolution slider inside of a VC row element. I needed to delete the row and simply replace it with just the revolution slider instead of placing the slider inside a row.

Translate-Z Mixing Order only Mobile

I'm having a weird problem with a website we are developing. This site has a parallax effect in it, and it's implemented without JavaScript using only translate z and scale (you can check this in http://keithclark.co.uk/articles/pure-css-parallax-websites/)
The problem we are having is that in chrome for desktop the site seems to be ok (you'll see the problem on the second picture):
But when I turn "devide mode" on, this is what I see 90% of the times (also in mobile and also, most of the time, but not all the times):
As you can see, the slider above "DESTACADOS" is gone, but if I click any button, or execute any action (click on button or link), the slider appears again.
The problem is kind of hard to pinpoint, so ask for whatever clarification or specification you need.
Thanks in advance.
EDIT 1:
I have tried to make some small example but I couldn't. It works fine for each part but not on the whole.
This is the full site:
http://192.185.67.199/~arielces/animations/#/commerce/main
Another thing I've noticed is that when in device mode, if you search the div with the magnifiers or just move the console from bottom to right, the content shows.

Layout problems in IE

Currently having a big problem with the layout of a site. It works fine in every other browser but for some reason, in IE, the menu's aren't expanding when they are clicked on. The screenshot below is how the list should look when a button is clicked on, this has also pushed down the elements of the bottom of the website such as the footer and images. The website address is www.citybathcoll.ac.uk if you want to see it first hand. From what I can see, it might be an unclosed tag but I can't see anything that stands out. Any help would be appreciated, Thanks.
Screenshot: http://imgur.com/ML3BYRk

css not loading consistently

I'm building the landing page for our app, and i found some inconsistencies when opening up my page on google chrome. I designed the page to have the text be on the right side of the picture. However sometimes when i refresh the page, the text drops below the picture. This doesn't happen all the time, but if i keep pressing refresh, the text will eventually drop.
I'm assuming that it's because i might be putting my width of the div a little too narrow. but i dont understand why it works sometimes and not other times.
the site is on : https://www.thedashapp.com/about.html
(disclaimer: the site isn't supposed to be live yet, so the links aren't all properly hooked up yet, and the app still hasn't launched)
See pictures:
How it's supposed to look like:
What happens when i click refresh a couple times:
You'd be better off putting the text in a separate div, and perhaps the image too. Then apply float:left; to both the div containing the text and the image or div that contains the image. I'm pretty sure that'll fix it.