Template:Etusivu/styles.css: Difference between revisions

From kubu
Jump to navigationJump to search
No edit summary
Tag: Reverted
No edit summary
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
body,html {background:red;}
.container {   
.container {   
   display: grid;
   display: grid;
Line 7: Line 6:
   grid-auto-flow: row;
   grid-auto-flow: row;
   grid-template-areas:
   grid-template-areas:
     "aloita kubunopeasti"
     "square1A square1B"
     "nayttelyt ."
     "square2A square2B"
     ". problems";
     "square3A square3B";
  width:100%;
}
}


.aloita { grid-area: aloita; }
.square1A { grid-area: square1A; }
.kubunopeasti { grid-area: kubunopeasti; }
.square1B { grid-area: square1B; }
.nayttelyt { grid-area: nayttelyt; }
.square2A { grid-area: square2A; }
.problems { grid-area: problems; }
.square2B { grid-area: square2B; }
.square3A { grid-area: square3A; }
.square3B { grid-area: square3B; }
.container > div {
.container > div {
background-color: #bfedff; /*#00b7ff40;*/
background-color: #bfedff; /*#00b7ff40;*/
border: 1px solid #00b7ff;
border: 1px solid #00b7ff;
border-radius: 10px;
border-radius: 10px;
padding: 1.5em;
padding: 1em;
padding-top: 0;
}
}
@media (max-width: 800px) {
@media (max-width: 900px) {
.container {
.container {
grid-template-columns: 1fr;
grid-template-columns: 1fr;
grid-template-areas:
grid-template-areas:
    "aloita"  
    "square1A"  
    "kubunopeasti"
    "square1B"
    "nayttelyt"
    "square2A"
    "problems";
    "square2B"
    "square3A"
    "square3B";
}
}
}
}

Latest revision as of 10:53, 5 August 2024

.container {  
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto auto auto;
  gap: 1em 1em;
  grid-auto-flow: row;
  grid-template-areas:
    "square1A square1B"
    "square2A square2B"
    "square3A square3B";
  width:100%;
}

.square1A { grid-area: square1A; }
.square1B  { grid-area: square1B; }
.square2A { grid-area: square2A; }
.square2B { grid-area: square2B; }
.square3A { grid-area: square3A; }
.square3B { grid-area: square3B; }
.container > div {
	background-color: #bfedff; /*#00b7ff40;*/
	border: 1px solid #00b7ff;
	border-radius: 10px;
	padding: 1em;
	padding-top: 0;
}
@media (max-width: 900px) {
	.container {
		grid-template-columns: 1fr;
		grid-template-areas:
	    "square1A" 
	    "square1B"
	    "square2A"
	    "square2B"
	    "square3A"
	    "square3B";
	}
}