Minor CSS / Bootstrap 4 / HTML modifications for mobile html site
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hi Front end UI devs

I need a CSS Bootstrap 4 / HTML expert to help me with 2 small issues in my HTML CSS code as attached: To view what I'm trying to achieve, enable developer options and choose a mobile device since I'm creating a mobile version of a website.

  1. Replace 1 figure tag in the 2nd row that has the caption Video Caption Row 3 with a DIV that has an image overlayed with a gradient and text as per the sample image in the RESOURCES folder.
  2. Force the footer to be bottom, its now hanging dependant on the content heights

Here are the link to the files: https://drive.google.com/open?id=1hxNdAcMJ33q9ISOoqkR5j8cvP1cZPQYi

I would appreciate if you'd create a separate css file for any additional css tags you add. For an expert its probably a 30 mins task.

PS. Are you an expert Adobe PSD / Adobe XD to Bootstrap 4/HTML front end developer who has a couple of spare hours daily? I usually have many more such bounties for you if you are always online :) and can sort bounties fast

Thanks

awarded to kostasx

Crowdsource coding tasks.

1 Solution

Winning solution

Here is my solution: https://drive.google.com/open?id=1D2pOiHDdlwDghbTu2PJIDPoFH_PGLhtT

All custom CSS are added in the style tag in the head. See comment "Custom CSS".
I've also added a special class named "VideoCaptionRow3" on the div element.

For a gradient, closer to the RESOURCES image, you can try tweaking the following CSS rule:

.VideoWrapper.VideoCaptionRow3 figure:after {
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 70%);
...
}
I am also available for extra bounties.
kostasx 21 days ago
Hi Kostasx. I've seen your solution, thanks a lot. Its 80% complete... What about the 3 rows of text in the sample image.... (Thursday, Majirani, Season 1)....
remotedevske 21 days ago
Just updated the HTML/CSS. Please download the file again and check.
kostasx 21 days ago
OK. Let me redownload it
remotedevske 21 days ago