Prechádzať zdrojové kódy

adding responsive behavior to the css

BaumSplitter41 2 hodín pred
rodič
commit
631585aa40
1 zmenil súbory, kde vykonal 21 pridanie a 1 odobranie
  1. 21 1
      css/style.css

+ 21 - 1
css/style.css

@@ -8,7 +8,6 @@ body {
 }
 
 
-
 .main_container {
 	display: flex;
 	flex-direction: row;
@@ -16,6 +15,7 @@ body {
 	margin-left: 3%;
 	margin-right: 3%;
 	gap: 2%;
+	max-width: 100%;
 	/*border: 0.5px solid rgb(208, 160, 236);*/
 }
 
@@ -104,4 +104,24 @@ footer {
 	justify-content: center;
 	color: whitesmoke;
 
+}
+
+/*Media section*/
+@media (max-width: 700px) {
+	.text_container, .img_container {
+		flex-direction: column;		
+		flex: 100%;
+	}
+}
+
+@media (hover: hover) {
+	.text_container:hover {
+		transition-duration: 0.5s;
+  }
+}
+
+@media not all and (hover: hover) {
+  .text_container::after {
+    content: " (" attr(title) ")";
+  }
 }