How can I prevent my website layout from adjusting when the window is resized?

I want my website to remain the same regardless of window resizing, ensuring that no elements on the page shift or change size. Currently, my image and buttons are moving and resizing with the window, which I don't want.

* {
  box-sizing: border-box; }

#wrapper {
    margin-left:auto;
    margin-right:auto;
    width:100%;
    height: 100%;
}

body {
  background-color: black;
  font-family: "Source Sans Pro", sans-serif;
  text-align: center;
  color: #ccc;
}

div {
  height: 100%;
}

canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0; 
}

h3 {
  position: absolute;
  font-size: 100px;
  font-weight: 100;
  color: white;
  margin-top: 70px;
  margin-left: 80px;
}

img {
    margin-top: 230px;
    margin-right: 0px;
}

.home {
    position: absolute;
    border: 2px solid #CCCCCC;
    text-align: center;
    color: #ccc;
    font-size: 26px;
    line-height: 60px;
    width: 10%;
    height: 60px;
    margin-top: 180px;
    margin-left: 500px;
}

.about {
    position: absolute;
    border: 2px solid #CCCCCC;
    text-align: center;
    color: #ccc;
    font-size: 26px;
    line-height: 60px;
    width: 10%;
    height: 60px;
    margin-top: 180px;
    margin-left: 750px;
}

.projects {
    position: absolute;
    border: 2px solid #CCCCCC;
    text-align: center;
    color: #ccc;
    line-height: 60px;
    width: 10%;
    height: 60px;
    font-size: 26px;
    margin-top: 180px;
    margin-left: 1000px;
}

.contact {
    position: absolute;
    border: 2px solid #CCCCCC;
    text-align: center;
    color: #ccc;
    line-height: 60px;
    font-size: 26px;
    width: 10%;
    height: 60px;
    margin-top: 180px;
    margin-left: 1250px;
}

.home:hover{
    border-color: #0091FF;
    color: #0091FF;
}

.about:hover{
    border-color: #0091FF;
    color: #0091FF;
}

.projects:hover{
    border-color: #0091FF;
    color: #0091FF;
}

.contact:hover{
    border-color: #0091FF;
    color: #0091FF;
}
<!DOCTYPE html>

<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Play" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <script type="text/javascript" src="background.js"></script>
    <title>Home</title>
</head>  
<body>
    <div id="wrapper">
    <canvas class='connecting-dots'></canvas>
    
    <h3>Title</h3>
    
    <a href="#"><div class = "home">Home</div></a>
    <a href="#"><div class = "about">About</div></a>
    <a href="#"><div class = "projects">Projects</div></a>
    <a href="#"><div class = "contact">Contact</div></a>
    
    <img src="astronaut.png">
    </div>
</body>
</html>

htmlcssbuttonresizeresponsive

Answer №1

Ensure to specify both a min-width and min-height for your elements to prevent them from becoming smaller, followed by setting max-width and max-height to control their growth. Additionally, switch the width value from a percentage (e.g., width:10%) to an absolute number. This will make it clear that it refers to a specific size regardless of the screen's dimensions.

Check out this link for more information.

* {
  box-sizing: border-box; }

#wrapper {
    margin-left:auto;
    margin-right:auto;
    width:100%;
    height: 100%;
}

body {
  background-color: black;
  font-family: "Source Sans Pro", sans-serif;
  text-align: center;
  color: #ccc;
}

div {
  height: 100%;
}

canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0; 
}

h3 {
  position: absolute;
  font-size: 100px;
  font-weight: 100;
  color: white;
  margin-top: 70px;
  margin-left: 80px;
}

img {
    margin-top: 230px;
    margin-right: 0px;
}

.home {
    position: absolute;
    border: 2px solid #CCCCCC;
    text-align: center;
    color: #ccc;
    font-size: 26px;
    line-height: 60px;
    width: 150px;
    height: 60px;
    margin-top: 180px;
    margin-left: 500px;
}

.about {
    position: absolute;
    border: 2px solid #CCCCCC;
    text-align: center;
    color: #ccc;
    font-size: 26px;
    line-height: 60px;
      width: 150px;
    height: 60px;
    margin-top: 180px;
    margin-left: 750px;
}

.projects {
    position: absolute;
    border: 2px solid #CCCCCC;
        min-width: ;
    text-align: center;
    color: #ccc;
    line-height: 60px;
      width: 150px;
    height: 60px;
    font-size: 26px;
    margin-top: 180px;
    margin-left: 1000px;
}

.contact {
    position: absolute;
    border: 2px solid #CCCCCC;
    text-align: center;
    color: #ccc;
    line-height: 60px;
    font-size: 26px;
       width: 150px;
    height: 60px;
    margin-top: 180px;
    margin-left: 1250px;
}

.home:hover{
    border-color: #0091FF;
    color: #0091FF;
}

.about:hover{
    border-color: #0091FF;
    color: #0091FF;
}

.projects:hover{
    border-color: #0091FF;
    color: #0091FF;
}

.contact:hover{
    border-color: #0091FF;
    color: #0091FF;
}

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

Hide the background when the modal appears

I have successfully implemented a jQuery CustomBox modal on my website. However, I am facing an issue with hiding the content div behind the modal once it pops up. My goal is to make the content div reappear after the modal has been closed. You can view a ...

javascriptjqueryhtmlcssmodal-dialog

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

Regular expression for selecting characters and numbers in jQuery using a selector

Can someone help me figure out how to select all IDs like this: r1 r2 r3 etc. and not the other IDs like helloWorld I attempted using the CSS selector with jQuery but I'm having trouble understanding how. I tried $('#r[0-9]') but it didn& ...

jquerycssregexselector

Transforming a React Native application into a HTML5/Progressive Web App (P

Is there a way to convert a React Native app into a website format without the need to create a whole new frontend using HTML5 or PWA? Has anyone attempted this before or knows the process to do it? ...

htmlreact-nativefrontendprogressive-web-appsmigrating

When hovering over elements, my li tags undergo a transformation

I am working on a simple menu code, which is just a list of items. ul li { position: relative; top: 55px; height: 30px; background: #212; display: inline-block; width: 29%; margin: 1%; margin-bottom: 0; padding: 5px; -webkit-border-t ...

htmlcsshoverhtml-lists

Image uploading in Angular is not compatible with Internet Explorer, however, it functions correctly in Google Chrome

As of now, my implementation has been successful in all browsers except for Internet Explorer 11. Despite being able to successfully upload .jpeg, .jpg, and .png images in Google Chrome, I am facing issues when trying to upload them in IE 11. The code wo ...

javascripthtmlarraysangularimage

Achieve a full page layout with content and attach the footer to the bottom using flexbox in Tailwindcss and Nextjs

How can I use flex-grow to make the body section fill the screen and keep the nav fixed at the bottom? I'm having trouble figuring out which elements to apply these properties to. Can anyone provide guidance on which element should have these styles? ...

javascriptcssreactjsnext.jstailwind-css

Uncovering website content with Selenium: unlocking the mysterious origins of the text

Currently, I am utilizing Selenium and Python to scrape a website. My goal is to extract specific text from a particular page. Despite successfully navigating to the desired page, every attempt at using methods such as driver.find_elements_by_id(), driver. ...

pythonhtmlseleniumweb-scraping

Ensure that text within openhtmltopdf is aligned to the right and any unnecessary white space at the

Currently, I am using the open source project openhtmltopdf but I have encountered a certain issue. Within a div-element, I have a p-tag with text-align: right styling. The text is aligned correctly to the right until there is a line break due to the widt ...

htmlcssopenhtmltopdf

Retrieve the personalized data-* attributes from a specific item within an array

I'm struggling to find the correct syntax for accessing custom data-* attributes for list elements within an unordered list that has been sorted and converted into an array using the following code: $("#gridlist").sortable("toArray"); The list eleme ...

javascriptphpjqueryhtmljquery-ui

Guide to positioning an icon at the center of a material card

I am new to CSS and Angular Material, and I need help centering the icon on the card following the design from Figma. I tried copying the CSS from Figma, but it didn't center the icon as expected. Can someone please share techniques to achieve this? S ...

cssangularangular-material

Transmitting the contents of $body in Mysql as table information, not as

Looking for a way to send MySQL database data via email using PHP Mailer. I have managed to send it as an attachment, but struggling to send it as a formatted body. When I try to use file_get_contents on 'displaywebpage.php', it only reads the HT ...

phphtmlphpmailer

Searching for a table row that corresponds to the content of a cell using Python and Selenium

If you need to retrieve the row element from an HTML table where the text in a specific cell matches the string 'Mathematik & Informatik'. Here is the structure of the HTML: <table class="views-table cols-4"> <thead> ...

pythonhtmlseleniumxpath

Screen remains blank as the React webpage fails to load

Hello, I am having issues with my React page not showing up. Can someone please review my code to see if there are any errors? Here is the edited program: index.html <!doctype html> <html lang="en"> <head> <meta charset ...

htmlreactjstypescriptreact-typescript

The flying saucer fails to display images when viewing PDFs

Having some trouble converting HTML to PDF as the images in the HTML are not showing up in the PDF file. pom.xml <dependency> <groupId>org.xhtmlrenderer</groupId> <artifactId>flying-saucer-core</artifactId> <v ...

javahtmlhtml-to-pdfflying-saucer

Why isn't my easypie number displaying on the inside?

I am currently utilizing the easypie plugin, but I am facing an issue where the number is not displaying inside the pie chart. Despite trying multiple solutions, I haven't been able to resolve this. How can I successfully display the number inside the ...

jqueryhtmlcsseasypie

Combining the container and container-fluid classes with Bootstrap for versatile layout design

My goal is to have my website display with a fixed width on xs, sm, and md screens, but be fluid on lg screens. After researching the Bootstrap grid system, I discovered that I can use the .container class for fixed width layouts or the .container-fluid ...

csstwitter-bootstraptwitter-bootstrap-3

Background image on webpage failed to load

I've encountered an issue with a background image I downloaded for my website - it simply will not display. Here is the CSS code I am using: background-image: url(Resources/Icons/background-image.jpg); background-attachment: fixed; Even after tryin ...

asp.nethtmlcss

Step horizontally to scroll varying amounts

On my webpage, I have implemented two buttons to scroll left and right. When these buttons are clicked, the page should move left or right by the width of each individual div (since they all have different widths). I am unsure if this functionality can b ...

jqueryhtmlscroll

Customizing the HTMLElement class to modify particular attributes

Is there a way to modify the behavior of an HTMLElement's scrollTop property by adding some extra logic before updating the actual value? The common approach seems to be deleting the original property and using Object.defineProperty(): delete element. ...

htmltypescriptinheritancepropertiesadapter