Whenever I adjust the size of my browser window, my webpage becomes jumbled and

I'm struggling to keep my website layout consistent across different screen sizes. The design looks messy on mobile compared to desktop. Below is the code I'm using.

<html>
          <head>
          <style>
           #logo img {
            width: 120px;
            margin-top: 20px;
            margin-left:350px;
            }
            #footer img {
            width: 450px;
            margin-top: 20px;
            margin-left:250px;
            }
            #girl img {
            width: 450px;
            margin-top: 20px;
            margin-left:200px;
            }
            #follow_us img {
            width: 250px;
            margin-top: 20px;
            margin-left:300px;
            }
            img.NICE {
                position: absolute;
                left: 200px;
                top: 0px;
                z-index: -1;
            }
            body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, p, pre, code, blockquote {
            margin:0;
            padding:0;
            border-width:0;
          }
          body {
            -epub-hyphens:auto;
          }
          div.Basic-Text-Frame {
            border-style:solid;
          }
          p.Basic-Paragraph {
            color:#000000;
            font-family:"Minion Pro", serif;
            font-size:12px;
            font-style:normal;
            font-variant:normal;
            font-weight:normal;
            line-height:1.2;
            margin-bottom:0;
            margin-left:0;
            margin-right:0;
            margin-top:0;
            orphans:1;
            page-break-after:auto;
            page-break-before:auto;
            text-align:left;
            text-decoration:none;
            text-indent:0;
            text-transform:none;
            widows:1;
          }
          p.ParaOverride-1 {
            text-align:justify;
            text-align-last:center;
          }
          span.CharOverride-1 {
            color:#525358;
            font-family:Raleway, sans-serif;
            font-size:16px;
            font-style:normal;
            font-weight:200;
          }
          ...

Expected output: https://i.sstatic.net/fDSsJ.png

htmlcss

Answer №1

Finding a solution to your query may not be straightforward. Embracing responsive design could be the answer you seek. A few handy tips for handling various screen sizes include utilizing percentages instead of pixels, and incorporating max-width along with max-height. Researching responsive design online will unveil a plethora of resources aimed at resolving your issue.

Answer №2

Ah, yes indeed. Consider this scenario:

#header img {
   width: 200px;
   margin-top: 30px;
   margin-left:250px;
}

It might appear perfectly fine on your current screen size, but once you switch to a different resolution, those measurements could be completely off. You're faced with two choices: 1) delve into media queries to adapt to various resolutions or 2) opt for a framework that tackles this issue almost seamlessly.

The first option requires substantial effort, while the second is more straightforward, albeit requiring familiarity with the framework. I personally recommend utilizing Bootstrap: http://getbootstrap.com/

As a bonus tip, consider using percentages (%) over pixels for more flexibility. While it's not foolproof, it can certainly mitigate some of the chaos potentially caused by fixed pixel values.

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

When adjusting the zoom level, the positioning of the div containers shifts and clashes

While working on my project, I encountered an issue with the alignment of two div boxes inside the container class. Whenever I zoom in or out on the page, the div boxes collide and change position. I have included my HTML and CSS below, but I am struggling ...

htmlcss

Is there a way to attach HTML buttons to the bottom of their respective cards?

I am currently in the process of creating a directory website. To build it, I chose the Jekyll Moonwalk theme as a solid foundation and am customizing it heavily to suit my requirements. Since this is my inaugural website project, I'm learning as I p ...

htmlcssjekyllweb-frontend

Implementing multiple layered audio elements in HTML

On my HTML page, I have a menu list that plays a hover sound when I mouse over each element. However, I noticed that when I quickly hover over all of them, only one or two instances of the sound are played. Is there a way to ensure that all four instance ...

htmlmouseeventhtml5-audiomouseover

Jumping Sticky Table Headers

