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