Search code examples
htmlcssasp.netmaster-pages

Content page is inheriting one of four css style files from master page

I am building a website in asp.net, I have made a masterpage with a link tag to my css files. I made use of 1 global css file for every format of screen and 3 css files for small, medium and large screens.

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="Styles/style.css" media="all">
    <link rel="stylesheet" type="text/css" href="Styles/small-style.css" media="all and (max-width:699px)">
    <link rel="stylesheet" type="text/css" href="Styles/medium-style.css" media="all and (min-width:700px) and (max-width:1499px)">
    <link rel="stylesheet" type="text/css" href="Styles/large-style.css" media="all and (min-width:1500px)">

For some reason in my content file the global css file (for every format) is getting used by the html elements. For example (style.css) this works for a div in my content page with class contactPage: 

.contactPage {
    margin-bottom: 140px;
}

Except for the 3 css files that make use of a min- and max-width, these are not used by the html elements in my content page (for some reason). For example (medium-style.css):

.contactPage {
    background-image: url(../Images/ContactBackground.jpg);
    background-size: 300px 500px;
    background-repeat: no-repeat;
    background-position: top right;
}

However in my master page these css links work file for all page sizes.

What I tried:

  1. Adding a viewport in my content file.
  2. Making use of <style></style>, this works but I don't want any of my style in my html.
  3. Making a link element in my content page to the css files.

I hope someone could help me out. Thank you in advance.

Solution

  • instead of your html doing the media query combine all 3 pages into one css and then separate them with something like 

    all css {
your css here
}

@media screen and (max-width: 699px){
css for max-width for 699{
your css here
}
@media screen and (min-width:1500px){
css for max-width for 1500{
your css here
}

    i would let the media query in css handle it, not your html