Welcome, I am in the process of learning CSS and responsive design.
I have an index page that consists of a header, top menu, main text content, and footer. The top menu layout works well up to 300px, but when it goes under 300px, only the additional links are shifted down without any other changes.
To better understand how the elements behave as the page width changes, I used media queries to temporarily set different colors for the main text and top menu.
I'm trying to figure out where I might be making a mistake. Do media queries need to be structured in a specific way to apply changes to screens with widths less than 300 pixels?
Could someone take a look at the top menu in my index page and the CSS styles in the media queries?
This is my Index page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=4">
<title>registering system</title>
<link href="style-en.css" rel="stylesheet" type="text/css" />
<script src="ref/jquery-1.9.0.js"></script>
</head>
<body onload="" >
<!-- Your HTML content goes here -->
</body>
</html>
And this is my CSS style:
@font-face {
font-family: 'headfont';
/* Font face rules go here */
}
/* More CSS styling rules here */
@media only screen and (max-device-width : 700px){
/* Media query rules for devices with max width 700px */
}
/* Other media queries and CSS rules follow */
I hope someone can assist me in identifying and resolving the issue I'm facing. Thank you!