CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
KamK
KamK

Reputation: 61

Bootstrapping (Responsive image) doesn't work (PC/Mobile)

I'm trying to create a website for a friend. The challenge is to have only a image on the website. But the images can't be the same on both pc and mobile. So I have now made a function, so the one or other will be either shown or hidden.

But my problem is now that the responsive isn't working. And will the code for the PC and mobile be the same?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Danish Bread Studio</title>
    <!-- Almindelig CSS -->
    <link href="stylesheet.css" rel="stylesheet">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
        <img src="baggrund2.jpg" class="visible-xs" class="img-responsive" alt="responsive image">
        <img src="baggrund.jpg" class="visible-lg" class="img-responsive" alt="responsive image">
    <div class="box">
        <p><center>Danish Bread Studio's hjemmeside er i øjeblikket under opbygning.</center></p>   
    </div>
  </body>
</html>

Upvotes: 0

Views: 287

Answers (2)

Harshal Sawant
Harshal Sawant

Reputation: 607

Image tags you have written should be as follows. You have written class attribute 2 times. 

<img src="baggrund2.jpg" class="visible-xs img-responsive" alt="responsive image">
<img src="baggrund.jpg" class="visible-lg img-responsive"  alt="responsive image">

Upvotes: 2

hsstan
hsstan

Reputation: 29

Why don't use CSS media query? MDN media query. It's lot simplier than a JavaScript. I suggest the mobile-first approach.

Upvotes: 0

Related Questions