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…
- 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…
- 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 - The trick to viewport units on mobile | CSS-Tricks - CSS-Tricks 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