0

I've been making a 3D book with CSS based on this example, and I've been struggling with making it responsive. The height is the biggest issue. I've tried the following:

a) making width 100% and using vh for the height, but that doesn't look good

b) using this jQuery example, which is

window.addEventListener("resize", function(e) {
    var mapElement = document.getElementById("map");
    mapElement.style.height = mapElement.offsetWidth * 1.72;
});

but because I have a several divs with set height, it doesn't seem like it's working

c) using padding-bottom with percentages, but while that seemed like a good idea, I couldn't make that work for the life of me because I'd have to set padding-bottom on several divs:

.bk-left, .bk-back, .bk-front, .bk-cover {
  /* and they also can't be the same padding-bottom 
  because it doesn't seem to work like that */
}

But none of those really worked. Either I used them incorrectly, or there's something else I can do. Here's the codepen with my 3D book as it is currently. I'm using Bootstrap 4, but only for the grid, so I'm not really looking to implement Bootstrap solutions to the actual book. But can someone please take a look and let me know how I can do this? I'm open for both CSS and JS/jQuery approaches, as long as it scales properly. Thanks a bunch!

Retros
  • 3,511
  • 10
  • 40
  • 60
  • I don't really understand what exactly it is you want, especially when looking at the codepen. Should the height be as high as the viewport? Or should the width be as wide as the viewport/document, while keeping the aspect ratio? – MiB Jun 03 '18 at 17:05
  • Sorry if my question seemed confusing. Yes, I need the width to be as wide as the viewport/document, while keeping the aspect ratio. @MiB – Retros Jun 03 '18 at 17:08
  • Because I can make the width responsive, but the height is an issue because it stays the same and it messes up the ratio. – Retros Jun 03 '18 at 17:09
  • 1
    Alright, I see. Then it is going to be a lot more work, because your CSS has fixed widths/sizes/lenghts all over the place. You'd have to turn them all into percentages, or set them explicitely with JavaScript. The only other thing I could think of is using the CSS `scale` property on `book-wrap` and calculate the factor based on the needed width divided by the current width at factor 1. – MiB Jun 03 '18 at 17:29
  • Actually, since my only issue with responsiveness is on screens smaller than 350px, scale property works great. It's a quick fix with very little drawbacks. Thanks @MiB for this suggestion! It sure beats the complicated ones. – Retros Jun 03 '18 at 17:45

0 Answers0