Member Avatar for madmax9922

Hi i would like that my webpage keep the same shape on different screen size or resolution
each time i go on a smaller screen the top of my page is bigger than the bottom. i would like to keep the same space on both side. is it possible?
thx in advance!

html
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>

<div id="main">

<div id="head">


</div>

<div id="menu">

</div>

<div id="content">

</div>

</div>

<div id="foot">
</div>
</body>
</html>

and this is my css

body {
margin: 0 auto;
font-size: 14px;
text-align: center;
background:url(bg_main01.jpg);
}

body div {
text-align: left
}

#main {
width: 1024px;
margin-left: auto;
margin-right: auto;
background:#6F0;

}

#head {
width: 1024px;
height: 291px;
background:#000;
background-repeat: no-repeat;
background-position: center;
text-align: center;
}

#menu {
width: 1024px;
height: 180px;
background:#F90;
background-repeat:repeat-x;
background-position: center;
text-align: center;
padding-top: 30px;
}



#content {
padding-left: 20px;
padding-right: 20px;
height:175px;
margin-top:4px;
}


#foot {
margin-left: auto;
margin-right: auto;
width: 1024px;
height: 20px;
padding-top: 20px;
text-align: center;
background:#000;
background-position: center;
background-repeat: no-repeat;
font-family: sans;
font-size: 10px;
color: #000000;
}
Edited by madmax9922
  • 2 Contributors
  • 1 Reply
  • 273 Views
  • 5 Hours Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

Short answer: yes — stop using fixed pixel heights/widths and switch to a responsive pattern. The header looks “bigger” on smaller screens because parts of the layout are locked to fixed px values and the page isn’t scaling with the viewport. Use a fluid container (width:100% with a max-width), add the mobile viewport meta, and make the header’s height proportional to its width (aspect-ratio or the padding-top trick). Also put the footer inside the main wrapper so it participates in the same layout (good point from @Member120589).

Example building blocks (do not copy your old IDs/classes — adapt these to your HTML):

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

/* core layout */
*,*::before,*::after{box-sizing:border-box}
.site { max-width:1024px; width:100%; margin:0 auto; display:flex; flex-direction:column; min-height:100vh }
.site__content { flex:1 } /* makes footer sit at bottom when content is short */
/* keep header shape consistent */
.site__header {
  width:100%;
  aspect-ratio: 16/4; /* preserves the same shape as the width changes */
  background: url('your-image.jpg') center/cover no-repeat;
}

/* fallback for older browsers (padding-top technique) */
.site__header--fallback { position:relative }
.site__header--fallback::before { content:''; display:block; padding-top:25% } /* height = 25% of width */

Troubleshooting tips: use DevTools responsive mode to test breakpoints, avoid fixed height on content areas (use min-height or padding), and add small media queries to tweak spacing on phones. If you need identical pixel-perfect look across every device (rare), use a centered fixed-width layout — otherwise, the responsive approach above will keep the “shape” consistent while adapting to different screens. , try these changes and check how the header scales before changing other styles.

Member Avatar for Member #120589

on a smaller screen the top of my page is bigger than the bottom. i would like to keep the same space on both side. is it possible?

What does this mean max? This doesn't make much sense. By bigger you mean width or height? I'm assuming width.

From your markup, it look like your main container encloses everything, but the footer is outside this. If you want everything inside the container, do this:

<div id="main">

    <div id="head">
    </div>

    <div id="menu">
    </div>

    <div id="content">
    </div>

    <div id="foot">
    </div>

</div>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.