Adjust page to fit any size of screen resolution

Currently, I am in the process of designing a print template for my website. Everything seems to be going smoothly except for one issue that has arisen. The screen resolution on my device is 1600x900, so I have designed the page specifically for this resolution. However, the problem lies in the height of the page. Even though the page is created using Bootstrap and is responsive, there seems to be a discrepancy when it comes to how the page appears on different resolutions.

This pertains to the "print preview (ctrl + p)"

Header
Some text
Some text
Some text
Some text
Body
Some text
Some text
Some text
Some text
Footer
Some text
Some text
Some text
Some text

When viewed on other resolutions, the layout looks like this:

Header
Some text
Some text
Some text
Some text
Body
Some text
Some text
Some text

Page 2
Some text
Footer
Some text
Some text
Some text
Some text

My query is if there is a method to make the page fit the same height regardless of the resolution, essentially displaying the content exactly as it appears on my screen.

Here are some of the methods I have attempted:

 p {
        font-size: 12px;
        line-height: 1;
    }

    @page {
        size: A4 landscape;
        margin-left: 18mm;
        margin-top: 0.2mm;
    }

While this solution sometimes works, I am seeking additional tips or suggestions to solve this issue. Thank you in advance for your assistance, and I apologize if my explanation is unclear.

htmlcss

Answer №1

Your approach to this problem is not quite right. With the vast array of screen sizes in existence, it's essential to design with flexibility in mind rather than fixating on a single resolution. By targeting a range of devices with similar dimensions, you can reach a broader audience without alienating those using different devices.

It's crucial to understand that web pages don't have to appear identical on every device. Embracing this concept will undoubtedly enhance your skills as a web designer.

While viewport units can help maintain proportional sizing across various screen sizes, they aren't a one-size-fits-all solution and may not work well for printing purposes.

For instance:

.container{
    height: 100vh
    width: 100vw;
}

In addition to viewport units, utilizing media queries allows you to control how your web page looks when printed. Transitioning from 

@media screen and (min-width: 30em){…}
to 
@media print and (min-width: 30em){}
can ensure your page prints exactly as intended.

Keep in mind that your print stylesheets might already contain styles from other mobile or tablet media queries, leading to some complexity and potential need for overrides. A printed document typically has a narrower "viewport" compared to digital screens.

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

The VueJS Hello world application is experiencing technical difficulties and is currently not functioning as

As a complete VueJS newbie, I've just started working on my very first app. It's supposed to be a simple Hello World application, but unfortunately, the code isn't quite behaving as expected :( HTML <!DOCTYPE html> <html lang=" ...

javascripthtmlvue.jsvuejs2vuejs3

Using JQuery to toggle a fixed div at the bottom causes all other divs to shift upwards

I'm currently working on a chat feature using node JS, and while the functionality is perfect, I've run into an issue with the CSS aspect of it. The problem arises when we have multiple tabs and clicking on just one causes all the tabs to move u ...

phpjqueryhtmlcssnode.js

A guide on integrating variables into a MySQL table using PHP

I am currently working on a project where users should be able to select their schedule. Here is the code that I have written so far: <?php //if form has been submitted process it if(isset($_POST['submit'])){ $servername = "localhost"; ...

phphtmlmysql

Spring framework experiencing issues with loading CSS and JavaScript files

I'm facing an issue with my Spring-MVC application where the CSS and JS files are not loading even though they are correctly called. Can anyone help me figure out what I'm doing wrong? Resources folder: Project --> webapp --> resources - ...

javascriptjavacssspringspring-mvc

Having trouble with the click button flip function? It seems to be working in one section but not in

Currently, I am facing an issue with a card section that contains two buttons and a description. The first button adds an image which is working perfectly fine, as well as the description section. On the other hand, the second button adds a video and when ...

javascripthtmlcss

How can an HTML form element identify which submit button has been clicked?

In my HTML form, I have included 2 buttons to meet the requirements of our customers. I am trying to determine how to identify which button was pressed on the backend. Below is a code snippet that demonstrates this: <form method="get"> < ...

html

Implementing a full-width search bar within the Bootstrap navbar

