-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyles.css
111 lines (76 loc) · 2.57 KB
/
styles.css
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
/* css styles */
/* car wash 4 was table code/
/* Remove all horizontal lines in the table */
table {
border-collapse: collapse;
}
table th, table td {
border: none;
padding: 8px;
}
table tr {
border-bottom: none;
}
/* end css code for 4 carwash table code/
/* this is for the index.qmd file to have side by side in pc and top and bottom in mobile */
/* Flex container for responsive sections */
/* added code to use in the new index.qmd file so the pictures are limited to a certain lenght and width. */
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flex-item {
flex: 1 1 45%;
margin: 10px;
box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
text-align: center; /* Center the content */
}
.flex-item img {
max-width: 100%;
height: auto;
display: block; /* Ensures there's no extra space below the image */
}
@media (max-width: 768px) {
.flex-item {
flex: 1 1 100%;
}
}
/* this is the end code for the side by side code for the index.qmd file */
/* this code adds the bubbles imagine to the index file */
body {
background-image: url('Images/lightbluebubbles_background.jpg');
background-size: cover; /* Cover the entire viewport */
background-position: center; /* Center the background image */
background-repeat: no-repeat; /* Do not repeat the image */
background-attachment: fixed; /* Keep the background fixed during scrolling */
min-height: 100vh; /* Minimum height of 100% of the viewport */
}
/* end of code that adds bubbles imagine to index.qmd */
/* adding wider width to qmd files THIS CODE IS NO LONGER NEEDED*/
/* Custom width for the content */
.custom-width {
max-width: 1400px; /* Set to 9 inches @900px */
margin: 0 auto;
padding: 20px; /* Optional: add padding to the content */
box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
}
/* end of code for adding wider width */
/* This is for laundromat2.qmd and its for the scrollable images for the wash menu */
.scroll-container {
display: flex;
overflow-x: auto;
white-space: nowrap;
padding: 10px;
}
.scroll-container img {
flex: 0 0 auto;
margin-right: 10px;
width: 300px; /* Adjust width as necessary */
}
/* end of scrollable code for wash menu */
/* this is for the white table background for wash prices */
.wash-cycles-table table {
background-color: white; /* Ensures only the specified table has a white background */
}
/* end of css for white table background */