The website's responsiveness is not adjusting correctly to different screen widths

When I switch to a responsive website, the background turns red at a width of "285px" even though I have set the max width to "1140px". If I use min-width, the effect doesn't show up until 256/276px. I've tried both max and min width settings, but I need to do it with external linking instead of inline. Can someone please help? I've been stuck on this issue for over 3 days.

*{
    margin:0;
    padding:0;
}
/* navbar */

#top{
    display:flex;
    position: relative;

}

...
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" media="screen and (max-width:1200px)" href="ph.css"> 


<body>
    <div id="top">
        <div class="logo">
            <img src="/photo/l.jpeg" alt="ISSUE">
        </div>
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">Menu</a></li>
            <li><a href="">Recipie</a></li>
            <li><a href="">About us</a></li>
        </ul>
    </div>
    ...

Answer №1

You have the ability to create external links without any issues. Below is the CSS code snippet that I implemented on my own webpage. It accomplishes exactly what you are looking for. To achieve this, you will need to utilize media queries.

Refer to the CSS Code below for guidance. Specifically pay attention to the media queries (@media) section related to the container class.

Scan through the comments within the code as they provide valuable insights.
This is an excerpt from my main.css file

/*________________________________________________________________________________
Wrapper
__________________________________________________________________________________*/
.wrapper{
    width: 100%;
    height: 100vh;
    border: 1px solid var(--ColGrey80);
    box-sizing: border-box;
    display: flex;
    justify-content:center;
    align-items: center;
    overflow-x: hidden; 
    overflow-y: hidden; 
}
/*________________________________________________________________________________
Container
__________________________________________________________________________________*/
/* Applies up to 600px - Mostly for Mobile Devices */
.container{
    width: 100%;
    height: 100vh;
    background: var(--ColPastelGreen);
}
/* Applies from 600px and beyond - Primarily for Laptops */
@media only screen and (min-width:600px){
    .container{
        max-width: 450px;
        height: 80vh;
        border: 1px solid var(--ColAppHighlight);
        border-radius: 10px;
        background: var(--ColWhite);
    }
}

HTML Snippet Below:
Use this code example to understand how to link your css file with your html file. Observe the tag where 'index.css' & 'main.css' are included. These references signify external css files being utilized.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Crogress</title>
    <link rel="shortcut icon" href="lib/images/c.png" type="image/x-icon">
    <link rel="stylesheet" href="lib/main.css">
    <link rel="stylesheet" href="lib/index.css">
</head>
<body>
    <div class="wrapper">
        <div class="container">
            <div id="header">
                <h1 id="title">Crogress</h1>
                <p id="signin">Sign in</p>
            </div>
            <form id="form">
                <div id="inputFields">
                    <input type="text" name="userName" id="userName" class="textbox" autocomplete="off" value="User Name">
                    <input type="text" name="password" id="password" class="textbox" autocomplete="off" value="Password">
                    <div id="error"></div>
                </div>
                <div id="footer">
                    <a id="create" href="http://">Create Account</a>
                    <button type="button" onclick="authenticate();">Sign in</button>
                </div>
            </form>
        </div>
    </div>
    <script src="lib/index.js"></script>
</body>
</html>

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

if the checkbox is selected, navigate to the displayed section

In my scenario, I have a total of 5 checkboxes and corresponding to each checkbox, there are 5 div elements. The functionality that I need is that when a checkbox is checked, the associated div should be displayed; otherwise, it should be hidden. The check ...

Create a minimalist Vue table design that enforces a maximum of 2 or 3 columns within

Is there a way to make my v-simple table with v-chips and v-badges align correctly in two or three column peer cell format? Here is the table for reference: https://i.sstatic.net/OFCyx.png Currently, I only have scoped styling applied: <style scoped> ...

What is the best way to show a border-left outside of the list marker in Internet Explorer 8?

