Recently, I received this website project from a friend for development. I haven't worked with CSS for a while, and I'm facing a few challenges. My main goal is to ensure that the website adjusts seamlessly to different browser sizes.
The issue seems to be caused by the use of pixel measurements instead of percentages in the classes, making the layout fixed. I need to figure out how to convert all these classes to percentages so that the webpage becomes fluid and responsive to varying window sizes. I assume this involves some mathematical calculations?
I don't believe @media queries will be useful in this scenario.
Here is a snippet of the HTML code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>Vivid Shop Display</title>
<link rel="stylesheet" href='css/vivid-style.css'>
<link rel='stylesheet' href='css/scroller.css'>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
<body>
<header>
<div class="vd-navigation-wrapper">
<div class="vd-settings-wrapper">
<div class="vd-user-settings">
</div>
<div class="vd-currency-selector">
</div>
<div class="vd-language-selector">
</div>
</div>
<div class="vd-nav-wrapper">
<ul>
<li>Shop</li>
<li>About</li>
<li class="vd-logo-img"><img src="img/vivid_logo.png"/></li>
<li>Lookbook</li>
<li>Contact</li>
</ul>
</div>
<div class="vd-cart-wrapper">
<div class="vd-cart-selector"></div>
</div>
</div>
...
And here is a snippet of the CSS code:
@charset "UTF-8";
/* CSS Document */
html {}
body {
margin:0px;
padding:0px;
}
h1,h2,h3,h4,h5,h6,p,ul,li,span {
margin:0px;
padding:0px;
}
...