Creating a responsive design using HTML and CSS to ensure that all elements fit perfectly on any window size or resolution

Currently, my friend and I are collaborating on a mod for the popular game known as Minecraft. My responsibility is to create a website where we can showcase this mod and provide information about its features.

The main issue I am encountering is the inability to make objects within the webpage adjust their size in accordance with different browser resolutions. At present, the layout of the page is tailored to fit my screen resolution (1920 x 1080), which works well; however, when the window is resized smaller, horizontal scrolling becomes necessary to view various sections of the HTML page.

My goal is for the content to dynamically adjust to fit any window or screen resolution.

How can I ensure that the objects on my page change size based on the window's dimensions?

Code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">

        <meta name="msapplication-TileColor" content="#FFFFFF">
        <meta name="msapplication-TileImage" content="MOPM-ico/favicon-144.png">
        <meta name="msapplication-config" content="MOPM-ico/browserconfig.xml">

        <link rel="shortcut icon" href="MOPM-ico/favicon.ico">
        <link rel="icon" sizes="16x16 32x32 64x64" href="MOPM-ico/favicon.ico">
        <link rel="icon" type="image/png" sizes="310x310" href="MOPM-ico/favicon-310.png">
        <link rel="icon" type="image/png" sizes="196x196" href="MOPM-ico/favicon-196.png">
        <link rel="icon" type="image/png" sizes="160x160" href="MOPM-ico/favicon-160.png">
        <link rel="icon" type="image/png" sizes="96x96" href="MOPM-ico/favicon-96.png">
        <link rel="icon" type="image/png" sizes="64x64" href="MOPM-ico/favicon-64.png">
        <link rel="icon" type="image/png" sizes="32x32" href="MOPM-ico/favicon-32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="MOPM-ico/favicon-16.png">
        <link rel="apple-touch-icon" sizes="152x152" href="MOPM-ico/favicon-152.png">
        <link rel="apple-touch-icon" sizes="144x144" href="MOPM-ico/favicon-144.png">
        <link rel="apple-touch-icon" sizes="120x120" href="MOPM-ico/favicon-120.png">
        <link rel="apple-touch-icon" sizes="114x114" href="MOPM-ico/favicon-114.png">
        <link rel="apple-touch-icon" sizes="76x76" href="MOPM-ico/favicon-76.png">
        <link rel="apple-touch-icon" sizes="72x72" href="MOPM-ico/favicon-72.png">
        <link rel="apple-touch-icon" href="MOPM-ico/favicon-57.png">

        <link type="text/css" rel="stylesheet" href="styles.css" />

        <title>
            MOPM~
        </title>

    </head>

    <body>
        <header>
            <!--header-->
            <div class="topHead">
                <img id="headertxt" src="pictures/header.png" width="1919px" height="120px"/>
            </div>

            <!--header buttons-->
                <div class="headButtonSeperator">
                <div class="headButton">home</div>
                <div class="headButton">about</div>
                <div class="headButton">mod info</div>
                <div class="headButton">downloads</div>
                <div class="headButton">videos</div>
                <div class="headButton">links</div>
                <div class="headButton">dev team</div>
            </div>
        </header>

        <!--content-->
        <div id="home">

        </div>
    </body>
</html>

CSS:

body
{
    background-image: url('pictures/background.png');
}

/*--Classes--*/
.topHead
{
    width: 1919px;
    height: 120px;
    background-color: #272B30;
    float: middle;
    position: absolute;
    margin: auto;
    top: 0px;
    left: 0px;
    right: 0px;
    display: block;
    border-bottom: 4px dashed #1EC20B;
}

.headButtonSeperator
{
    width: 980px;
    height: 40px;
    background-color: none;
    position: absolute;
    top: 125px;
    left: 509px;
}

.headButton
{
    width: 120px;
    height: 10px;
    background-color: #313A3D;
    margin-left: 5px;
    display: inline-block;
    float: left;
    font-size: 0px;

    border-left: 3px solid #282E30;
    border-bottom: 3px solid #282E30;

    border-bottom-left-radius: 20px;
}


