Seperate CSS files work when linked independently but not together

hendo_au · April 12, 2024, 6:51am

I created an HTML plant database for my garden which I’d like to be responsive. I created two seperate CSS files, one for when viewing on my laptop and one for when viewing on my phone. There’s a hidden menu bar to show/hide the menu on mobile. When I link either of the files to the HTML, it displays as I want but when I try to link both files with one being a media query, the media query CSS no longer displays correctly. I’m assuming something in the main CSS file is cancelling something out in the media query CSS but I just can’t figure it out. I’m pretty much a novice but would appreciate any help you can provide.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="css/accordion.css">
	<link rel="stylesheet" media="screen and (min-width: 300px) and (max-width: 619px)" href="css/accordion-mobile.css">

	<title>Navigation</title>
</head>

<body>
	<header>
<div id="menu-bar">
		<a href="javascript:void(0);" onclick="myFunction()"><img src="icons/hamburger.png" class="icon" alt="hamburger"></a>
	</div>
		<nav class="nav" id="menu">		
			<a href="#home" class="nav-item-active nav-item nav-link">Home</a>
			<div class="nav-item">
				<a href="#bulbs-rhizomes" class="nav-link">Bulbs & Rhizomes</a>
				<div id="bulbs-rhizomes" class="nav-submenu">
					<a href="bulbs-rhizomes.html#bearded-irises" class="nav-submenu-link">Bearded Irises</a>
					<a href="bulbs-rhizomes.html#dutch-irises" class="nav-submenu-link">Dutch Irises</a>
					<a href="bulbs-rhizomes.html#hyacinths" class="nav-submenu-link">Hyacinths</a>
					<a href="bulbs-rhizomes.html#freesias" class="nav-submenu-link">Freesias</a>
				</div>
			</div>
			<div class="nav-item">
				<a href="#natives" class="nav-link">Natives</a>
				<div id="natives" class="nav-submenu">
					<a href="natives.html#boronias" class="nav-submenu-link">Boronias</a>
					<a href="natives.html#warratahs" class="nav-submenu-link">Warratahs</a>
					<a href="natives.html#leucadendrons" class="nav-submenu-link">Leucadendrons, Agonis & Acmenas</a>
					<a href="natives.html#leucospermums" class="nav-submenu-link">Leucospermums</a>
					<a href="natives.html#hakeas" class="nav-submenu-link">Hakeas</a>
				</div>
			</div>

			<div class="nav-item">
				<a href="#non-natives" class="nav-link">Non-natives</a>
				<div id="non-natives" class="nav-submenu">
					<a href="non-natives.html#salvias" class="nav-submenu-link">Salvias</a>
					<a href="non-natives.html#proteas" class="nav-submenu-link">Proteas</a>
					<a href="non-natives.html#african-daisies" class="nav-submenu-link">African Daisies</a>
					<a href="non-natives.html#marguerite-daisies" class="nav-submenu-link">Marguerite Daisies</a>
					<a href="non-natives.html#roses" class="nav-submenu-link">Roses</a>
					<a href="non-natives.html#other" class="nav-submenu-link">Other</a>
				</div>
			</div>
			<a href="#succulents" class="nav-item nav-link">Succulents</a>
			<div class="nav-item">
				<a href="#edibles" class="nav-link">Edibles</a>
				<div id="edibles" class="nav-submenu">
					<a href="edibles.html#fruit" class="nav-submenu-link">Fruit</a>
					<a href="edibles.html#berries" class="nav-submenu-link">Berries</a>
					<a href="edibles.html#herbs" class="nav-submenu-link">Herbs</a>
				</div>
			</div>

		</nav>
	</header>
	<script src="js/garden.js"></script>
</body>

</html>

CSS (for laptop)

@charset "UTF-8";

/* colours */
:root {
  --main: #22676b;
  --contrast: #f5f7e1;
  --accent: #f74f43;
  --active: #053340;
  --hover: #135061;
  --text: #333333;
  --reverse: #ffffff;
}

*,
body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

img {
  width: 300px;
}

p {
  font-size: 1em;
  line-height: 1.5em;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.25em;
}

h4 {
  font-size: 1em;
}

/* main header */
/*-----------------------------------------------*/
#menu-bar {
  display: none;
}

#menu-bar .icon {
  width: 1.5em;
  float: right;
}

/* main navigation */
/*-----------------------------------------------*/
.nav {
  background-color: var(--main);
  color: var(--contrast);
  border-bottom: 0.25em solid var(--accent);
  position: fixed;
  top: 0;
  width: 100%;
}

.nav-item {
  float: left;
  display: block;
  color: var(--contrast);
  text-align: center;
  text-decoration: none;
  font-size: 1.25em;
}

.nav-item-active {
  background-color: var(--active);
  color: var(--contrast);
}

