We have an online courses platform. We use Wordpress 5 with Eduma theme and Learnpress plugin.
I am trying to make a netflix effect on the thumbnails of my courses.
I successfully did it but on the first row of courses, the image is truncated.
I tried to make a minimum code to reproduce the issue and paste it here, but there are too many css coming from the theme and different plugins. Impossible to leave some minimum code.
You can see the issue on the homepage of https://formatine.com/ in the rows of courses. Pass the cursor hover a course and you will see the zoom effect.
The second row is fine, but the first row has the issue.
I tried to change the css of parent container because I thought something nested is cutting the effect.
I tried some z-index on different divs, but it didn't work.
After days of investigation, I came here to see if anyone has an idea of what I am doing wrong.
Please help.
After the research, what I was able to find was:
There is one overflow: hidden applied to one of the parent div with class name as thim-course-grid.
Removing it will solve the issue.
Can you check and update?
Related
Heyall,
For a few days I have been getting the following problem:
screencap
The image shows two bars. It only is shown like this in a built version of Cordova on iOS or Android. Not in if ran in the browser, so I can't inspect the attribute.
The second bar (with no caps) is the select attribute. What the first bar is, God may know. But God hasn't yet been so kind to tell me. Does anyone know why it is there and is styled as is? Even without any css it still shows. I only want to show the second bar, obviously. But the first one won't disappear. It always shows the selected option of the select below.
I have tried 'cleaning' the css of the select (Reset/remove CSS styles for element only) but this hasn't worked. Also assigning select:before other properties won't work.
Thanks in advance!
Okay I have been able to solve this by removing jquery-mobile v1.4.5. How exactly jquery-mobile caused this problem to occur, I don't know. But by exchanging jquery-mobile by fastclick.js I do get the functionality I want, but without the bugs/unintended features.
I'm trying to do create a parallax effect on this webpage: http://therealrohanm.me/Falcon-Hacks-Website/
View the code here: https://github.com/Meeshbhoombah/Falcon-Hacks-Website/tree/gh-pages
I'm having a few issues, the first being the orange mountains (as pictured here: https://github.com/Meeshbhoombah/Falcon-Hacks-Website/blob/gh-pages/images/parallax-1.png) are not displaying. They are supposed to be directly behind the pink trees.
My second issue is that the trees are too "zoomed in." I want them to be able to see the entire line of trees/mountains.
The reason I combined these questions into one is that I feel like they're both related, but I'm unsure how to accomplish them. I've tried many different ways. How do I do these things?
you have an absolute position problem...
anyway setting left:initial ; right:200px will get it on screen;
I have 2 selection boxes states and cities, On state selection change I am writing a java script to display cities of that respective state by hiding rest of the cities. The problem is, height of the selection box dropdown is getting effected in chrome where as its appearing fine in firefox.
Is there a quick and proper solution for this?
i found a solution to this problem in this post myself
Height of an HTML select box (dropdown)
maybe you can check that one out. it helped me out a lot and i hope it helps with your problem aswell.
As i just saw there is a kind of dublicate Question right here
<select> HTML element with height
It got some good Ideas too. But i didnt check them all so far. Maybe you can find something in that post too
I am currently working on a project that involves a background image that needs to be linked specifically to an element within a container div.
The link is: http://idearevolution.ca/clients/jab/
The challenge I am running into is that as I resize my screen the green circle doesn't stay behind the guy. I've run into issues with responsive background images having to work with elements within a contained area in the past, but I've never been happy with my solutions.
The last thing I tried was using Sass to run a loop, adding a media query to update the position every 10 - 20 pixels. I don't like this solution however because of the code bloat it generates.
I am wondering if anyone has run into this issue before and if so, how do you go about resolving it? I've tried a few things but I'm just not happy with any of the solutions.
Any help would be great.
Thanks,
Andrew
Semantics would fix this problem best.
The semantics of using an image is this:
If the Image does not add to the content and explanation of the site,
do not use the image.
So, in truth, this image looks like it should only be part of the design.
Therefore, use the CSS3 Feature of Multiple Backgrounds.
I am having an extremely odd issue creating a template for my zencart ecommerce website.
I find that many times I load the website my menu will break up and split over two lines as shown below.
The reason I find this behavior odd is that if I refresh the page it correctly displays.
Now I could understand how to fix this if it was consistently one way or the other but it seems to vary between the two with no obvious difference in the code... I am not sure if this is some sort of technical bug with chrome as I haven't been able to replicate it in other browsers however even if it is I really need a way of working around it. So I am curious as to whether anyone has had this issue before and if so how they got around it.
Link to live site: http://digitalmatrixonline.com.au/
Thanks Jason
If you add
white-space:nowrap;
To the div that contains the list it should prevent this, not sure why it's happening though.
Edit: here is a jsfiddle showing the technique http://jsfiddle.net/RM4S2/
Edit: No floats http://jsfiddle.net/BsGfu/2/
This is a really strange problem, and I was able to recreate the quirkiness in Chrome. While I don't know the direct cause of the issue, I think I found one way that works.
If you set the width of the second div within 'navEZpagesTop' that you are floating right that is wrapping,to 'width:485px;'. This seems to give the section room and does not wrap. If you want to leave more room for this expand without modifying the css you could set it to a much larger size, and float all the links inside of this to the right(instead of the left).