I'm currently working on a website project for my college assignment and I could really use some assistance with a significant issue that I've encountered.
Whenever I open the html file of my website on my MacBook, which has a screen resolution of 2880 x 1800 at home, I need to adjust the view size to 80% on Google Chrome in order for the webpage to appear in proper proportion. However, when viewed at college, the website automatically adjusts itself to the correct proportions. My concern is that when someone else reviews my website, it may not display correctly due to sizing issues.
Is there a way to write a code that will automatically adjust the website view based on the user's monitor size?
I've seen other websites utilize certain types of HTML code like the following. Do these codes help position the content to fit and adapt to different monitor and browser dimensions?
.image:hover {
-webkit-transform:scale(1.2);
transform:scale(1.2);
max-width: 100%;
When I use the "Enter Responsive Design Mode" feature in the "Develop" option on my MacBook to view an online portfolio, it's clear that the way I coded the content is not maintaining its size proportions and alignment.
To give you an idea of the correct view I'm aiming for, here are links showing how I've adjusted the view in Google Chrome (https://i.stack.imgur.com/CJtUK.png) and Safari (https://i.stack.imgur.com/U1VOH.png), and a web developer's portfolio for reference where the content fits perfectly in all resolutions (https://i.stack.imgur.com/vcQRg.png).
In summary, I'm seeking advice on whether there exists a code that can ensure my website content fits perfectly on screens across different browsers and devices like the example portfolio mentioned above.
Finally, here is the snippet of my HTML & CSS code for anyone willing to review and suggest any improvements or corrections to help me achieve my desired outcome:
HTML
<!DOCTYPE html>
<html>
<head>
<html lang="en">
<meta charset="UTF-8">
<title>Liam Docherty Digital Portfolio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a>
<h1 class="nav-title">Liam Docherty's Digital Portfolio</h1>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">Home</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">About Me <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a>
</li>
<li><a href="#section3">Contact</a>
</l...
</footer>
</body>
</html>CSS
<style>
body {
margin: 0;
padding: 0;
}
.navbar.navbar-default {
background-color: #4D5061;
height: 10vh;
z-index: 100;
}
/* Remaining CSS styles follow... */
</style>