My website gets all wonky when I try to resize the browser

Here is a visualization of my website's ideal appearance:

However, the actual display varies on different computers. After testing with browsershots.org, I noticed that my website looks messy on most browsers and even when resizing the browser window.

This issue may be due to the lack of horizontal scrolling on browser resize. I would appreciate any suggestions on how to resolve this problem.

You can visit my website at . If the page does not load, please try refreshing the window. Keep in mind that I am using a free web host during the development phase, so reliability may be an issue.

htmlcssweb

Answer №1

The main issue seems to be centered around using margins and paddings to align content on the screen, which can complicate things.

Instead of this approach, consider creating a wrapping div and applying margin: 0 auto; to it for centering.

I went ahead and made this adjustment to your page, feel free to take a look:

I simply added two divs with the class "wrapper" along with some CSS resets. You can review the code for more details.

Next, determine the type of layout you wish to create:

  • Fixed: Similar to stackoverflow.com, where the page remains unchanged when the window is resized.
  • Fluid: Resembles wikipedia.org, expanding to fill all available space and adapting to browser size.
  • Responsive: Like css-tricks.com, adjusting the layout based on browser size.

For a visual explanation, check out this video:

Your subsequent steps will depend on the choice you make regarding the layout type.

Answer №2

Your webpage layout is causing issues due to fixed pixel widths and heights, which do not adjust when the window is resized. This leads to content overlapping or jumping around on the page.

The best solution is to use percentage values for sizing elements in your layout.

Below is a demo code snippet:

<body id="library">
        <div id="body">
            <div id="sidebar"></div>
            <div id="content">
                <div id="navbar"></div>
                <div id="contentwindow"></div>
            </div>
        </div>
</body>

CSS Styles:

html {
  height: 100%;
  width: 100%;
}
#library {
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  overflow: hidden;
}
... (Additional CSS styles provided)

Implementing this approach and resizing the window will demonstrate a responsive design.

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

Floating boxes with a stationary top alignment

My HTML "toolbar" has multiple widgets displayed in a horizontal layout. Each widget is represented by a div element in the source code: <div id="widget1" /> <div id="widget2" /> <div id="widget3" /> To position these divs, I use float: ...

csscss-float

What is the best way to make floating images fill the entire space?

I'm looking to create a grid layout with fixed-sized images, but I'm having trouble getting them to fill up the space properly. Here's what I want: Unfortunately, this is what I'm currently getting: Any suggestions on how I can make t ...

htmlcss

Creating dynamic web pages using Smarty templating engine to render HTML

I'm attempting to display my unprocessed HTML content using Smarty. {if !empty($brand.description)} {$brand.description} {/if} Although the initial text includes spaces and line breaks, when viewed, the HTML appears as plain text. I also experimen ...

phphtmlprestashopsmarty

Exemplary CSS Text Alignment When Vertical Align is Exceptional

I'm currently working on a menu where some text needs to be aligned vertically with the property vertical-align:super. However, I am facing an issue where this particular item with "super" text is not aligning properly with the other items. Below is ...

cssmenuvertical-alignmentsuper

Understanding the Importance of CSS Specificity in Resolving Selector Conflicts

I need help with a specific pseudo-class selector issue. Even with !important, the text in the li:first-child element is not appearing in blue. The selector specificity for p is: (0, 0, 1) The selector specificity for li:first-child is: (0, 1, 1) I want ...

htmlcsscss-selectorscss-specificity

JavaScript and the importance of using commas in arrays

I am developing a system that displays text in a textarea when a checkbox is checked and removes the text when the checkbox is unchecked. The functionality is mostly working as intended, but I am facing an issue where commas remain in the textarea after un ...

javascripthtml

Issue with compiling Tailwindcss in nextjs JIT mode

Our current project involves using tailwindcss and things were going smoothly until the clients requested a "pixel perfect" design. This meant that every element needed to be set in pixels instead of rem units. Instead of adding countless classes like h-1p ...

cssreactjscompilationnext.jstailwind-css

Adjusting the background color of an individual element within a grid using CSS

<div id="56c46f8385953" class="mg_box mg_pre_show col1_3 row1_3 m_col1_2 m_row1_3 mgi_14 mg_pag_1 mg_gallery mg_transitions mg_closed " rel="pid_14" mgi_w="0.333" mgi_h="0.333" mgi_mw="0.5" mgi_mh="0.333" > <div class="mg_shadow_div"> ...

htmlcsswordpress

Discover the best way to reference a JavaScript variable within an HTML form textfield

I'm having trouble with a script that is supposed to display the selected value from a drop down list in a text field on an HTML form. When I select an option, the value is not appearing in the text field. Can someone please assist me with this issue? ...

javascripthtml

Enhancing the design of a button with whitespace using CSS

Recently, I had a well-designed landing page created using LeadPages. However, due to financial constraints, I am unable to continue paying for their services at the moment. The current landing page has proven to be effective in converting leads. https:// ...

cssbutton

Equalizing the space between table headings and content

I am struggling with aligning the heading and entries in my table properly. https://i.stack.imgur.com/IYtY1.jpg My goal is to ensure that the heading and entries are perfectly aligned with each other. This is how my Table.jsx looks like: <div classNa ...

cssreactjs

Formulate a jQuery array consisting of droppable components

I have successfully implemented draggable li-elements and droppable boxes using jQuery UI. Here is my structure: A list of 3 different permission types <ul> <li data-action="create">Create</li> <li data-action="edit">Edi ...

jqueryhtmlarraysjquery-uidroppable

Obtaining the node generated from a document fragment

Suppose I add a document fragment to the DOM in the following way: const ul = document.querySelector("ul"); const fruits = ["Apple", "Orange", "Banana", "Melon"]; const fragment = new DocumentFragment(); ...

javascripthtml

Tips for maintaining the parent's width during a resize operation

I have a query: I am facing an issue with an image inside a div. The image is larger than the div, so I set its height to 100% to make it appear correctly. When I resize the image, it adjusts well and looks fine. However, when I resize the browser to make ...

htmlcssimageresize

Adjust the stroke and fill colors of an SVG element when hovering over it

I am facing a challenge with an SVG image that I have: https://i.stack.imgur.com/r4XaX.png When hovered over or clicked, it should change to https://i.stack.imgur.com/EHRG2.png Current Icon <svg width="24" height="24" viewBox="0 0 24 24" fill="non ...

javascriptcssreactjssvgfigma

Troubleshooting Bootstrap Social Buttons: Background Color and Hovering Challenges

I've been working with Bootstrap to design social buttons for Facebook and LinkedIn. However, I'm facing an issue where setting the background color to white for the buttons doesn't cover them properly. The white background extends beyond th ...

htmlcssbootstrap-4

Is it possible to break a single word when word wrapping?

Is it possible to apply word-wrap: break-word to just one word within an element without affecting the entire element? I find that when I apply it to the entire element, it looks messy. I tried searching for a solution but couldn't find anything. Has ...

htmlcss

JQuery Submission with Multiple Forms

Hey everyone! I have a jQuery form with multiple fieldsets that switch between each other using jQuery. Eventually, it leads to a submit button. Can someone assist me by editing my jfiddle or providing code on how I can submit this data using JavaScript, j ...

javascriptjqueryhtmlajax

Implementing a confirmation dialog for POST requests in Flask

My first experience with Flask involves adding a confirmation dialog to a form, but only under specific conditions. Unfortunately, I'm unable to achieve this on the client side. While I was successful in implementing it for GET requests, POST requests ...

javascriptpythonhtmlflask

The functionality of Vue is acting up with the HTML, unexpectedly refreshing when a button is clicked

I am currently experiencing an issue with my Vue application. When I click the button, it clears the input field (which it shouldn't) and doesn't perform any other actions. The variables "codigo" and "payload" do not display anything on the scree ...

javascripthtmlvue.js