Inspiring

Question

Page Size on Different Browsers

Forum|Forum|4 years ago
October 14, 2021
3 replies
659 views

I'm making corrections to a site that I built using an original version of Dreamweaver years ago. It's all going well but, for some reason, the site pages that are sized properly on my default browser, Firefox, look too small on Chrome and Safari.

The first attachment shows the way some site pages look on my default browser Firefox on the left and Chrome on the right:

As you can see, when the windows are scaled to the same size, the images look miniature in Chrome but decently sized in Firefox.

Just to make sure that it’s not some setting in the browser itself, the second attachment shows the way a commercial site looks on both:

So, there must be some code that tells the browser what size to display the page, regardless of the browser. I designed it for Firefox and it’s too small for Chrome and also Safari. Any ideas? Thank you!

Browser

This topic has been closed for replies.

Nancy OShea

Community Expert

As Jon said, answers to layout problems are contained in your HTML & CSS code.

That said, did you add a viewport metatag to the <head> of your documents?

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Unique Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

Nancy O'Shea— Product User & Community Expert

C

chris1122Author

Inspiring

Hi Nancy and Jon,

I tried adding the code you suggested Nancy but it didn't change anything. But, thanks to your help I've figured out what the problem is, although not exactly how to fix it: The reason why my pages look larger in Firefox is simply because the browser has been remembering a zoom setting of 170% for those pages, although the default setting in preferences is 100%. When I change the page zoom setting to 100% the pages look as small in Firefox as they do in Chrome and Safari. Interestingly, my site looks fine on my iPad and iPhone. It's only on desktop browsers that it looks too small.

This makes me think that one way for me to solve this problem would be to enlarge all of the content on my pages so that they look the way I want in browser windows set to 100%.... Unless there's some magic code I can add that will tell all browsers to zoom to 170% when they load my pages...

https://www.chrisjohnsonphotographer.com/index.html

C

chris1122Author

Inspiring

1. 290 x 79 pixels is a postage stamp on Retina & 4-5K displays. Content and layout should fit the device size at NORMAL zoom settings. Asking people to increase their browser zoom settings to 170% is ridiculous. Nobody will do it.

2. XHTML Transitional doc types are outdated. Replace with HTML5 code which is respected by all modern browsers and web devices.

3. Get rid of the table-based layouts. Tables are for tabular data (charts & spreadsheets) only. These days, we use responsive CSS for layouts.

Here's a quick example with Bootstrap 4 in DW CC:

Copy & paste this code into a new, blank document and save as test.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4 Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--Bootstrap CSS-->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<style>
/**custom styles**/
body {
	min-height: 100vh;
 padding-top:25vh;
}
.flex-grow { flex: 1; }

/**CHANGE CLASS COLOR TO ORANGE**/
.bg-primary {background-color:#EC933C!important;}

.navbar a {font-size:1.35rem;
text-transform:uppercase}

</style>
</head>

<body class="d-flex flex-column bg-dark text-light">

<!--BEGIN RESPONSIVE NAVBAR-->
<nav class="navbar navbar-dark navbar-expand-lg bg-primary justify-content-center fixed-top"> <a class="navbar-brand" href="#"><img class="img-fluid"  src="https://dummyimage.com/360x65" alt="Your Logo" title="Company Logo or Brand"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"> <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="gallery.html">Gallery</a></li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
<!--end navbar-->

<!--BEGIN MAIN CONTENT-->
<main class="container-fluid flex-grow">
<div class="row h-100">

<!--COL 1-->
<div class="col-md-4">
<p class="text-center">
<img class="img-thumbnail" src="https://placeimg.com/400/500/people" alt="placeholder" title="Tooltip here..."></p>
</div>><!--end col 1-->

<!--COL 2-->
<div class="col-md-4  border-warning border-top border-bottom">
<h1 class="p-2">Hello World!</h1>
<h2 class="p-2 text-warning">Welcome to Bootstrap 4 in Dreamweaver.</h2><p class="p-2">On short pages, footer remains at viewport bottom. </p>
<p class="p-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus debitis, voluptatem, nulla, dolor qui pariatur quo reprehenderit at labore dicta iure earum! Facilis itaque quidem, placeat! Iste, rerum aut sapiente.</p>
<p class="p-2">
<a class="btn btn-outline-warning" href="https://www.w3schools.com/bootstrap4/" title="Visit W3Schools.com">Bootstrap 4 Tutorials </a></p>
</div><!--/end col 2-->

<!--COL 3-->
<div class="col-md-4">
<p class="text-center">
<img class="img-thumbnail" src="https://placeimg.com/400/500/arch" alt="placeholder" title="Tooltip here..."></p>
</div><!--end col 3-->
</div><!--end row-->
</main><!--end main-->

<!--BEGIN FOOTER-->
<footer class="bg-primary text-white mt-4">
<div class="container-fluid py-3">
<div class="row">
<div class="col-md-4 text-center">
<h5>Footer Column 1</h5>
<p>Lorem ipsum dolar...</p>
</div>
<div class="col-md-4 text-center">
<h5>Footer Column 2</h5>
<p>Lorem ipsum dolar...</p>
</div>
<div class="col-md-4 text-center">
<h5>Footer Column 3</h5>
<p>Lorem ipsum dolar...</p>
</div>
</div><!--end row-->
</div><!--end container-->
</footer><!--end footer-->

<!--supporting scripts, first  jQuery then Popper then Bootstrap--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>

</body>
</html>

Thanks for taking time to reply Nancy and the next step for me would be a complete updating of my site. For now I simply wanted to make it visible and workable in all browsers. I know now that enlarging all of the content will, more or less, fix the immediate problem.

Thanks again

Jon Fritz

Community Expert

Images might be worth a thousand words, unfortunately, none of them have anything to do with the code your page is rendered from.

If it's not your zoom setting as Nancy suggests, post back with a link to your site, or a test page, so we can see what's happening in the code.

Nancy OShea

Community Expert

Change your browser's Zoom settings to 100% (normal) or use Ctrl + 0 (zero).

Responsive web design is essential today. If you're not building your site responsively to perform well on ALL devices, you're alienating a LOT of people who rely heavily on mobile & tablet devices for Internet access.

Image size is best controlled with CSS % width, not explicit values in pixels. 🙂

Examples:

========

img { width: 100% } /** re-scales image up or down to fit all screen sizes but causes distortion**/

img { max-width:100% } /** re-scales on small screens but maintains native image size on large & extra large screens without distortion**/

Nancy O'Shea— Product User & Community Expert

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded