done some responsivity on diagram

master
Pedram Keshavarzi 3 years ago
parent 9981702092
commit 1b1a6df045
  1. 23
      src/Components/HowWeWorkDiagram/index.css
  2. 3
      src/Components/productFeature/productFeature.css
  3. 9
      src/Containers/howDoWeWork/howWeWork.css

@ -3,35 +3,39 @@
.tree { .tree {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding: 5%;
justify-content: center; justify-content: center;
direction: ltr; direction: ltr;
float: left; float: left;
text-align: center;
} }
.tree span { .tree span {
color: #ccc; color: #ccc;
border-radius: 8px; border-radius: 8px;
padding: 0px 10px;
display: flex; display: flex;
margin: 70px 20px; margin: 70px 20px;
align-items: center; align-items: center;
position: relative; position: relative;
justify-content: center; justify-content: center;
line-height: 1.2; line-height: 1.2;
font-size:35%;
font-weight: bold;
} }
.p .parent{ .p .parent{
border:0; border:0;
background:none; background:none;
border-right:1px solid #1577F8; border-right:1px solid #1577F8;
border-radius: 0; border-radius: 0;
height: 205px; height: 185px;
align-items: center; align-items: center;
padding: 8px 20px; padding: 8px 20px;
padding-left: 0px; padding-left: 0px;
margin-left:0px; margin-left:0px;
font-size: 10px;
font-weight: bold;
} }
.p .UserReaction{ .p .UserReaction{
@ -50,7 +54,6 @@
transform: rotate(-45deg); transform: rotate(-45deg);
text-align: center; text-align: center;
margin: 0px; margin: 0px;
font-size: 10px;
color:white; color:white;
} }
.p .add{ .p .add{
@ -60,7 +63,7 @@
padding: 0; padding: 0;
border-radius: 50%; border-radius: 50%;
color:#1577F8; color:#1577F8;
font-size: 25px;
} }
.p .cp{ .p .cp{
background: rgba(0,0,0,0.1); background: rgba(0,0,0,0.1);
@ -68,8 +71,8 @@
box-shadow: 0px 0px 26px rgba(0,0,0,0.2); box-shadow: 0px 0px 26px rgba(0,0,0,0.2);
color:#333333; color:#333333;
padding:20px 30px; padding:20px 30px;
font-size: 12px;
border-radius: 7px; border-radius: 7px;
} }
.pCont{ .pCont{
background-color: rgba(32,100,155, 0.7); background-color: rgba(32,100,155, 0.7);
@ -78,7 +81,7 @@
border-radius: 7px; border-radius: 7px;
color:white; color:white;
font-weight: 200; font-weight: 200;
margin-left: -65px;
} }
.p .parent::after{ .p .parent::after{
content: ""; content: "";
@ -105,7 +108,7 @@
border-radius: 7px; border-radius: 7px;
padding:15px 30px; padding:15px 30px;
color:#333; color:#333;
font-size: 12px;
} }
.tree span:before { .tree span:before {
content: ""; content: "";

@ -2,7 +2,8 @@
display:flex; display:flex;
flex-wrap: wrap; flex-wrap: wrap;
width:30em; width:30em;
align-items: center;
justify-content: center;
} }
.ProductFeatures .feature{ .ProductFeatures .feature{
flex: 0 0 calc(33.333333% - 24px); flex: 0 0 calc(33.333333% - 24px);

@ -11,6 +11,13 @@
} }
.HowWeWork .diagrams{ .HowWeWork .diagrams{
display: flex;
direction: ltr;
justify-content: space-between;
align-items: center;
}
.HowWeWork .diagrams .HowWeWorkDiagram{
} }
Loading…
Cancel
Save