right float of about picture responsive

This commit is contained in:
Lukas Heiligenbrunner 2020-03-17 22:50:13 +01:00
parent f1602b8e93
commit 8bd8985995
2 changed files with 19 additions and 5 deletions

View File

@ -49,12 +49,19 @@ body, html {
float: left;
}
.aboutPic {
.aboutPicContainer {
width: 60%;
height: 300px;
float: left;
}
#aboutPic {
float: right;
margin-top: 10%;
box-shadow: rgba(2, 12, 27, 0.7) 0px 10px 30px -15px;
height: 100%;
}
/* screen larger than 600px -- desktop */
@media screen and (min-width: 1201px) {
.tile {
@ -129,7 +136,7 @@ body, html {
width: 100%;
}
.aboutPic {
.aboutPicContainer {
width: 100%;
height: 150px;
}
@ -137,4 +144,11 @@ body, html {
#section2 {
height: 130%;
}
#aboutPic {
float: initial;
margin-left: auto;
margin-right: auto;
/* todo nof loating right in middle */
}
}

View File

@ -94,8 +94,8 @@
<li>OpenSCAD</li>
</ul>
</div>
<div class="aboutPic">
<img src="rsc/self4.jpg" height="100%" style="float:right; margin-top: 10%">
<div class="aboutPicContainer">
<img src="rsc/self4.jpg" id="aboutPic">
</div>
</div>
</div>