.headButton:hover
{
    width: 140px;
    height: 35px;
    background-color: #313A3D;
    margin-left: 10px;
    position: relative;
    display: inline-block;

    color: #DB481B;
    font-size: 20px;
    text-align: center;
    line-height: 35px;
    font-family: minecraft;
    text-shadow: 2px 2px #7A5E55;

    border-left: 3px solid #282E30;
    border-bottom: 3px solid #282E30;
    border-bottom-left-radius: 20px;
}

/*--ID's--*/
#home
{
    display: block;
    width: 918px;
    height: 1000px;
    background-color: white;
    position: absolute;
    top: 500px;
    left: 500px;
    float: middle;
    z-index: -1;
}

/*--Fonts--*/
@font-face
{
        font-family: minecraft;
        src: url(fonts/minecraft.ttf);
}

@font-face
{
        font-family: McBold;
        src: url(fonts/ARCADEPI.ttf);
}

@font-face
{
        font-family: McBlock;
        src: url(fonts/Square.ttf);
}


@font-face
{
        font-family: MccBlock;
        src: url(fonts/Squareo.ttf);
}

Edit: I haven't received any responses yet, but I am eager to resolve this issue so I can proceed with other elements of the webpage.

Should I consider using percentages? What adjustments do I need to make to ensure proper positioning based on varying resolutions and window sizes?

Edit: After some experimentation, I've realized that creating a responsive design involves avoiding the use of fixed pixel values (px). Can you guide me on making the page responsive and suggest appropriate units of measurement?

Edit: I experimented with percentages, but it did not yield the desired results. In the image linked below, I tested setting the width of the header banner to 100%. Upon resizing the window, the top text (an image) did not resize accordingly.

http://prntscr.com/47v2ub <---image

Edit: Following up on the previous edit: I realized that I needed to set >.topHead width to 100

Now, the issue I'm facing is that if the browser window shrinks too much, all my buttons end up clustered together.

htmlcssscreen

Answer №1

Creating a responsive webpage involves two key considerations:

  1. Avoid using fixed measurements for width and other dimensions on your webpage (such as px).

  2. If you must, utilize Media Queries to adjust the styling of your webpage based on changes in screen size.

Learn More

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

Stop the automatic hiding of the sticky header when reaching the bottom of the page

I have implemented the position: sticky property for my website's header. However, I am facing an issue where the header becomes hidden when I scroll halfway down the page (bottom on mobile devices). Can anyone suggest a solution to fix this problem? ...

htmljquerycss

The website's scrolling speed is painfully slow

Currently, I am working on enhancing the performance of this site at . If you scroll through the site or navigate using the Up and Down Arrow Keys, you may notice a sluggish and slow Scroll Behaviour. I am utilizing HTML5 and simple img tags with 85% wid ...

performancehtmlcss

Using the power of AJAX, retrieve data from a PHP script and showcase the response within

Within my HTML file, I have implemented a feature that allows users to input a value. To validate this input, I created a PHP script that checks if the entered value exists in the database. The script returns the following JSON response: {"active":true} ...

javascriptphpjqueryhtmlajax

on clicking GTM, obtain a different child element

My HTML code is structured as follows: <div onclick="location.href='https://ford-parts-accessories.myshopify.com/products/ash-cup-coin-holder-with-lighter-element?refSrc=6748959244479&amp;nosto=productpage-nosto-1-fallback-nosto-1';&q ...

javascripthtmlcssgoogle-tag-manager

Alter the URL path with the help of jQuery

I developed a website with content in two different languages, each stored in separate folders named en and bn. My goal is to toggle between these folders when clicking on an href element using jQuery. <a class="eng_link " style="" href="#"> English ...

jqueryhtml

There appears to be an issue with reading the property 'toLowerCase' of an undefined element, and I'm having trouble identifying the error

