Streaming live at 10am (PST)

Need Help with Two Issues - Responsive Div and True VH for Mobile

Hi all,

So I am having two issues - if you will have a gander at my link, I have a CMS collection page that has a header, a main section for the image and a footer with a thumbnail slider for the the other CMS images…

  1. I have made the main section responsive to the hight/width of the viewport by using the “object-fit” embed so the image resizes in correct aspect ratio depending on the viewport size, but the container div remains the same - I can’t figure out how to make it also resize in accordance with the image size - and because of that the footer does not move when there is blank space between it and the image…
  2. so the VH parameter is tied to the screen size of the device, however the actual inner dimensions of the viewport on various mobile devices is smaller (because of the toolbars…) - I am trying to design certain pages that will be non-scrollable so all the information will be seen without the need and an ability to scroll - but I can’t get it to be fitted to the actual inner dimensions of the viewport… I looked around and found the following solution - https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ but thus far i was unable to successfully integrate it… I was wandering if someone has a better/newer solution and if not, if someone can give me a pointer on how to integrate it - I have tried pasting the code in the body section of the whole site - but that didn’t do anything… maybe I am doing something wrong or missing a step somewhere - any help will be greatly appreciated…

Here is my site Read-Only: LINK

Here is my Published Page: LINK