CODEWITHSUNDEEP
htmlcssmobile
Kim Schouwstra
Kim Schouwstra

Reputation: 11

background in normal version and background color in mobile version

I want to make my site mobile. I've got 2 css files, one for the mobile version and one for the normal version. Putting them together in the head of my HTML file does not work, because the background of the normal version disturbs the mobile version, so the mobile version does not work at all. The css code is completely different. So does anybody have an idea how I can make my sitw mobile while having a background in the normal version and a background color in the mobile version?

This is the code for the normal version css:

<link rel="stylesheet" href="index.css" charset="utf-8">
<link rel="stylesheet" href="mobile.css" charset="utf-8">

body {
padding: 0px 20px 0px 20px;
}

p {
background: rgba(0, 0, 0 ,0.6);
}

.index{
 background-image: url("index.png");
 background-size: 100%;
 background-color: black ;
 font-family:'Coming Soon', cursive;
 font-size: 17px;
 color: white;

}
.JM{
background-image: url("jeffersonmanor.jpg");
background-size: 100% ;
background-color: black ;
font-family:'Coming Soon', cursive;
font-size: 17px;
color: white;
}

.TV{
background-image: url("thevilla.png");
background-size: 100% ;
background-color: black ;
font-family:'Coming Soon', cursive;
font-size: 17px;
color: white;
}

.PS{
background-image: url("psychoshock.jpg");
background-size: 100% ;
background-color: black ;
font-family:'Coming Soon', cursive;
font-size: 17px;
color: white;
}

.HH{
background-image: url("hauntedholidays.png");
background-size: 100% ;
background-color: black ;
font-family:'Coming Soon', cursive;
font-size: 17px;
color: white;
}

.TC{
background-image: url("theclinic.jpg");
background-size: 100% ;
background-color: black ;
font-family:'Coming Soon', cursive;
font-size: 17px;
color: white;
}

div.menubar > ul {
list-style-type: none;
margin: 0;
background-color:rgba(191, 0, 0, 0.4);
color: #fff ;
}

a.link {
color: yellow
}

div.menubar > ul > a > li {
display: inline-block;
padding: 15px;
overflow: hidden;
color: white;
}

div.menubar > ul > a > li:hover {
  background-color: #737373;
}

#index:active {
transform: scale(0.6);
transition-duration: 0,2s ;

}

#JeffersonManor:active {
transform: scale(0.6);
transition-duration: 0,2s ;
}


#TheVilla:active {
transform: scale(0.6);
transition-duration: 0,2s ;
}

#PsychoShock:active {
transform: scale(0.6);
transition-duration: 0,2s ;
}

#HauntedHolidays:active {
transform: scale(0.6);
transition-duration: 0,2s ;
}

#TheClinic:active {
transform: scale(0.6);
transition-duration: 0,2s ;
}

::selection {
background: #ee2c2c ;
}

::-webkit-selection {
background:  #ee2c2c ;
}

::-moz-selection {
background: #ee2c2c;
}

This is the head of my HTML:

<link rel="stylesheet" href="mobile.css" charset="utf-8">
  <link rel="icon" href= "tabicon.png">
    <title>Walibi Haunted Houses</title>
      <div class="menubar">

        <ul>
      <a href="index.html"><li id="index">Walibi Fright Nights</li></a>
      <a href="JeffersonManor.html"><li id="JeffersonManor">Jefferson Manor</li></a>
      <a href="TheVilla.html"><li id="TheVilla">The Villa</li></a>
      <a href="PsychoShock.html"><li id="PsychoShock">Psychoschock</li></a>
      <a href="HauntedHolidays.html"><li id="HauntedHolidays">Haunted Holidays</li></a>
      <a href="TheClinic.html"><li id="TheClinic">The Clinic</li></a>
        </ul>
      </div>

This is the css of the mobile version (part of it):

media screen and (max-width: 500px) {

  body {
  background-image: none;
  background-color: black;
  margin: 30px 2px 30px 2px;
  padding: 0px 20px 0px 20px;
  font-family:'Coming Soon', cursive;
  font-size: 15px;
  color: #af111c;
  }
  head {
  font-family:'Coming Soon', cursive;
  font-size: 15px;
  color: #af111c;
  }
}

Upvotes: 1

Views: 1069

Answers (3)

sansan
sansan

Reputation: 833

Try this simple media query 

body {
  background: #00ff00 url(http://i1.wp.com/static.web-backgrounds.net/uploads/2012/08/City_Landscape_Background.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    background-color: #fff;
  
}

@media only screen and (max-width: 500px) {
    body {
        background: #00ff00;
    }
}
<p>Please test it to reduce screen size.</p>

Upvotes: 2

Sangrai
Sangrai

Reputation: 687

Here is another solution. Use the proper tag of media query.

@media (max-width: 500px){
  body {background-image: none; background-color: black;
  margin: 30px 2px 30px 2px;
  padding: 0px 20px 0px 20px;
  font-family:'Coming Soon', cursive;
  font-size: 15px;
  color: #af111c;
  }
 .index {
        background-image: none;
        }

  head {
       font-family:'Coming Soon', cursive;
       font-size: 15px;
       color: #af111c;
       }
}

Upvotes: 0

Banzay
Banzay

Reputation: 9470

If you want to include 2 css-files in third css-file you should do it in different way, but not similar to "HTML-style" <link ...>

Your css-file normal_version.css should start with:

@include url('index.css');
@include url('mobile.css');

Upvotes: 0

Related Questions