Looking for a solution to prevent the table header from moving when scrolling through the data: tbody { overflow-y: scroll; } thead, tbody tr { display: table; width: 100%; table-layout: fixed; text-align: left; } thead, th { position: sti ...

htmlcss

What is the method for creating a hovering triangle on a particular element?

My navigation bar consists of two parts. On the left side, there is a logo image, and on the right side, there are 4 list elements. I am attempting to make a triangle appear at the bottom of the element when hovered. I have floated the list to the right an ...

htmlcsscss-selectorspseudo-element

What could be causing the new paragraphs I create with jQuery to be unresponsive when clicked on?

In my HTML code, I have some paragraphs set up as examples. When I click on them, the jQuery click function works correctly and the specified action is executed. However, I also have a button that adds new paragraphs to the body, but the new ones do not re ...

javascriptjqueryhtml

Ways to choose the correct css styling

I'm currently working on creating navigation using Bootstrap 4, but I've hit a roadblock in adjusting the li items to suit my navigation needs. I'm struggling to figure out how to select these li tags since they are nested in multiple classe ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Using jQuery for validation using a checkbox

I'm currently working on a registration system that allows users to choose between paying immediately with a credit card or later with a check. Depending on their choice, the fields for credit card information should either be validated or hidden to d ...

jqueryhtmljquery-validate

Personalized modify and remove elements on a row of the DataGrid material-ui version 5 component when hovered over

In my React Js app, I am utilizing Material UI components or MUI v5 as the UI library for my project. Within the DataGrid/DataGridPro component, I am implementing a custom edit and delete row feature. The requirement is to display edit and delete icons w ...

javascriptcssreactjsmaterial-ui

Ways to modify the font style of Python comments in JupyterLab's code cells and code editor:

Many resources discuss how to change font families for all content, but I am seeking guidance on making syntax-specific changes. For example, I would like to switch the font style of Python comments from italic to normal. Can anyone offer assistance? Thank ...

pythoncssjupyterjupyter-lab

Ways to identify when a browser has disabled JavaScript and present a notification

Is there a way to detect if JavaScript is disabled in the browser and show an error div instead of the body? ...

javascriptjqueryhtmlnoscript

Struggling with aligning buttons in a horizontal navigation bar

I have been struggling to center the buttons on my navigation bar for quite some time now, despite my efforts searching through Google (I'm still a beginner in CSS). Below is the code I have for the navbar (excluding my numerous unsuccessful attempts ...

htmlcss

Footer Section (navigation) bounces up when scrolling to the beginning of the page

I am currently developing a fully web-based app-style layout. One issue I'm facing is that the navigation menu jumps slightly when I use my S3 to auto-scroll to the top by dragging. However, if I scroll up manually without lifting my finger, this pro ...

javascripthtmlcss

design facebook type box scroll bar

After extensively searching through various stackoverflow answers in an attempt to change the CSS for a Facebook likebox scrollbar, I have had no success. Below is the code that I am currently using: <div id="fb-root"></div> <script>(fun ...

javascriptjqueryhtmlcssfacebook

Ways to eliminate gaps between div elements with CSS

I am currently working on a webpage that consists of one main div housing two inner divs (left_menu and content), along with an additional footer div outside the main container. When viewing the page, there seems to be a noticeable gap between the footer ...

htmlcss

Drop the prohibited cursor before dragging

https://i.sstatic.net/WIBWr.jpg Is there a way to change the cursor behavior during element drag using HTML5 default drag and drop with TypeScript? I have tried various methods like changing from ev.target.style.cursor to "grab" cursor, adjusting dropEffe ...

htmlangulardrag-and-dropdrag

Using Javascript to Highlight a Single Row in a Table

Greetings esteemed members of the skilled community at StackOverflow, I must humbly ask for your expertise in solving a dilemma that I am currently facing. The situation is as follows: I have a table generated from an SQL query, and it is crucial for the ...

javascripthtmlhtml-table

Ways to Customize the Text Color in the Navigation Bar

Is there a way to change the color of text in my navigation bar to #b3b3b3? It seems like I am limited to the colors provided by bootstrap. How can I work around this limitation? <nav class="navbar" style="color: #b3b3b3; background-col ...

htmlcssbootstrap-5

Removing the Bootstrap-container is a task that can be specifically targeted for larger screens

I need assistance with removing the container from my large screen while keeping it on small and medium screens. I have tried searching for a class like container-lg-none, but to no avail. Any help would be greatly appreciated. Here is the code snippet i ...

htmlcssbootstrap-5

What is the purpose of the bold line down the left side of every HTML calendar?

Welcome to a calendar layout designed with flexbox: Check it out here Do you notice the thicker lines below the heading rows and want to remove them? Here is how you can modify the HTML & CSS code: #calendars-container { text-align: center; font-f ...

htmlcssflexboxoutline