Trouble Ensuring CSS Flexibility

I need assistance in making the CSS code below responsive for phone screens.

It seems that the issue may be due to using pixel dimensions for the book sides (not included in this CSS), and I thought it could be solved by using vh/vw or % in the div.

Please refer to the code snippet provided:

@-webkit-keyframes rotatingAnimationX {
  0%{
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
  100% {
    -webkit-transform: rotateX(360deg);
            transform: rotateX(360deg);
  }
}
@keyframes rotatingAnimationX {
  0%{
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
  100% {
    -webkit-transform: rotateX(360deg);
            transform: rotateX(360deg);
  }
}
@-webkit-keyframes rotatingAnimationY {
  0%{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
@keyframes rotatingAnimationY {
  0%{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
@-webkit-keyframes rotatingAnimationZ {
  0%{
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}
@keyframes rotatingAnimationZ {
  0%{
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

.containerp {
  /*width: 100vw;*/
  height: 100vh;
  overflow: hidden;
  -webkit-perspective: 1200px;
  perspective: 1200px;
  display: -webkit-box;
  display: -ms-flexbox;
  /*display: flex;*/
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  /*justify-content: center;*/
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.containerp > div {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.boockup {
  -webkit-transform: rotateX(29deg) rotateY(-88deg) rotateZ(0deg);
  transform: rotateX(29deg) rotateY(-88deg) rotateZ(0deg);
}
.book-container {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-animation: 30s rotatingAnimationY linear infinite;
  animation: 30s rotatingAnimationY linear infinite;
}
.book-container > div {
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center center;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

Your help is greatly appreciated. Thank you!

cssresponsive-design

Answer №1

If you want to ensure your design is responsive, there are a few key elements to keep in mind:

1. Use percentages, vw (viewport width), and vh (viewport height) to size elements appropriately.

2. Utilize @media queries to adjust styles based on different screen sizes.

A useful trick is to maintain scale using vw for both width and height. For instance, if you have an image that is 600px wide and 150px high:

.image{
  height: 150px;
  width: 600px;
}

// This code will display the image as 600 x 150 px

@media( max-width: 600px){
  .image{
    width:100vw;
    height: 25vw;
   }
}

// When the screen width is under 600px, the image will adjust to 100vw x 25vw while maintaining the 4:1 scale ratio.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Intrusive JQuery Code Incorporating Itself into SharePoint 2010's HTML Markup

There seems to be an issue with my content editor web part wherein the menu, which is clickable and hoverable due to the jQuery installed, is causing some unexpected behavior. Whenever the menu is clicked or hovered over, it changes the content in the adja ...

jquerycsssharepoint-2010

Even though the model value is set to true, the material check box remains unchecked

My mat-table contains data and checkboxes. The checkboxes should only be checked when the element.select property is true. However, when I use [(ngModel)]="element.select", all the checkboxes end up getting checked. Below you can find the code snippet: &l ...

javascripthtmlcssangular

What is the best way to modify foundation's small, medium, and large breakpoint values?

I am currently customizing a Drupal theme child that incorporates the Foundation framework from its parent theme. The predefined breakpoints in the Foundation classes and attributes do not perfectly align with the design of my website. Can anyone provide ...

cssmedia-querieszurb-foundation

Overlaying images with non-rectangular shapes

I am struggling to achieve a specific design for my bootstrap card. The card is filled with an image and I have placed text on top of it, which is made visible by using a transparent overlay. I would like the overlay to be slanted, similar to the effect se ...

htmlcsstwitter-bootstrapbootstrap-4

The text on the HTML page reads from left to right in a page that

Currently, I am facing the challenge of showing a negative number in an HTML page with rtl direction. Despite using direction: ltr, the label does not display correctly. To demonstrate the issue, I have created a jsFiddle showcasing the reverse scenario ...

htmlcssright-to-left

In Internet Explorer 11, border-radius creates a separation between elements

There is an issue with whitespace appearing around elements that have a border-radius larger than 0, but this only occurs in Internet Explorer. If using border-top-left-radius: 20px; and border-top-right-radius: 20px;: https://i.sstatic.net/MAKsx.png *W ...

htmlcsstwitter-bootstrap-3internet-explorer-11

Align the radio button, dropdown menu, and checkbox in a single row

I'm attempting to align a radio button, dropdown, and checkbox on the same line where the second radio button is displayed. I'm utilizing Bootstrap 4, but I'm open to plain HTML that doesn't necessarily follow Bootstrap styling. I trie ...

htmlcssbootstrap-4

Sibling selector beside not functional

Trying to create a sliding sidebar without using JavaScript has presented me with a challenge involving an adjacent sibling selector that just won't function as expected. Here is the code snippet causing the issue: .sidebar { position: fixed; ...

htmlcss

What is the best way to stretch the background image across both the footer and navbar for my app?

Here is the code snippet I am currently working with: <template> <v-app> <AppBar></AppBar> <v-main> <router-view></router-view> </v-main> <Footer></Footer> ...

javascripthtmlcssvue.js

The images located in the public directory cannot be located

I'm a beginner with Express and I'm currently trying to incorporate images from the public directory into my project (the same directory where my CSS files are stored). Initially, I attempted placing the image files directly in the public folder ...

htmlcssexpress

No more CSS/JS code left standing after combining Flask with Ajax

This question is being opened to address a problem that arose from a previous query found here: Dynamically update HTML images from Flask+Ajax. To summarize, I needed to refresh my HTML view after receiving a response via AJAX from a Flask endpoint. HTML ...

htmljquerycssajax

Webpack version 4.6.0 is currently loading a CSS file and it's suggesting the need for a suitable loader to manage this specific file

I have been encountering an issue with webpack 4.6.0 during compilation: Uncaught Error: Module parse failed: Unexpected token (1:4) You may need an appropriate loader to handle this file type. | div { | background-color: yellow; | color: red; He ...

cssreactjswebpack

Having trouble drawing over buttons in HTML5 Canvas?

window.addEventListener("load", () => { const canvas = document.querySelector("#canvas"); const ctx = canvas.getContext("2d"); const color = document.querySelector("#color"); const strokeWeight = document.querySelector("#strokeWeight"); ...

javascripthtmlcss

Guide to showing Bootstrap Offcanvas within a Modal

Can the Offcanvas feature from Bootstrap be displayed within a Modal? Below is the code snippet: <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ccafa3bea98cfee2f5e2fe" ...

javascriptcssbootstrap-modalbootstrap-5bootstrap5-modal

Seeking a window-adjustable table with stationary headers

I have been searching high and low for a solution to my issue but have come up empty-handed. My goal is to create a table with fixed headers that remain visible while scrolling through the rest of the table. The catch is, I also need it to align properly w ...

javascriptjquerycsshtml-tablefixed-header-tables

Activate bootstrap's responsive design exclusively for mobile devices

I am facing an issue with my Bootstrap templates where they resize on all devices, instead of just mobile devices, and maintain responsive behavior only after a certain width. For instance, on a 15-inch laptop, when I resize the browser to half the size, i ...

htmlcsstwitter-bootstrapbootstrap-4

Find and retrieve all data attributes with JavaScript

What is the method to retrieve all data-attributes and store them in an array? <ul data-cars="ford"> <li data-model="mustang"></li> <li data-color="blue"></li> <li data-doors="5"></li> </ul> The resultin ...

javascriptcsshtml

The values from the form fields are not being properly transferred into the JSON object

Check out my JSFiddle here: https://jsfiddle.net/inchrvndr/7pwh9p8g/ When you click the "+" button, the bordered form elements are getting cloned. All the values of the cloned form elements are being passed into JSON data except for the parent element fr ...

javascriptjqueryhtmlcssjson

Altering the hover functionality for dynamically created class elements

I have a vision to create a unique e-commerce storefront with tile design, featuring an item thumbnail that reveals the item name upon hovering. I found inspiration from this example, but I want the item name to slide up smoothly on hover, rather than simp ...

javascriptjqueryhtmlcsshover

Uninterrupted stream of multi-line div content without any breaks in between

In this scenario, there are three main divs with a width of 100% each, and within each div, there are 3 inner divs with a width of 50%. The current layout is causing a line break after every set of 3 inner elements. <style type="text/css"> .inn ...

htmlcss