Bonjour à tous, et par avance merci pour votre aide.
J'ai besoin de modifier la taille de ma police en fonction de celle de ma page.
Pour cela, j'ai utilisé les media queries.
Mais le problème est que j'arrive à agir sur la couleur de mon texte, mais pas sur sa taille !
J'ai beau écumer google depuis 2 jours à la recherche d'une solution, rien ne fonctionne...
Voici mon code :
J'espère que quelqu'un pourra m'aider... :desespoir:
J'ai besoin de modifier la taille de ma police en fonction de celle de ma page.
Pour cela, j'ai utilisé les media queries.
Mais le problème est que j'arrive à agir sur la couleur de mon texte, mais pas sur sa taille !
J'ai beau écumer google depuis 2 jours à la recherche d'une solution, rien ne fonctionne...
Voici mon code :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="portfolio1.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width"/>
<link href="bootstrap.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<title>Portfolio</title>
</head>
<body>
<div class='jumbotron'><div class="container">
<h1>Ma presentation<br/><br/></h1>
<div class='text'><p> blabla.</p>
<p>bidule s'en va-t-en guerre</p>
<p> don't put baby in a corner</p>
<p> mais qu'est-ce que c'est que cette histoire de pieds !<br/><br/></p>
<p><span class='italique'>It's never too late to live off his passion !</span></p></div>
</div>
<div class='agratter' id='grat'><img src='pinceau_flou_g2znk3.jpg' data-hidden="pinceau_net_opwhni.jpg" alt="image floue" data-soluce="image nette" height="100" width="100"/><canvas id="grat1"></canvas>
</div></div>
<script src="portfolio1.js"></script>
</body>
</html>
.jumbotron {
display:block;
cursor: url("http://res.cloudinary.com/jcherry07/image/upload/v1485783928/blue_squeegee_vptst2.png"),default;
}
.agratter {
position:relative;
top : 1px;
bottom:50px;
}
.agratter canvas {
top:0;
bottom : 0;
right:0;
left:0;
position: absolute;
z-index: 2;
}
canvas {
width : 100%;
height : 100%;
background-image: url('https://res.cloudinary.com/jcherry07/image/upload/v1485734879/pinceau_net_opwhni.jpg');
background-image: -webkit-image-set(url('https://res.cloudinary.com/jcherry07/image/upload/v1485734879/pinceau_net_opwhni.jpg') 1x, url('https://res.cloudinary.com/jcherry07/image/upload/v1485734879/pinceau_net_opwhni.jpg') 2x );
background-size: cover;
}
img {
width: 100%;
height : auto;
}
p{
font-size:100%;
}
.container {
position : absolute;
left : 5%;
right : 20%;
z-index : 3;
color: white;
margin-top: 10%;
}
.italique {
font-size : 1.2em;
font-style: italic;
}
span {
position:absolute;
left : 10%;
}
h1 {
text-align : center;
}
.text{
margin-bottom: 0%;
text-align : center;
}
@media all and (max-width: 1040px)
{
p{
font-size:80%;
}
.container {
overflow:auto;
position : absolute;
top : 25%;
bottom: 35%;
left : 5%;
right : 40%;
z-index : 3;
color: white;
padding-top: 10%;
background-color: rgba(0,155,0,0);
padding-bottom: 10%;
}
}
@media all and (max-width: 815px)
{
.container {
overflow:auto;
position : absolute;
top : 20%;
bottom: 45%;
left : 5%;
right : 20%;
z-index : 3;
color: white;
background-color: rgba(0,155,0,0);
padding-bottom: 10%;
}
p{
font-size:60%;
}
}
::-webkit-scrollbar {
width: 5px; /*largeur de la scrollbar verticale*/
background: rgba(0, 0, 0, 0);
}
::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.2);
/*couleur du fond de la scrollbar*/
}
::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/
background: rgba(255, 204, 153, 0) /*couleur de l'ascenseur*/;
}
J'espère que quelqu'un pourra m'aider... :desespoir:
