alicestrt/vvvw
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

made svg responsive

Browse Source
This commit is contained in:
alicestrt 2020-09-29 14:18:08 +02:00
parent 35f68ea4f0
commit 550eeaa373
2 changed files with 20 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
static/css/style.css
View File

@ -1,6 +1,6 @@
/* Everything*/
* {
border: 0px black solid;
border: 1px black solid;
}
/*Main areas*/
@ -29,23 +29,23 @@ max-height:500px;
/* circles */
#first_circle {
width: 80%;
height: 80%;
width: 100%;
height: 100%;
}
#second_circle {
width: 80%;
height: 80%;
width: 100%;
height: 100%;
}
@media all and (max-width: 250px) {
@media all and (max-width: 350px) {
#first_circle {
width: 4rem;
height: 4rem;
width: 100%;
height: 100%;
}
#second_circle {
width: 4rem;
height: 4rem;
width: 100%;
height: 100%;
}
}
draggable {

18
templates/hello.html
View File

@ -6,19 +6,21 @@
<!-- <div class="map_area">Map area<div id="circle-1" onclick="scrolldiv()"> -->
<div class="map_area">Map area
<div class="row">
<div class="col-md-1 col-sm-4">
<svg id="first_circle">
<circle cx="50" cy="50" r="2rem" stroke="green" stroke-width="4" fill="yellow" />
<div class="col-md-2 mx-auto">
<div id="first_circle">
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="2rem" stroke="black" stroke-width="2" fill="gray" />
<text x="50" y="50" text-anchor="middle">hello </text>
</svg>
</div>
</div>
<div class="col-md-1 col-sm-4">
<svg id="second_circle">
<circle cx="50" cy="50" r='2rem' stroke="red" stroke-width="2" fill="gray" />
<div class="col-md-2 mx-auto">
<div id="second_circle">
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r='2rem' stroke="black" stroke-width="2" fill="gray" />
<text x="50" y="50" text-anchor="middle">hello boys </text>
</svg>
</div>
</div>