Adapt the div according to the size of the screen

I am currently developing a simplified version of Canva, which is a page editor app. The size of my page div is set to A4 with dimensions of 1277px.

While the page looks good on larger screens, it doesn't display properly on smaller screens.

https://i.sstatic.net/cn5be.png

How can I adjust the page to make it visible on smaller screens?

This is my proposed solution:

.page {
  transform: perspective(100vh) translateZ(calc(100vh - 1300px));
  transform-origin: center top;
}

Although this solution works well, it appears blurry and I prefer to set a maximum height of 1277px for the .page div. Additionally, I am concerned that it may not be supported by older browsers.

htmlcss

Answer №1

To set a maximum height using a media query, you can follow this example:

@media only screen and (max-width: 600px) {
  .page {
    max-height: 1277px;
  }
}

It's recommended to use relative lengths for better scalability.

If you're unsure about browser compatibility, you can check with 'Can I Use?'. You can verify support for media queries in older browsers by visiting https://caniuse.com/?search=media

Answer №2

If you are looking to customize the size of a div based on the screen size, there are two approaches you can take:

  1. Utilize media queries
  2. Include width percentages

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

Why do I have trouble choosing my radio buttons?

How come my radio buttons aren't responding when clicked on? I have to press next to the button to get it to select. What could be causing this issue? <!DOCTYPE html> <html> ... </html> ...

html

Issues with tabbed navigation functionality in jQuery

I'm encountering some difficulties with the tabbed navigation I created using CSS. Essentially, when a button is clicked, it should remove the hidden class from one div and add it to the other. However, what actually happens is that the div which sho ...

javascriptjqueryhtml

I am having trouble grasping the concept of CSS and the first-child selector

I am having an issue with the first-child selector in CSS. I have two divs with the same class, each containing an image and a paragraph element. When I use the .div-class:first-child {margin:10} rule, the margin is only applied to the paragraph in the fir ...

htmlcss

When the user is actively scrolling in the browser, the button will disappear. However, once the scrolling action is completed, the button will gradually fade

Is there a way to hide the button with the id #stats while the user is scrolling, and then have it fade back in once they finish scrolling? It seems like the code below is not working as expected. Any help would be greatly appreciated! <button id="st ...

javascriptjquerycss

Tips on how to make a <li> element float independently without impacting other elements on the page

I have a dilemma with two divs in my HTML code. One is designated for the menu, and the other is simply for the title. The issue arises when I attempt to float the <li> items next to each other within the menu; they end up shifting downwards from the ...

csscss-float

Converting text into HTML format using Nextjs and React

Currently, I am working on a project that involves using Next.js and React. I am considering creating my own component to parse text based on certain conditions, but I am unsure if something similar already exists. My goal is to: Format the content in HT ...

htmlreactjsparsingnext.js

Is there a clash between skrollr and a customized pager for bx slider?

Hello everyone, I'm new to this forum and seeking some guidance. Please bear with me as I navigate through my question. Currently, I am working on a one-page website using Skrollr: https://github.com/Prinzhorn/skrollr and incorporating the BX Slider ...

jqueryhtmlbxsliderpagerskrollr

The Ideal Image Aspect Ratio for Twitter Bootstrap Carousel

I am trying to implement a carousel using Bootstrap, but I am facing an issue with displaying images of different dimensions. I want the images to maintain a fixed ratio within the carousel, but all my attempts with CSS have failed so far. CSS .carousel ...

htmlcsstwitter-bootstrap

The z-index of 999 in CSS is not functioning as expected on both Google Chrome and Safari browsers

To ensure the slider text is readable in white color, we have applied a black background with 0.65 opacity CSS on the slider image. This allows the white text to stand out effectively. The following CSS code was used for this effect: .zlslides .ms-slide- ...

csswordpressgoogle-chromez-indexopacity

Angular 8 component with material dialog that has a close button in the top right corner represented

I am currently working on implementing an X button in the top right corner of my material dialog, but I am encountering issues with positioning. Here is a snippet from my component.ts file: this.d.open(loginComponent, { width: '300px', heig ...

htmlcssangulartypescriptangular-material

Animate elements using fixed position without unexpected jumps

Trying to create an animation that expands a box to full screen. However, when I set the position to fixed before the animation begins, the box quickly moves up to the upper left corner. Is there a way to make it expand from its original location instead? ...

jquerycss

How can I prevent the expansion of elements in a drop-down menu when using display:

I've been struggling to implement a drop-down feature in my menu. The issue is that when I use display: flex, hovering over the drop-down also expands all other boxes without drop-downs. Any ideas on how to fix this easily? Additionally, is there a w ...

htmlcssflexboxfrontend

Discover the Ultimate Guide on Altering the Course of Mega Menu!

I am working on a mega menu that is set to display in the usual direction. However, for the last two items, I would like them to appear from the button upwards. I'm not quite sure how to explain it. What I envision is something similar to this: ...

htmlcss

Implementing JQuery techniques to dynamically insert separate content into elements sharing the same class

I have utilized django to establish a model company featuring attributes like name and address. I aim to exhibit solely the names of all companies in the query-set. My desire is for jquery to unveil the corresponding address upon clicking the name (via aja ...

javascriptjqueryhtmlajaxdjango

Nav bar breaching the Bootstrap threshold

I am new to using bootstrap and currently in the learning process. I am facing an issue with the navigation bar I created. All the contents are aligning to the right, but the search bar and tabs are breaking onto a new line. I have attempted various soluti ...

htmlcsstwitter-bootstrap

Developing web applications using a combination of PHP, MySQL, and

I am in need of creating an HTML form that functions as CRUD. This form should be able to record inputs such as "row_number", "channel_name", and "ip_address". It will store all the data in a MySQL table using the "ORDER BY row_number" function. The form i ...

javascriptphphtml

Issue encountered: difficulty with vertical alignment in table cell containing both text input and image

I am facing an issue with aligning two items (an input text and an image) within a cell of a table. Despite trying various methods like using vertical-align:middle, margin top, padding, and setting height to 100%, I haven't been able to achieve the de ...

htmlcssvertical-alignmentcss-tables

What is the best way to access the overlay dropdown menu from outside a responsive table?

My situation involves using a bootstrap dropdown multi-select within a td element, and also utilizing the table responsive class. However, due to this combination, the dropdown is not displaying correctly. The responsive "overflow: hidden" property is caus ...

htmlresponsive

What is the method for obtaining the total number of steps taken in a day (pedometer) exclusively for the current day on the

Is there a way to retrieve the total steps count for the current day only? The tizen.humanactivitymonitor.setAccumulativePedometerListener function allows me to access the accumulativeTotalStepCount, which represents the cumulative walking and running ste ...

javascripthtmltizen-wearable-sdk

Iconic slim template for data disabling

Having an issue while working on a Rails app with slim. I am facing a problem passing HTML to slim through a button using the data-disable-with attribute. My aim is to display an icon on the button when it's clicked. = f.submit t("basket.next_step") ...

htmlruby-on-railsslim-lang