Why isn't my page width adjusting to various screen resolutions?

Hello everyone, I'm currently working on a website using two monitors - one with 1920x1080 resolution and the other with 1440x900 resolution. However, the website doesn't seem to fit properly on the 1440x900 screen. I've used percentage widths in my CSS, so I expected it to adjust accordingly. Can anyone help me figure out what I might be missing?

1920x1080 Screenshot https://i.sstatic.net/5NhTM.jpg

1440x900 Screenshot https://i.sstatic.net/fXAhD.jpg

I've utilized CSS grid to organize elements like the header and slideshow, while also implementing flexbox within those components.

Snippet of CSS Code:

body{
display: grid;
grid-template-rows: 60px repeat(4, 1fr);
}

.header {
width: 100%;
height: 60px;
display: flex;
background-color: #009eb3;
}

.inner_header {
width: 100%;
height: 100%;
display: flex;
position: relative;
justify-content: space-between;
margin-left: 3%;
margin-right: 3%;
}

EDIT: Here is the link to my jsfiddle (https://jsfiddle.net/tcwaypq4/4/). I wasn't aware of this site before, apologies for that. Also, I have made changes to my body display by switching it to flex.

htmlcss

Answer №1

To prevent your elements from extending beyond the page, consider making some adjustments.

.informative-menu {
    width: 100%;
}
.info-boxes {
    margin-left: 0;
    margin-right: 0;
    width: 33.3%;
}
.icon-desc-spans {
    width: 100%;
}
.icon-desc-spans {
    width: 100%;
    word-break: break-all;
}


Next, ensure that your bottom images are responsive by setting their width to 50%.

Answer №2

It appears that the issue lies in

margin-left: 3%;
margin-right: 3%;

I suspect you intended to use padding instead of margin in this case.

Answer №3

Include the following code snippet in your head section:

<meta name="viewport" content="width=device-width, initial-scale=1" />

By adding this code, you should be able to resolve the issue at hand. For more information on the viewport meta tag, check out the resources available on MDN.

Answer №4

Consider incorporating the following CSS snippet:

body{
  margin: 0;
  padding: 0;
}

I have found this to be quite effective.

Answer №5

.informative-menu {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background: green;
}

Make sure to include the justify-content: space-evenly; property in your styling.

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

Is there a way to ensure the .header and .nav remain fixed at the top of the viewport?

I'm currently working on keeping the .header and .nav elements fixed in the viewport so they don't disappear from view. What's intriguing is that I'm utilizing FlexBox, but I haven't come across a FlexBox feature that allows me to ...

htmlcss

Migrating a few PHP scripts to ColdFusion

Hey there, I'm currently in the process of converting some really basic PHP code to be compatible with a development server that only supports CF. This is completely new territory for me, so I'm looking for some guidance on how to port a few thin ...

phpcssvariablescoldfusionporting

How to Create Django Templates without Including head, body, and Doctype?

Is it considered the correct or recommended practice to omit the Doctype, head, and body tags? This is a question that arises when looking at examples like tutorial 3 in the Django documentation which can be found here, specifically in the polls/template ...

pythonhtmldjango

Ensure that the radio button is set to its default option when the user accesses the page

I have a model with a 'PartActionType' enum which includes Transfer, Harvest, and Dispose options. public enum PartActionType { Transfer, Harvest, Dispose } On my view page, I am displaying these options using ...

c#htmlcssasp.net-mvcrazor

What is the best way to stack two pull-right elements on top of each other within the Bootstrap grid system?

I have set up a bootstrap grid system on my webpage and I am trying to align two elements to the right, one below the other. Currently, this is how it appears: When I try to align the "Active" and "Primary" buttons underneath each other to the right using ...

htmlcss

What is the best method to ensure that an image remains at the bottom of a div even as the div's height adjusts?

In my current project, I am facing a challenge with positioning an image in the bottom-right corner of a dynamically changing div. Initially, this is easily achieved by using CSS selectors: #div1 { position: relative; } #div1 img { position: abso ...

jquerycsspositioning

What is causing Firefox to consistently shave off 1px from the border of table cells?

Why is Firefox removing 1px from the border's value as defined in the CSS file? .aprovGriditem th { border-collapse: collapse; border: 4px solid #BBC6E3; padding: 0; } UPDATE <table cellpadding="0" cellspacing = "1" runat="server" id= ...

htmlcssfirefoxhtml-table

Error with Flask url_for when trying to play a video

I'm currently developing a Flask website and working on analyzing and displaying a video on the webpage. However, when I tried to input the direct path to the video source, it only displayed a black screen. I searched on Google, which suggested using ...

pythonhtmlflask

Setting a maximum character limit for an HTML textarea

I am currently attempting to limit the maximum number of characters allowed in a textarea. Using: <textarea rows="4" cols="50" maxlength="50"> It is functioning correctly in Firefox, but there is no impact in IE. This is an issue as many website u ...

htmltextareamaxlength

Adding HTML components to an image with adjustable dimensions

A graphic designer has provided us with an image featuring three selection boxes. I implemented the necessary HTML elements and CSS to display three overlapped selection boxes on top of the image, using pixel values for positioning. However, the original ...

htmlcssimageresponsive-designscaling

Why does the modal window gracefully descend when the mobile keyboard is activated?

I designed a modal window that has a fixed position: <div className={classes['UIModal'] + ' ' + classes[transition]} onClick={() => dispatch(modalHandler('offer'))} > <div className={classes['UIModal__ ...

cssreactjs

An inexplicable right margin

I am facing an issue with centering a table (a tracklist) under the album cover and title. There seems to be an unexpected margin on the right side that I can't seem to figure out. Any help in identifying the cause of this issue would be greatly appre ...

htmlcsshtml-table

Tips for creating a perfectly positioned v-overlay within a v-col component

When using an absolute v-overlay inside a v-col, the grandparent v-row is covered by the overlay instead of just the parent v-col. "Absolute overlays are positioned absolutely and contained inside their parent element." -According to Vuetify&apo ...

cssvue.jscss-positionvuetify.js

What steps can be taken to ensure that the content in column two does not impact the positioning of content in column one?

Is there a way for the input text container to remain in its original position within the layout even after submitting text? Usually, when the data displayed container's height increases, it pushes the input text container down. Despite trying absolu ...

htmlcssbootstrap-5

Tips for utilizing the jQuery selectbox plugin on multiple elements within a single page

On my webpage, there are 3 select boxes that I want to customize using a jQuery selectbox plugin. However, the issue I'm encountering is that the plugin only works on the first select box and the others remain unchanged. Does anyone know why this mig ...

javascriptjqueryhtmldrop-down-menu

Prevent the page from scrolling while the lightbox is open

I am struggling with a lightbox that contains a form. Everything is functioning properly, but I need to find a way to prevent the HTML page from scrolling when the lightbox is active. <a href = "javascript:void(0)" onclick=" document.getElementById(& ...

javascripthtmlcss

Is it possible to incorporate a PHP if-else statement in the action attribute of an HTML form?

I'm currently developing a form to allow users to create a login username and password. Once the account creation is successful, I want the user to be directed to the actual LOGIN form. To manage this process, I've implemented various checks usi ...

phphtmlformsvalidationaction

Troublesome behavior from Bootstrap's datepicker

Recently, I decided to dive into front-end development using Bootstrap but I'm facing some challenges. There are two issues here. The calendar glyph is appearing under the date input field instead of at the end of it on the same line. The picker is ...

jquerycssbootstrap-4responsive-design

What steps are involved in incorporating dynamic pagination in PHP using this particular snippet of code?

I am looking for a way to display a list of numbers from 1 to 1000 in a single line with the ability to scroll. However, I need to exclude both "Prev" and "1" from this list. How can I achieve this? Below is the code snippet that I currently have: echo ...

phphtmlcsstwitter-bootstrappagination

Analyzing JSON information and presenting findings within a table

Requesting user input to generate a JSON object based on their response. Interested in showcasing specific details from the object in a table format for user viewing. Questioning the efficiency and clarity of current approach. My current progress: In HTM ...

javascripthtmljson