I'm trying to create a navbar using Bootstrap 3.7.7 with a logo on the left, links on the right in two rows, and a large search bar in the center. I've managed to align the logo and links correctly, but I'm struggling with sizing the search ...

jqueryhtmlcsstwitter-bootstrapnavbar

Steps for adjusting the position of this div in relation to the main container

Apologies in advance for my lack of HTML skills. I am struggling with a page layout issue. I have a website at . When the window is resized, the ads div on the right side overlaps the main container. What I would like to achieve is to make this ads div re ...

javascriptjqueryhtmlcss

What is the most effective method for optimizing websites that do not respond to changes in window size

I've developed a website that is not responsive (it's more of an "experimental/artistic" site with a lot going on the screen, making it difficult to make it responsive..) I have decided not to cater for mobile phones, but I would like the site t ...

javascripthtmlcssresponsive-designzooming

Utilizing FabricJS to create a canvas with synchronized scrolling to the window

In the process of developing an app, I am utilizing the Html2canvas library to capture a screenshot of the body. Once the screenshot is taken, it is displayed in a canvas component using the fabricJS framework. The canvas is set to have the same height and ...

javascripthtmlcanvashtml5-canvasfabricjs

Having difficulty encapsulating three.js rendered particles within a single div

I'm facing an issue where the particles generated by my three.js project are not contained within a specific div or html element as intended. Instead of staying within the designated boundaries, the particles are spreading across the entire DOM witho ...

javascriptjqueryhtmlthree.js

Adjusting the width of a Material UI drawer: Tips and tricks

Currently, I am working on implementing the Material UI drawer and anchoring it to the top of my page. It is functioning correctly, however, I am encountering an issue where I am unable to adjust the width of the drawer. Despite trying to update the width ...

javascriptcssreactjsmaterial-ui

Having trouble with the Cordova button not functioning on Android 9? A beginner seeks assistance

I attempted to create a button with the id of "clickme" that links to index.html and js/buttonexample.js. Although I could see the button on both the browser and android emulator, it wasn't functioning as expected when clicked. js/buttonexample.js d ...

javascripthtmlcordovabutton

Utilizing jquery and ajax to showcase a series of images prior to uploading them

I have been attempting to create a feature that allows for the preview of multiple images before uploading them to my website. Unfortunately, it's not working as expected and I am unable to identify any errors in the console. Below is the JavaScript c ...

javascriptjqueryhtml

A dynamic 3-column layout featuring a fluid design, with the middle div expanding based on the

Sorry for the vague title, I'm struggling to explain my issue clearly, so let me elaborate. I am using flexbox to create a 3-column layout and want the middle column to expand when either or both of the side panels are collapsed. Here is a screenshot ...

javascriptcssflexboxcss-transforms

Effort to update Div element with Ajax fails to function

Looking for some assistance here. I'm attempting to update a database's entries using Ajax after submitting a form. The entries are displayed within a div. I've tried the following code to refresh only that specific div, but it doesn't ...

javascriptphpjqueryhtmlajax

Is there a way to align my anchor tag so that my link appears perfectly centered both vertically and horizontally on the page?

Despite my efforts to find a solution, I am stuck with this issue. Here is the code I have been working on: <a href='/Customers' class='centre'>Start</a> I attempted to wrap it in a div tag and also wanted to add a small gr ...

htmlcssreactjs

Exploring methods to modify the style attribute of a div tag in .NET

Using .NET, we need to access the CSS style of a div and input certain values in the code behind on page load. Since the div is located on the master page and this is another separate page, we are unable to add RUNAT="SERVER" to the div. ...

c#css.net

How to display an [object HTMLElement] using Angular

Imagine you have a dynamically created variable in HTML and you want to print it out with the new HTML syntax. However, you are unsure of how to do so. If you tried printing the variable directly in the HTML, it would simply display as text. This is the ...

javascripthtmlangulartypescriptcomponents

Managing Input Type Dropdown Selections Using Jquery

I am currently in the process of developing a website. On this website, there is a form that includes 3 dropdown menus as shown below. I would like to implement a feature where selecting the number 5 from the Adults menu will automatically display 5 in the ...

javascriptjqueryhtml