Currently I am in the process of creating a highly secure and encrypted social network, but I have hit a stumbling block. I hadn't considered how my website would display on other desktops and laptops (not mobile devices). The issue is that I set all element sizes using pixels. I want the website to maintain the same proportions on different machines.
Any suggestions?
P.s. I prefer not to use percentage values
Thank you in advance 😊
Learning about size units is a vast topic that you should definitely delve into.
https://developer.mozilla.org/en-US/docs/Web/CSS/length
You have various options to consider. Firstly, you could utilize media queries to make significant changes to your website's layout based on different resolution ranges.
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries
Alternatively, you can replace most instances of px with other size units. For example, using em to establish sizes or distances based on the current font size, and vh/vw to set sizes according to the current resolution (e.g., width: 100vw will span the entire screen width).
Creating a responsive layout typically involves employing a combination of these techniques. It is advisable to use em as the base for all distances if you want consistent proportions across any device, adjusting the font-size at the root based on a media query. However, accommodating different device sizes due to varying resolutions is not necessarily a bad practice; smaller or larger devices usually have their own ways of adapting. A few websites remain functional even though Apple produces high-resolution monitors for OS X and Safari.
If you don't have access to other laptops, many web browsers offer tools like F12 Developer Tools that allow you to simulate different devices or resolutions.
Considering implementing styled-components in my application and questioning the best organizational approach. Usually, styled-components are associated with a particular component for increased reusability. However, what is the recommended method for us ...
Is there a way to display text on a fullscreen video in HTML? I have tried using absolute positioning for the text and relative/fixed/none positioning for the video, but it does not work when the video is in fullscreen mode. I also attempted to call the ...
Is it possible to fade the background of a container without affecting the pop-up form inside? I've come across some solutions, but they all seem to treat them separately. Here's what I'm trying to achieve: <div class='wrapper ...
Currently working on a page layout using Thymeleaf and Bootstrap 5. I have divided the page into two parts, with this section behaving as desired: <main role="main" class="pb-3"> <br> <p>Post office ex ...
Even though I have specified the width of the Header table to be 100% and applied a margin-right of 1cm for PDF reports with landscape orientation, the table is not taking up the full width. However, when my PDF report has portrait orientation, the header ...
Currently attempting to position a button overlapping and extending outside of its parent div, much like the illustration provided. However, my current efforts result in the button being contained within the parent DIV. The visual reference below showcases ...
As a newcomer to Zurb Foundation 5, I am currently experimenting with building a complex header bar using columns and rows. My goal is to utilize nested rows within a main row, but I am having difficulty figuring out the correct div ordering. Is it feasib ...
I am facing a challenge in creating a group of images for an album. There seems to be a significant gap on the right side, which cannot be resolved without using padding. However, adding padding only works for my current PC resolution and creates a larger ...
In the screenshot below, there is a DIV container with padding of 15px on the left and right. However, the contents are appearing spaced out downwards for some reason... Other than the left & right padding, no other styling seems to be affecting it. Adjus ...
I have created a layout in Word that I want to achieve: https://i.stack.imgur.com/krK7w.png After researching, I found out about the CSS grid layout which seems like the best option for achieving the desired layout. However, when implementing the grid i ...
Hey there, I'm a newbie to jQuery and this is my first post. Spent some time searching but couldn't find exactly what I needed. I'm trying to have alternating row colors in a table; one class as NULL/empty and the other as alt. My jQuery sc ...
Hi there, I'm experiencing some issues with my calculator. The buttons seem to be working fine and lining up correctly, but for some reason, nothing is showing up on the monitor or getting calculated when I press the buttons. Here's the code that ...
I have a video on my webpage that I want to take up the entire screen, but currently, users have to scroll a bit to reach the bottom, which is not ideal. This is my JavaScript: <div id="page"> <div id="video-container"> ...
When a user clicks on the "view" button, only the details of the corresponding challenge should be displayed: Currently, clicking on the "view" button loads all the challenges. This is because in my view-one-challenge.component.html, I have coded it as fo ...
Is there a way to make the query run whenever a selection is made from the listbox? if(isset($_POST['select'])){ $newselection=$_POST['select']; $query = "SELECT count(*) FROM listings where description=" . $newselection. ""; $r ...
Currently, I have a piece of Javascript that fetches the HTML for a form from the server using an XMLHttpRequest and then displays the form on the page. I am looking for a solution to extract the data that would be sent via POST if the form were submitted ...
I'm trying to adjust the max-height of a column panel that opens when clicking the "Columns" button in the Toolbar component used in the DataGrid. I am working with an older version of @material-ui/data-grid: "^4.0.0-alpha.8". https://i.stack.imgur.c ...
Having some difficulties with aligning elements on my website. As someone who is not highly skilled in coding, I am struggling to define the width and float properties for certain classes. Despite my attempts, it seems that the elements are not positioning ...
I'm using a Bootstrap dropdown menu with a submenu that should drop upwards while the rest of the menu drops down. How can I achieve this? Here is the code snippet: <div class="dropdown"> <a class="inputBarA dropdown-toggle" data-toggle= ...
Can anyone assist with centering my webpage on small screen sizes? Everything looks good at the normal width of 989px, but once it shrinks, it shifts to the left and leaves excess white space on the right. I've tried various methods to correct this is ...