Show us a “working page” with your HTML and CSS.
A “working page” starts with <!doctype>, includes the <head> section which also may include the CSS (for convenience, it is usually easiest to include relevent CSS at the top of a “working page”), then the <body> section, and finally </html>. Such as:
<!doctype>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>responsive page</title>
<style>
/* your CSS here */ /* see notes below */
.outer {
max-width:1440px;
margin:0 auto;
}
</style>
</head>
<body>
<div class="outer"> <!-- see notes below -->
<header>
<!-- your HTML here -->
</header>
<main>
<!-- your HTML here -->
</main>
<footer>
<!-- your HTML here -->
</footer>
</div>
</body>
</html>
We should be able to copy the “working page” to our computers and see exactly what you see. With the code, we can better understand your design intent and level of knowledge.
You may wish to include screen shots as you have done in post #6.
Any information that you provide to help us understand your issue is appreciated.
Thank you
for more info: Forum Posting Basics
Remarks:
The desktop view of most sites (not all) is designed to fit within a maximum width. I usually use a <div class="outer"> for the outermost page/site container. To center the web page in browser windows that are wider than the page’s designed max width, one assigns {max-width:1440px; margin:0 auto;} to that container. (see example above). Without making any more changes, that outer box will be “responsive” or “fluid” from 1440px down to zero. Media queries come into play when one needs to change the layout of the content.
As far as resizing the font, that is a different issue. I suspect that you are thinking about allowing your users to resize your site’s font in their browsers using JavaScript (an old MS technique) but such an adjustment is inappropriate nowadays since browsers allow considerable adjustments to compensate for screen rez.
What’s with the 1440p? That is a video designation - p = primary, i = interlaced - not a basic HTML/CSS term. Did you mean px? (I assumed px in my example.)
If you have not taken a formal class in HTML and CSS, I strongly encourage you to do so. It is difficult to learn HTML and CSS coding piecemeal.