RobsWorld/3D.css at main · makeouthillx32/RobsWorld · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/* 3D model-related styles */
#hero2 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 500px; /* Adjust height as needed */
    margin-top: -20px; /* Move the hero2 section up */
    position: relative; /* Add relative positioning */
}

.model-viewer-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Allow positioning within hero2 */
    overflow: hidden; /* Ensure the viewport does not overflow */
}

model-viewer {
    width: 100%;
    height: 100%;
    transform: translateY(-125px); /* Default value for smaller screens */
}

/* Adjust position for medium screens */
@media (min-width: 768px) {
    model-viewer {
        transform: translateY(-100px);
    }
}

/* Adjust position for large screens */
@media (min-width: 1024px) {
    model-viewer {
        transform: translateY(-50px);
    }
}