.nav-item:hover .nav-submenu {
  display: block;
}

.nav-item:last-child {
  border-bottom: none;
}

.nav-link {
  float: left;
  display: block;
  color: var(--contrast);
  text-align: center;
  padding: 0.75em 1em;
  text-decoration: none;
}

.nav-link:hover {
  background-color: var(--hover);
}

.nav-submenu {
  display: none;
  position: absolute;
  margin-top: 2.6em;
  background-color: var(--main);
  width: inherit;
}

.nav-submenu:target {
  max-height: 20rem;
}

.nav-submenu-link {
  float: none;
  color: var(--contrast);
  padding: 0.75em 1em;
  text-decoration: none;
  display: block;
  text-align: left;
  border-top: 0.125em solid var(--active);
}

.nav-submenu-link:hover {
  background-color: var(--hover);
}

/* Hide the link that should open and close the nav on small screens */
.nav img {
  width: 1em;
}

.nav .icon {
  display: none;
}

CSS (for mobile)

@charset "UTF-8";


/* colours */
:root {
  --main: #22676b;
  --contrast: #f5f7e1;
  --accent: #f74f43;
  --active: #053340;
  --hover: #135061;
  --text: #333333;
  --reverse: #ffffff;
}

/* offset for fixed header */
.anchor {
  position: relative;
  top: -4.25em;
}

*,
body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.25em;
}

h4 {
  font-size: 1em;
}

/* main header */
/*-----------------------------------------------*/
#menu {
  display: none;
}

#menu-bar {
  background-color: var(--main);
  color: var(--contrast);
  width: 100%;
  height: 3em;
  padding: 0.75em 1em;
  display: block;
}

#menu-bar .icon {
  width: 1.5em;
  float: right;
}

/* main navigation */
/*-----------------------------------------------*/
.nav {
	background: var(--main);
	position: fixed;
	top: 3em;
	width: 100%;
	margin: 0;
	padding: 0;	
	overflow: hidden;
}

.nav-item {
	font-size: 20px;
	background: var(--main);
	border-bottom: 1px solid var(--active);
}

.nav-item:last-child {
	border-bottom: none;
}

.nav-item-active {
  background-color: var(--active);
  color: var(--contrast);
}

.nav-submenu {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s;
  background: var(--hover);
}

.nav-link {
	text-decoration: none;
	padding: 16px 20px;
	display: block;
	color: var(--contrast);
}

.nav-submenu-link {
  text-decoration: none;
  padding: 16px 20px;
  display: block;
  color: var(--contrast);
}

.nav-submenu:target {
	max-height: 600px;
}

.nav-submenu-link {
	font-size: 16px;
	background: transparent;
	transition: background 0.2s ease-in;
}

.nav-submenu-link:hover {
	border-left: 3px solid var(--accent);
}

Teller · April 12, 2024, 11:56am

Welcome to the forum @hendo_au

Try using this code for the stylesheet links.

hendo_au:

	<link rel="stylesheet" media="screen and (min-width: 620px)" href="css/accordion.css">
	<link rel="stylesheet" media="screen and (min-width: 300px) and (max-width: 619px)" href="css/accordion-mobile.css">

Please comment out the following code from the mobile css.

Happy coding

0x74h51N · April 12, 2024, 12:23pm

There is another solution for this: you can make your CSS file responsive within a single file. This approach will result in cleaner and more concise code. For example:

@media (min-width: 300px) and (max-width: 619px) {
  h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.25em;
}

h4 {
  font-size: 1em;
}
    /* Other styles */
}

Here, you only need to specify the differences inside the media query using a single CSS file. Other styles, such as colors, body styles, and more, will remain the same.

Additionally, you can add more options using this approach, for example, for larger screens:

@media (min-width:1200px) {

...
}

This technique is well explained in the responsive web design curriculm. There is also documentation available which I refer to when I forget something … Happy coding.

hendo_au · April 13, 2024, 7:40am

Thank you for proving once again that the best solutions are often the simplest. It worked liked a charm!

hendo_au · April 13, 2024, 7:44am

Thanks for the response. I implemented the ‘quick fix’ suggested above but I like to understand how things work so now I’ve also gone through the CSS line by line and resolved all but one issue. My eyes are killing me!

system · October 12, 2024, 7:44pm

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Help with media query for the 4th HTML project HTML-CSS	3	475	March 9, 2021
My media query not working HTML-CSS	2	2731	January 24, 2022
Trying to make a responsive hamburger menu, why doesn't my media query work? HTML-CSS	3	944	July 20, 2023
Technical Documentation page HTML-CSS	2	19	November 26, 2024
Media Query Issues in my Technical Documentation Project HTML-CSS	7	393	April 15, 2023

Seperate CSS files work when linked independently but not together

Related topics