Phone Content
The image I have attached is a screenshot of how my webpage https://www.taniaswebpages.com looks. Everything is shifted to the right.
When I work on this page in Brackets, my content is kind of centred but mostly towards the left, and the 2 trees are on the right side. I am doing a website challenge for 180 days, and I am struggling. Hoping someone can help me, since I am new at this coding stuff. The content starts stacking in a weird way when I view the webpage on my phone.
this is my html:
JavaScript
x
88
88
1
<!DOCTYPE HTML>2
<html lang="en" dir="ltr">3
4
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>5
<meta charset="utf-8">6
7
8
<link href="taniaWebsite2.css" type="text/css" rel="Stylesheet" />9
<title> How Well Do You Know Tania?</title>10
11
12
13
<body class="mainpage3">14
15
16
17
<h1> How Well Do You Know Tania?</h1>18
19
<form name="Questionaire">20
21
Q1. What is her favourite breakfast food? <br>22
<input type="radio" name="q1" value="a"> Chocolate Chip Pancakes <br>23
<input type="radio" name="q1" value="b"> Eggs and Toast <br>24
<input type="radio" name="q1" value="c"> Oatmeal with berries <br><br>25
26
Q2. Where does she want to travel next?<br>27
<input type="radio" name="q2" value="a"> Seattle <br>28
<input type="radio" name="q2" value="b"> Montreal <br>29
<input type="radio" name="q2" value="c"> New York City <br>30
<input type="radio" name="q2" value="d"> California <br><br>31
32
Q3. What music album is she currently obsessed with?<br>33
<input type="radio" name="q3" value="a"> Flower Boy - Tyler, The Creator <br>34
<input type="radio" name="q3" value="b"> SKINS - XXXTENTACION <br>35
<input type="radio" name="q3" value="c"> Lost and Found - Jorja Smith <br>36
<input type="radio" name="q3" value="d"> Championships - Meek Mill <br><br>37
38
Q4. What is Tania doing over the holidays?<br>39
<input type="radio" name="q4" value="a"> Toronto Christmas market <br>40
<input type="radio" name="q4" value="b"> Spending time with family <br>41
<input type="radio" name="q4" value="c"> Watching the new Grinch <br>42
<input type="radio" name="q4" value="d"> All of the above <br><br>43
44
45
46
<input type="button" value="Submit" onclick="check()"> 47
48
49
</form>50
51
<script>52
53
function check(){54
var q1=document.Questionaire.q1.value;55
var q2=document.Questionaire.q2.value;56
var q3=document.Questionaire.q3.value;57
var q4=document.Questionaire.q4.value;58
var count=0;59
60
if(q1=="a"){61
count++;62
63
}if (q2=="c"){64
count++;65
66
}if (q3=="a"){67
count++;68
}if(q4=="d"){69
count++;70
71
}alert("You received "+count+" out of 4");72
73
74
} 75
76
</script>77
78
79
<img src="tree.png" class="image1" width=200 height=350 > 80
<img src="tree2.png" class="image2" width=200 height=350 > 81
82
83
84
85
</body>86
87
</html>88
this is my css:
JavaScript
1
95
95
1
body.mainpage2{2
margin:0;3
padding:0;4
font-family:lato; 5
background-color:#e74c3c;6
}7
8
9
.color{10
margin-top:350px;11
text-align:center;12
}13
14
#hex{15
display:block;16
color:white;17
font-size:40px;18
text-transform: uppercase;19
margin:15px;20
letter-spacing: 0.1em; 21
}22
23
.color button{24
background:none;25
outline:none;26
color:white;27
border:2px solid white;28
cursor:pointer;29
font-size:22px;30
border-radius: 5px;31
box-shadow: 5px 6px 30px 5px #fff;32
width:200px;33
34
}35
36
body.mainpage3{37
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(221, 106, 95, 0.81));38
margin: 0 auto;39
max-width: 800px;40
padding: 2em 2em 4em;41
font-family:Lato;42
font-size:16.5px;43
line-height: 24px; 44
float;align-content: flex-start;45
display: block;46
47
48
49
}50
51
input[type=button]{52
width:8%;53
border:none;54
padding: 8px 8px; 55
cursor:pointer;56
color:palevioletred;57
58
}59
60
.image1 {61
62
position: relative;63
right:-400px;64
bottom:600px;65
animation: shake 0.9s;66
animation-iteration-count: infinite;67
68
69
70
}71
72
.image2{73
position:relative;74
right:-100px;75
bottom:200px;76
animation: shake 0.9s;77
animation-iteration-count: infinite;78
79
}80
81
82
@keyframes shake {83
0% { transform: translate(1px, 1px) rotate(0deg); }84
10% { transform: translate(-1px, -2px) rotate(-1deg); }85
20% { transform: translate(-3px, 0px) rotate(1deg); }86
30% { transform: translate(3px, 2px) rotate(0deg); }87
40% { transform: translate(1px, -1px) rotate(1deg); }88
50% { transform: translate(-1px, 2px) rotate(-1deg); }89
60% { transform: translate(-3px, 1px) rotate(0deg); }90
70% { transform: translate(3px, 1px) rotate(-1deg); }91
80% { transform: translate(-1px, -1px) rotate(1deg); }92
90% { transform: translate(1px, 2px) rotate(0deg); }93
100% { transform: translate(1px, -2px) rotate(-1deg); }94
}95
Advertisement
Answer
Change your CSS code for .image -like this:
JavaScript
1
8
1
.image1, .image2 {2
position: absolute; /* necessary for absolute position... dont use relative */3
right:0; /* two trees are on the right side */4
animation: shake .9s infinite /* shorthand animation property */5
}6
.image1{top:0}7
.image2{top:350}8
And, on small-screen devices, you can use this code (see below) to prevent images from going above the site content.
JavaScript
1
9
1
@media (max-width: 700px) {2
.image1,.image2 {3
position:relative; /* relative to the normal flow */4
top:0; /* to reset the .image2 top value */5
margin:auto; /* to center the images */6
display:block /* block images optional */7
}8
}9