The variables I have initialized (globally): var audio; var LANGUAGE; var audioArray; var MEDIAARRAY; var WORDS; var SOUNDARRAY; This specific line is causing the error: var audioId = MEDIAARRAY.audio.lowercase.indexOf(exObject['exerciseGetWordInpu ...

javascriptjqueryhtmlajax

Getting the Title value from Selenium in Python: A guide

Can someone provide guidance on how to retrieve the title value from this element using Selenium? I have tried the following code but it is returning an empty string. items = driver.find_elements_by_tag_name("li") for item in items: followe ...

pythonhtmlpython-3.xselenium

Tips for formatting angular text sections

Within the scope of a controller, I have a status variable. After a successful rest PUT request, I add a message to this JavaScript variable. This message is displayed in my template using the {{status}} Is there a way to customize the styling of this mes ...

javascripthtmlcssangularjs

Inconsistency in css asset URLs across various pages discovered while working with Rails

When using assets stylesheet to load a CSS file, I noticed that it only loads on the index page. Upon inspecting with F12, the console shows the URL for other pages as well, which appends "/cloths" to the asset path. I am currently utilizing the default la ...

htmlcssruby-on-rails-4sass

What is the significance of vendor prefixes in the world of CSS3?

While I can see the rationale behind using prefixes for experimental non-official features to avoid conflicts, what is the reason for using them on shadows and similar elements? Shouldn't all vendors be implementing effects consistently according to ...

htmlcssvendor-prefix

The Bootstrap grid seems to be unresponsive on mobile devices, however, it does resize correctly when I input a specific width manually

While working on an HTML page, I encountered an issue when loading it on my phone as the scaling was not proper. Interestingly, when using the F12 tool in my browser, everything seemed fine. Upon further investigation with the F12 debug tool, I made a cur ...

htmlspringthymeleafbootstrap-5

Connect PHP code to an HTML document

Recently, I created an entry form login page saved as a .php file which displays content in html and css. The page showcases various elements followed by a login form with two fields: Username, Password, and a 'Log in' button. Additionally, I ha ...

phphtmlcssxampp

Enhancing the background of a website with the power of CSS

I am looking to create a customized table without the balls/pots in it. The number of rows on the y-axis will vary depending on the number of names I have, and can be more or less. The values on the x-axis are determined by a parameter included in the URL ...

javascriptjqueryhtmlcss

The leaking of angular-material CSS onto other divs is causing unexpected styling

I am having trouble incorporating Angular Material's md-autocomplete into my angular application. I have already customized the CSS being used in my application, but when I add the Angular Material CSS, it messes up the entire page. Even when I tried ...

htmlcssangularjs

Place the HTML images in the center of the page

I would like the two images to be centered on the page. Please refer to this visual representation for guidance: Here is the code snippet: * { box-sizing: border-box; } .column { float: left; width: 28%; height: 28%; padding: 5px; } /* Cle ...

htmlcss

Adjust the fixed navbar position in MaterializeCSS as you scroll

First of all, I apologize for my limited proficiency in English. I have a website with a company logo at the top and a navigation bar below it. My goal is to change the position of the navigation bar to the top when scrolling past the company logo. I att ...

javascripthtmlmaterial-designmaterialize

Save your canvas image as a file and attempt to force a download, only to be met with a failure to

Is there a way to save a canvas as an image file and allow users to choose the format (png or jpg) for download without saving the file on the server? Here's what I have tried: JavaScript Code: $.ajax( { type : "POST", url : "../php/downloa ...

phpajaxhtmlcanvasforce-download

What is the significance of using flexGrow in the parent div of a Material UI grid?

I am currently working on understanding a code example located at https://codesandbox.io/s/9rvlm which originates from the Material UI documentation (https://material-ui.com/components/grid/): import React from 'react'; import PropTypes from &ap ...

cssreactjsflexboxmaterial-ui

Override the default HTML style overflow to hidden with Material UI Swipable Drawer

Currently, I'm utilizing the Material UI SwipableDrawer component which has an unexpected drawback of causing the scrollbar to disappear when the drawer is displayed. This issue overrides my specified style of "overflow-y: scroll" on the Html tag and ...

javascripthtmlcssreactjsmaterial-ui

Request to api.upcitemdb.com endpoint encountering CORS issue

This code may seem simple, but for some reason, it's not working as expected. What I'm trying to achieve is to call the GET API at: I want to make this API call using either JavaScript or jQuery. I've attempted various approaches, but none ...

javascriptjqueryhtmlajaxxmlhttprequest