The layout of my website does not adjust properly to different screen resolutions on desktop computers

Hey there! I just finished building a website with HTML, CSS, Jquery, and PHP within 3 months.

For the design and layout, I utilized CSS. However, upon testing on small screens, I noticed that some parts of the website require horizontal scrolling to view completely, especially the language dropdown in the top right corner.

In my CSS code, I set fixed widths using pixels for elements like wrapper and header.

Someone suggested using percentages instead of pixels, but I'm not sure how to go about it since I've already completed the project.

Firstly, any recommendations on how to fix this issue?

Secondly, is there a straightforward way to convert pixel values to percentages?

(The rest of the CSS code remains unchanged)
css

Answer №1

Verify your screen resolution (Based on the CSS, it appears to be 1440x768).

Now calculate the percentage for each pixel value: ("Pixel Width Value"/1440)*100 and ("Pixel Height Value"/768)*100.

This will give you the value in %!

Some elements may not function perfectly, but it's a good starting point.

There are different units that can work depending on the screen size you can explore them here.

However, I believe using percentages is the most suitable way for you to begin.

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

What steps should be taken to correct the alignment of the text in the comment?

I'm trying to achieve a layout where the comment's text appears underneath the user image, similar to this example: https://i.sstatic.net/8unS5UTK.png However, my current output shows the comment's text next to the user image instead of bel ...

javascripthtmlcssbootstrap-4styling

Guide on incorporating CSS into a JavaScript function

Currently, I am utilizing a jQuery monthly calendar where each day is represented by a cell. When I click on a cell, I can trigger an alert message. However, I also want to modify the background color of the specific cell that was clicked. Unfortunately, ...

javascriptjquerycss

Avoid having two DIVS appear simultaneously in IE for half a second upon page load

I'm encountering an issue with my HTML and jQuery code. Here is what I have: <div id="block1"> some text </div> <div id="block2"> some more text </div> Along with the following piece of jQuery code: jQuery(document).ready(fu ...

jqueryhtmlcss

Expanding div that adjusts to content size and expands to fit entire page

Appreciate your help. I'm currently facing an issue with the "content" and "footer" sections within the "wrapper" element. Below are the styles for these elements: #content { width: 100%; min-height: 100%; position: relative; background- ...

css

After the ReactJS onload event, CSS animations malfunction

When I click on a Card component within the MoviesList component, it redirects me to the SingleMoviePage component. The genres, starring, release date, production, and stars sections all have animations that slide from left to right. Initially, these anima ...

javascriptcssreactjsreduxsass

Use column formatting for the table's body section

I have written the code below in HTML to create a table. I am looking to apply a specific style to the table body elements in a column that has been assigned a CSS class, while excluding the header columns from this style application. As an example, I hav ...

javascriptjqueryhtmlcss

Issues with the Tumblr platform's back-to-top button functionality

I am quite comfortable with HTML and CSS, but I'm struggling to make the 'back to top' button work on my Tumblr page. Can someone please give me a hand? I've included some JQuery code to make the text fade in and out when scrolling (inf ...

javascriptjqueryhtmlcss

Troubleshooting issues with CSS fixed and absolute positioning in Chrome

Something strange is happening on my website with the static header bar. It works perfectly everywhere except for one page and only in Chrome. The div with class "top-bar" is set to position: fixed. <header> <div class="top-bar"> & ...

htmlcsscss-position

Naming conventions for initial layout DIVs: Best approaches

As a beginner in the realm of website design, I find myself at the early stages of constructing an HTML/CSS site based on a sketch I've created. In planning out the DIVs for the homepage, I am faced with questions about how to label them and determine ...

htmlcss

Could you please review my PHP code? I encountered a syntax error: unexpected '}' character. Thank you

I encountered an issue in the final line <?php } ?> as it reports a syntax error, unexpected '}' <?php if (isset($_SESSION['u_id'])) { //echo "You are logged in!"; include_once 'database.php&apo ...

phphtmlcss

Instructions for adding a secondary navigation bar to a Bootstrap navbar

I currently have a bootstrap navbar displayed on my website. <nav class="navbar navbar-inverse" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">Mi Thai Restaurant</a> </div> < ...

htmlcsstwitter-bootstrap-3

What is the best way to navigate around and close this modal?

Hey everyone, I've been experimenting with the JavaScript on this codepen and I'm trying to make it so that when you click the background, the modal closes. However, I've run into two issues: The .modal is contained within .modal-backgroun ...

javascriptjquerycssmodal-dialog

Achieving Div Alignment in a Fluid Bootstrap Grid

I am currently utilizing the bootstrap grid system, as depicted below, and I am attempting to center some div elements (pic). Despite my attempts with various CSS properties like {margin:0 auto; width:50%}, I am unable to achieve the desired result. I fi ...

htmlcsstwitter-bootstrapcentering

It appears that there are no spaces in the H1 HTML tags

As a beginner in HTML, I decided to incorporate some basic animations into my project. Following a tutorial, I was successful in creating simple animations. However, I encountered an issue where the text within my h1 class lacked spacing despite me adding ...

javascripthtmlcss

Issue with bundled Bootstrap files causing Navbar collapse to not function properly

I have implemented a navbar in my asp.net application views, using the following code snippet that I copied from the Bootstrap example page: <nav class="navbar navbar-expand-md navbar-dark bg-dark"> <a class="navbar- ...

javascriptcssasp.net-mvctwitter-bootstraprazor

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

Is there a way for me to keep the right-to-left text flowing into the section below it

I have come across a particularly lengthy Right-to-left arabic paragraph: https://fiddle.jshell.net/09b6xoaa/4/ My expectation is that when the line becomes too long, it should continue on the left side below ("end of the line this should be on the secon ...

htmlcssarabicright-to-left

The viewport width in NextJS does not extend across the entire screen on mobile devices

I'm currently tackling a challenge with my NextJS Website project. It's the first time this issue has arisen for me. Typically, I set the body width to 100% or 100vw and everything works smoothly. However, upon switching to a mobile device, I not ...

javascripthtmlcsstypescriptnext.js

How can I adjust the font size using CSS to best fit the screen?

Planning to enhance the design of the front page for the OpenBSD ports website, which features a variety of 71 port categories. Idea is to utilize multiple columns (possibly ul {-moz-columns: 9em;} with a maximum limit of 8 columns at 89em wide and above, ...

htmlcssresponsive-designfont-size

Display either the Web or Mobile modal upon page load based on the screen size

For my design project, I have crafted two unique modals that will pop up when their corresponding button is clicked. However, I have set it up so that each button is only visible on certain screen sizes using CSS @media query. Now, I am looking to make a ...

htmlcssmodal-dialog