I have a numbered list that I would like to add a left border to. <ol class="steps"> <li>item 1</li> <li>item 2</li> <li>item 3</li> <ol> .steps {border-left: 5px double #7ab800;} When viewing in Fir ...

Utilizing React to highlight buttons that share the same index value upon hover

I have some data in a JavaScript object from a JSON file, where certain entries have a spanid (number) while others do not. I've written React code to highlight buttons with a spanid on hover, but I'm looking for a way to highlight or change the ...

What is the best way to adjust the position of an image background within a container without affecting the container's own placement?

While working on a registration form, I encountered an issue with moving the background image within a container. Despite adding position: relative and using top: with a negative value to shift the image, the entire container moved instead of just the back ...

When implementing CSS, the background image in the header section of my webpage is not visible to me

I'm currently working on a basic webpage and encountering an issue with setting an image as the background for my header section. Despite using what I believe to be the correct code in the CSS section, specifying the right path and file name for the i ...

I am working on customizing my WordPress website using three.js to add a background with a wireframe effect. However, I am facing difficulties in placing a sphere at the end of each line

I have a beautiful turquoise diamond and I want to incorporate a directional camera view in the background of a WordPress section. However, I am unsure how to achieve this. The issue I'm facing is that I created a wireframe over the diamond, but when ...

Executing a snippet of Bootstrap 5 code under specific circumstances

I need to execute different code blocks based on the window width. When the width is 500px or more, I want to run a specific block of code, and when it's 499px or less, I need another block of code to run. How can I achieve this? For widths of 500px ...

Tips for creating a scrolling animation effect with images

I'm currently attempting to create an animation on an image using HTML/CSS. The issue I'm facing is that the animation triggers upon page load, but I would like it to activate when scrolling down to the image. Below is my snippet of HTML: <fi ...

JavaScript Subscribe / Unsubscribe Button

I am trying to create a simple JavaScript program that allows users to like and dislike content. However, I am new to JavaScript and finding it a bit challenging. Basically, when the user clicks on the Follow button, the "countF" variable should increase ...

Adding a class to an img tag with TinyMCE

Currently, I am utilizing the TinyMCE editor as a standalone editor in my content management system (CMS). Within the CMS, there is an automatic setting that adds a curved border to any image tags within the cms div ID. In certain cases, I require the op ...

What is the best way to adjust the z-index when hovering over an li element

In my <ul>, each <li> contains an image. I want these images to scale and become opaque upon hover. However, the issue is that when they scale, they get covered by the following image. Unsure if the z-index is correctly placed... Below is the C ...

Perform Jquery trigger on mobile by clicking, and on desktop by hovering

Despite encountering this question numerous times, I am still unable to find a solution. I have a dropdown menu and I want it to open on hover for desktop and on click for mobile devices. I attempted using the provided code, however, it only works after r ...

CSS file not loading in an ExpressJS application

I'm facing an issue with my ExpressJS web app where only the HTML files are loading but the CSS rules are not being applied. I have linked the HTML file with the CSS file and also included express.static(path.join(__dirname, 'css')) in my ap ...

What steps should be followed to incorporate a horizontal scrollbar within the table's header?

I'm currently using Vue and Vuetify to create a unique layout that looks like this: https://i.stack.imgur.com/QBs3J.png The layout consists of a card with three rows: The first row displays the number of items and includes a search bar. The second ...

iPhone-compatible iFrame with adaptable webpage dimensions

While attempting to embed our page on a client's site, everything looks great in a browser and our media queries are functioning properly. However, we encountered an issue when viewing the embedded page inside an iframe on an iDevice. It seems that th ...

Angular - when removing items from ngRepeat, the remaining elements do not transition smoothly; instead, they abruptly snap or jump into position

Currently using AngularJS v1.4.8 with ngAnimate injected into my controller. In the process of creating a dynamic list using ngRepeat, tied to an array. The addition and updating of items in the list function smoothly with animations working as intended. ...

Entire body encompassing table

I am trying to create an HTML page with a table that spans the entire body and displays scrollbars when needed for both horizontal and vertical scrolling. Here is my current styling for the table: table { box-shadow: inset 0 0 10px #000; position: ...

Using a variable with the :contains selector

function checkAndUpdateStatus(newName) { $('#myTable').children('tr').remove(":contains('" + newName + "')"); }; The function above is attempting to remove table rows in 'myTable' containing a string matching the ...

Tips for keeping div and input tags selected even after a user clicks

I am working on a quiz script and I am trying to customize it so that when a user clicks on the div or input tags, they remain selected with a different background color. Currently, I have achieved changing the background color of the div when clicked, ...