text-shadow stretching outside of div - html
So i have started to use this long text-shadow for a certain look that I like. The text-shadow stretches outside of its respective div element though. I am trying to figure out a way to contain this text-shadow inside of the div its contained in. here is my example:
CSS:
.first_shadow_header {
font-size: 56px;
color: #fff;
text-shadow: -2px 2px 0 #E53935,-4px 4px 0 #E53935,-6px 6px 0 #E53935,-8px 8px 0 #E53935,-10px 10px 0 #E53935,-12px 12px 0 #E53935,-14px 14px 0 #E53935,-16px 16px 0 #E53935,-18px 18px 0 #E53935,-20px 20px 0 #E53935,-22px 22px 0 #E53935,-24px 24px 0 #E53935,-26px 26px 0 #E53935,-28px 28px 0 #E53935,-30px 30px 0 #E53935,-32px 32px 0 #E53935,-34px 34px 0 #E53935,-36px 36px 0 #E53935,-38px 38px 0 #E53935,-40px 40px 0 #E53935,-42px 42px 0 #E53935,-44px 44px 0 #E53935,-46px 46px 0 #E53935,-48px 48px 0 #E53935,-50px 50px 0 #E53935,-52px 52px 0 #E53935,-54px 54px 0 #E53935,-56px 56px 0 #E53935,-58px 58px 0 #E53935,-60px 60px 0 #E53935,-62px 62px 0 #E53935,-64px 64px 0 #E53935,-66px 66px 0 #E53935,-68px 68px 0 #E53935,-70px 70px 0 #E53935,-72px 72px 0 #E53935,-74px 74px 0 #E53935,-76px 76px 0 #E53935,-78px 78px 0 #E53935,-80px 80px 0 #E53935,-82px 82px 0 #E53935,-84px 84px 0 #E53935,-86px 86px 0 #E53935,-88px 88px 0 #E53935,-90px 90px 0 #E53935,-92px 92px 0 #E53935,-94px 94px 0 #E53935,-96px 96px 0 #E53935,-98px 98px 0 #E53935,
-100px 100px 0 #E53935,-102px 102px 0 #E53935,-104px 104px 0 #E53935,-106px 106px 0 #E53935,-108px 108px 0 #E53935,-110px 110px 0 #E53935,-112px 112px 0 #E53935,-114px 114px 0 #E53935,-116px 116px 0 #E53935,-118px 118px 0 #E53935,-120px 120px 0 #E53935,-122px 122px 0 #E53935,-124px 124px 0 #E53935,-126px 126px 0 #E53935,-128px 128px 0 #E53935,-130px 130px 0 #E53935,-132px 132px 0 #E53935,-134px 134px 0 #E53935,-136px 136px 0 #E53935,-138px 138px 0 #E53935,-140px 140px 0 #E53935,-142px 142px 0 #E53935,-144px 144px 0 #E53935,-146px 146px 0 #E53935,-148px 148px 0 #E53935,-150px 150px 0 #E53935,-152px 152px 0 #E53935,-154px 154px 0 #E53935,-156px 156px 0 #E53935,-158px 158px 0 #E53935,-160px 160px 0 #E53935,-162px 162px 0 #E53935,-164px 164px 0 #E53935,-166px 166px 0 #E53935,-168px 168px 0 #E53935,-170px 170px 0 #E53935,-172px 172px 0 #E53935,-174px 174px 0 #E53935,-176px 176px 0 #E53935,-178px 178px 0 #E53935,-180px 180px 0 #E53935,-182px 182px 0 #E53935,-184px 184px 0 #E53935,-186px 186px 0 #E53935,-188px 188px 0 #E53935,-190px 190px 0 #E53935,-192px 192px 0 #E53935,-194px 194px 0 #E53935,-196px 196px 0 #E53935,-198px 198px 0 #E53935,
-200px 200px 0 #E53935,-202px 202px 0 #E53935,-204px 204px 0 #E53935,-206px 206px 0 #E53935,-208px 208px 0 #E53935,-210px 210px 0 #E53935,-212px 212px 0 #E53935,-214px 214px 0 #E53935,-216px 216px 0 #E53935,-218px 218px 0 #E53935,-220px 220px 0 #E53935,-222px 222px 0 #E53935,-224px 224px 0 #E53935,-226px 226px 0 #E53935,-228px 228px 0 #E53935,-230px 230px 0 #E53935,-232px 232px 0 #E53935,-234px 234px 0 #E53935,-236px 236px 0 #E53935,-238px 238px 0 #E53935,-240px 240px 0 #E53935,-242px 242px 0 #E53935,-244px 244px 0 #E53935,-246px 246px 0 #E53935,-248px 248px 0 #E53935,-250px 250px 0 #E53935,-252px 252px 0 #E53935,-254px 254px 0 #E53935,-256px 256px 0 #E53935,-258px 258px 0 #E53935,-260px 260px 0 #E53935,-262px 262px 0 #E53935,-264px 264px 0 #E53935,-266px 266px 0 #E53935,-268px 268px 0 #E53935,-270px 270px 0 #E53935,-272px 272px 0 #E53935,-274px 274px 0 #E53935,-276px 276px 0 #E53935,-278px 278px 0 #E53935,-280px 280px 0 #E53935,-282px 282px 0 #E53935,-284px 284px 0 #E53935,-286px 286px 0 #E53935,-288px 288px 0 #E53935,-290px 290px 0 #E53935,-292px 292px 0 #E53935,-294px 294px 0 #E53935,-296px 296px 0 #E53935,-298px 298px 0 #E53935,
-300px 300px 0 #E53935,-302px 302px 0 #E53935,-304px 304px 0 #E53935,-306px 306px 0 #E53935,-308px 308px 0 #E53935,-310px 310px 0 #E53935,-312px 312px 0 #E53935,-314px 314px 0 #E53935,-316px 316px 0 #E53935,-318px 318px 0 #E53935,-320px 320px 0 #E53935,-322px 322px 0 #E53935,-324px 324px 0 #E53935,-326px 326px 0 #E53935,-328px 328px 0 #E53935,-330px 330px 0 #E53935,-332px 332px 0 #E53935,-334px 334px 0 #E53935,-336px 336px 0 #E53935,-338px 338px 0 #E53935,-340px 340px 0 #E53935,-342px 342px 0 #E53935,-344px 344px 0 #E53935,-346px 346px 0 #E53935,-348px 348px 0 #E53935,-350px 350px 0 #E53935,-352px 352px 0 #E53935,-354px 354px 0 #E53935,-356px 356px 0 #E53935,-358px 358px 0 #E53935,-360px 360px 0 #E53935,-362px 362px 0 #E53935,-364px 364px 0 #E53935,-366px 366px 0 #E53935,-368px 368px 0 #E53935,-370px 370px 0 #E53935,-372px 372px 0 #E53935,-374px 374px 0 #E53935,-376px 376px 0 #E53935,-378px 378px 0 #E53935,-380px 380px 0 #E53935,-382px 382px 0 #E53935,-384px 384px 0 #E53935,-386px 386px 0 #E53935,-388px 388px 0 #E53935,-390px 390px 0 #E53935,-392px 392px 0 #E53935,-394px 394px 0 #E53935,-396px 396px 0 #E53935,-398px 398px 0 #E53935,
-400px 400px 0 #E53935,-402px 402px 0 #E53935,-404px 404px 0 #E53935,-406px 406px 0 #E53935,-408px 408px 0 #E53935,-410px 410px 0 #E53935,-412px 412px 0 #E53935,-414px 414px 0 #E53935,-416px 416px 0 #E53935,-418px 418px 0 #E53935,-420px 420px 0 #E53935,-422px 422px 0 #E53935,-424px 424px 0 #E53935,-426px 426px 0 #E53935,-428px 428px 0 #E53935,-430px 430px 0 #E53935,-432px 432px 0 #E53935,-434px 434px 0 #E53935,-436px 436px 0 #E53935,-438px 438px 0 #E53935,-440px 440px 0 #E53935,-442px 442px 0 #E53935,-444px 444px 0 #E53935,-446px 446px 0 #E53935,-448px 448px 0 #E53935,-450px 450px 0 #E53935,-452px 452px 0 #E53935,-454px 454px 0 #E53935,-456px 456px 0 #E53935,-458px 458px 0 #E53935,-460px 460px 0 #E53935,-462px 462px 0 #E53935,-464px 464px 0 #E53935,-466px 466px 0 #E53935,-468px 468px 0 #E53935,-470px 470px 0 #E53935,-472px 472px 0 #E53935,-474px 474px 0 #E53935,-476px 476px 0 #E53935,-478px 478px 0 #E53935,-480px 480px 0 #E53935,-482px 482px 0 #E53935,-484px 484px 0 #E53935,-486px 486px 0 #E53935,-488px 488px 0 #E53935,-490px 490px 0 #E53935,-492px 492px 0 #E53935,-494px 494px 0 #E53935,-496px 496px 0 #E53935,-498px 498px 0 #E53935,
-500px 500px 0 #E53935,-502px 502px 0 #E53935,-504px 504px 0 #E53935,-506px 506px 0 #E53935,-508px 508px 0 #E53935,-510px 510px 0 #E53935,-512px 512px 0 #E53935,-514px 514px 0 #E53935,-516px 516px 0 #E53935,-518px 518px 0 #E53935,-520px 520px 0 #E53935,-522px 522px 0 #E53935,-524px 524px 0 #E53935,-526px 526px 0 #E53935,-528px 528px 0 #E53935,-530px 530px 0 #E53935,-532px 532px 0 #E53935,-534px 534px 0 #E53935,-536px 536px 0 #E53935,-538px 538px 0 #E53935,-540px 540px 0 #E53935,-542px 542px 0 #E53935,-544px 544px 0 #E53935,-546px 546px 0 #E53935,-548px 548px 0 #E53935,-550px 550px 0 #E53935,-552px 552px 0 #E53935,-554px 554px 0 #E53935,-556px 556px 0 #E53935,-558px 558px 0 #E53935,-560px 560px 0 #E53935,-562px 562px 0 #E53935,-564px 564px 0 #E53935,-566px 566px 0 #E53935,-568px 568px 0 #E53935,-570px 570px 0 #E53935,-572px 572px 0 #E53935,-574px 574px 0 #E53935,-576px 576px 0 #E53935,-578px 578px 0 #E53935,-580px 580px 0 #E53935,-582px 582px 0 #E53935,-584px 584px 0 #E53935,-586px 586px 0 #E53935,-588px 588px 0 #E53935,-590px 590px 0 #E53935,-592px 592px 0 #E53935,-594px 594px 0 #E53935,-596px 596px 0 #E53935,-598px 598px 0 #E53935,
-600px 600px 0 #E53935,-602px 602px 0 #E53935,-604px 604px 0 #E53935,-606px 606px 0 #E53935,-608px 608px 0 #E53935,-610px 610px 0 #E53935,-612px 612px 0 #E53935,-614px 614px 0 #E53935,-616px 616px 0 #E53935,-618px 618px 0 #E53935,-620px 620px 0 #E53935,-622px 622px 0 #E53935,-624px 624px 0 #E53935,-626px 626px 0 #E53935,-628px 628px 0 #E53935,-630px 630px 0 #E53935,-632px 632px 0 #E53935,-634px 634px 0 #E53935,-636px 636px 0 #E53935,-638px 638px 0 #E53935,-640px 640px 0 #E53935,-642px 642px 0 #E53935,-644px 644px 0 #E53935,-646px 646px 0 #E53935,-648px 648px 0 #E53935,-650px 650px 0 #E53935,-652px 652px 0 #E53935,-654px 654px 0 #E53935,-656px 656px 0 #E53935,-658px 658px 0 #E53935,-660px 660px 0 #E53935,-662px 662px 0 #E53935,-664px 664px 0 #E53935,-666px 666px 0 #E53935,-668px 668px 0 #E53935,-670px 670px 0 #E53935,-672px 672px 0 #E53935,-674px 674px 0 #E53935,-676px 676px 0 #E53935,-678px 678px 0 #E53935,-680px 680px 0 #E53935,-682px 682px 0 #E53935,-684px 684px 0 #E53935,-686px 686px 0 #E53935,-688px 688px 0 #E53935,-690px 690px 0 #E53935,-692px 692px 0 #E53935,-694px 694px 0 #E53935,-696px 696px 0 #E53935,-698px 698px 0 #E53935,
-700px 700px 0 #E53935,-702px 702px 0 #E53935,-704px 704px 0 #E53935,-706px 706px 0 #E53935,-708px 708px 0 #E53935,-710px 710px 0 #E53935,-712px 712px 0 #E53935,-714px 714px 0 #E53935,-716px 716px 0 #E53935,-718px 718px 0 #E53935,-720px 720px 0 #E53935,-722px 722px 0 #E53935,-724px 724px 0 #E53935,-726px 726px 0 #E53935,-728px 728px 0 #E53935,-730px 730px 0 #E53935,-732px 732px 0 #E53935,-734px 734px 0 #E53935,-736px 736px 0 #E53935,-738px 738px 0 #E53935,-740px 740px 0 #E53935,-742px 742px 0 #E53935,-744px 744px 0 #E53935,-746px 746px 0 #E53935,-748px 748px 0 #E53935,-750px 750px 0 #E53935,-752px 752px 0 #E53935,-754px 754px 0 #E53935,-756px 756px 0 #E53935,-758px 758px 0 #E53935,-760px 760px 0 #E53935,-762px 762px 0 #E53935,-764px 764px 0 #E53935,-766px 766px 0 #E53935,-768px 768px 0 #E53935,-770px 770px 0 #E53935,-772px 772px 0 #E53935,-774px 774px 0 #E53935,-776px 776px 0 #E53935,-778px 778px 0 #E53935,-780px 780px 0 #E53935,-782px 782px 0 #E53935,-784px 784px 0 #E53935,-786px 786px 0 #E53935,-788px 788px 0 #E53935,-790px 790px 0 #E53935,-792px 792px 0 #E53935,-794px 794px 0 #E53935,-796px 796px 0 #E53935,-798px 798px 0 #E53935,
-800px 800px 0 #E53935,-802px 802px 0 #E53935,-804px 804px 0 #E53935,-806px 806px 0 #E53935,-808px 808px 0 #E53935,-810px 810px 0 #E53935,-812px 812px 0 #E53935,-814px 814px 0 #E53935,-816px 816px 0 #E53935,-818px 818px 0 #E53935,-820px 820px 0 #E53935,-822px 822px 0 #E53935,-824px 824px 0 #E53935,-826px 826px 0 #E53935,-828px 828px 0 #E53935,-830px 830px 0 #E53935,-832px 832px 0 #E53935,-834px 834px 0 #E53935,-836px 836px 0 #E53935,-838px 838px 0 #E53935,-840px 840px 0 #E53935,-842px 842px 0 #E53935,-844px 844px 0 #E53935,-846px 846px 0 #E53935,-848px 848px 0 #E53935,-850px 850px 0 #E53935,-852px 852px 0 #E53935,-854px 854px 0 #E53935,-856px 856px 0 #E53935,-858px 858px 0 #E53935,-860px 860px 0 #E53935,-862px 862px 0 #E53935,-864px 864px 0 #E53935,-866px 866px 0 #E53935,-868px 868px 0 #E53935,-870px 870px 0 #E53935,-872px 872px 0 #E53935,-874px 874px 0 #E53935,-876px 876px 0 #E53935,-878px 878px 0 #E53935,-880px 880px 0 #E53935,-882px 882px 0 #E53935,-884px 884px 0 #E53935,-886px 886px 0 #E53935,-888px 888px 0 #E53935,-890px 890px 0 #E53935,-892px 892px 0 #E53935,-894px 894px 0 #E53935,-896px 896px 0 #E53935,-898px 898px 0 #E53935,
-900px 900px 0 #E53935,-902px 902px 0 #E53935,-904px 904px 0 #E53935,-906px 906px 0 #E53935,-908px 908px 0 #E53935,-910px 910px 0 #E53935,-912px 912px 0 #E53935,-914px 914px 0 #E53935,-916px 916px 0 #E53935,-918px 918px 0 #E53935,-920px 920px 0 #E53935,-922px 922px 0 #E53935,-924px 924px 0 #E53935,-926px 926px 0 #E53935,-928px 928px 0 #E53935,-930px 930px 0 #E53935,-932px 932px 0 #E53935,-934px 934px 0 #E53935,-936px 936px 0 #E53935,-938px 938px 0 #E53935,-940px 940px 0 #E53935,-942px 942px 0 #E53935,-944px 944px 0 #E53935,-946px 946px 0 #E53935,-948px 948px 0 #E53935,-950px 950px 0 #E53935,-952px 952px 0 #E53935,-954px 954px 0 #E53935,-956px 956px 0 #E53935,-958px 958px 0 #E53935,-960px 960px 0 #E53935,-962px 962px 0 #E53935,-964px 964px 0 #E53935,-966px 966px 0 #E53935,-968px 968px 0 #E53935,-970px 970px 0 #E53935,-972px 972px 0 #E53935,-974px 974px 0 #E53935,-976px 976px 0 #E53935,-978px 978px 0 #E53935,-980px 980px 0 #E53935,-982px 982px 0 #E53935,-984px 984px 0 #E53935,-986px 986px 0 #E53935,-988px 988px 0 #E53935,-990px 990px 0 #E53935,-992px 992px 0 #E53935,-994px 994px 0 #E53935,-996px 996px 0 #E53935,-998px 998px 0 #E53935,
-1000px 1000px 0 #E53935;
}
I have two completely similiar divs that are both using this text shadow on the header, and the top shadowed header bleeds into the bottom div.
Here are the divs:
<div class="first_section">
<div class="first_section_container">
<h1 class="first_shadow_header">First Section</h1>
</div>
</div>
<div class="second_section">
<div class="second_section_container">
<h1 class="second_shadow_header">Second Section</h1>
</div>
</div>
Here is an image of what I am referring to:
As you can see the red shadow is overlapping the second section. I have tried setting z-index for the second section higher than the first section but that did not work. Any and all help is very appreciated. Thanks in advance.
If you set overflow:hidden; on each section it will fix it. :)
Related
My button is not moving centre of the page?
I have one page in that page left side bottom of the page one floating button is there i want to move that button left side centre of the page with fixed position ,i tried with marging-top but it's not working, can you please help me to achieve this thing
#cbtn{
position:fixed;
margin-top: -200px;
width:60px;
height:60px;
bottom:20px;
/* right:40px; */
background-color:#5468ff;
color:white;
border-radius:50px;
text-align:center;
box-shadow: 2px 2px 3px #999;
}
<table id="cbtn" >
<tr onclick="window.open('tel:7204968541');">
<td>
<a href="#" class="btn-xl" onclick="window.open('tel:7204968541');"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone" viewBox="0 0 16 16">
<path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z"/>
</svg></a>
</td>
</tr>
</table>
I used position:fixed;, top:50%; and transform: translateY(-50%);
I simplified the html by using a link tag.
I centered the icon with display:flex;, align-items:center; justify-content:center;
body {
height: 2000px;
}
.call {
width: 60px;
height: 60px;
background-color: #5468ff;
color: white;
border-radius: 50px;
text-align: center;
box-shadow: 2px 2px 3px #999;
position: fixed;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
}
<a href="tel:7204968541" class="call">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone" viewBox="0 0 16 16"><path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z"/></svg>
</a>
I am not sure if i understood you correctly, but here is an example on how you can center the button on the page.
You can give it a top: 50%. This will plage the button's left side on the center of the page.
Then we add transform: translateY(-50%) to move it left by 50% of its width, which makes it perfectly centered on the page
#cbtn {
position: fixed;
width: 60px;
height: 60px;
top: 50%;
transform: translateY(-50%);
background-color: #5468ff;
color: white;
border-radius: 50px;
text-align: center;
box-shadow: 2px 2px 3px #999;
}
<table id="cbtn">
<tr onclick="window.open('tel:7204968541');">
<td>
<a href="#" class="btn-xl" onclick="window.open('tel:7204968541');"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone" viewBox="0 0 16 16">
<path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z"/>
</svg></a>
</td>
</tr>
</table>
Your markup seems a bit strange.
maybe you could simple have a .... This will call the number when people click on it. no need to add extra markup and onclick events...
I think you have to use flex for this what you can do is... apply flex CSS to telephone's parent and write: display:flex; align-items:center; justify-content:center; this will work to make element center you can refer this link it will help you: https://www.geeksforgeeks.org/how-to-center-a-div-using-flexbox-property-of-css/
SVG floating out it's Anchor container
How can I fix the <a> and make it contain all the SVG icon.
and also plz plz, How to remove the underline area of the <a> element??
photo for illustration
a {
background-color: rgba(42, 165, 42, 0.596);
text-decoration: none;
display: inline-block;
}
svg {
background-color: rgba(165, 42, 42, 0.596);
height: 50px
}
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.28 16.28">
<path
d="M8.14 3.96a4.17 4.17 0 0 0-4.17 4.17 4.16 4.16 0 0 0 4.17 4.17 4.17 4.17 0 0 0 4.17-4.17A4.17 4.17 0 0 0 8.2 3.96zm0 6.88a2.71 2.71 0 1 1 0-5.42 2.71 2.71 0 0 1 2.71 2.71 2.72 2.72 0 0 1-2.71 2.72zm5.32-7a1 1 0 0 1-1.707.707 1 1 0 0 1 .707-1.707 1 1 0 0 1 1 1zm2.76 1a4.83 4.83 0 0 0-1.32-3.4A4.84 4.84 0 0 0 11.49.12a107.23 107.23 0 0 0-6.71 0 4.87 4.87 0 0 0-3.41 1.31A4.86 4.86 0 0 0 .05 4.84a107.55 107.55 0 0 0 0 6.72 4.86 4.86 0 0 0 1.32 3.41 4.79 4.79 0 0 0 3.41 1.23c1.34.08 5.37.08 6.71 0a4.79 4.79 0 0 0 3.41-1.3 4.86 4.86 0 0 0 1.3-3.41c.08-1.34.08-5.37 0-6.71zM14.48 13a2.76 2.76 0 0 1-1.54 1.55c-1.07.42-3.62.32-4.8.32s-3.73.1-4.8-.32A2.75 2.75 0 0 1 1.79 13c-.43-1.07-.33-3.62-.33-4.8s-.09-3.73.33-4.8a2.73 2.73 0 0 1 1.55-1.54c1.07-.43 3.61-.33 4.8-.33s3.73-.1 4.8.32a2.75 2.75 0 0 1 1.55 1.55c.42 1.07.32 3.62.32 4.8s.1 3.73-.33 4.8z"
/>
</svg>
</a>
The SVG icon is 50px X 50px, but since the a is usually a inline element it gives some extra space,
Just like a text which is an inline element, that gives space up, and down
This causes the browser to think that ,svg which is inside a is an inline element, and gives space.
To perfectly make the a element's width and height equal to svg
Add display: inline-flex to parent's(a) css
Add display: inline-table to child's(svg) css
Example snippet
a {
background-color: rgba(42, 165, 42, 0.596);
text-decoration: none;
display: inline-flex;
}
svg {
background-color: rgba(165, 42, 42, 0.596);
height: 50px;
display: inline-table;
}
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.28 16.28">
<path
d="M8.14 3.96a4.17 4.17 0 0 0-4.17 4.17 4.16 4.16 0 0 0 4.17 4.17 4.17 4.17 0 0 0 4.17-4.17A4.17 4.17 0 0 0 8.2 3.96zm0 6.88a2.71 2.71 0 1 1 0-5.42 2.71 2.71 0 0 1 2.71 2.71 2.72 2.72 0 0 1-2.71 2.72zm5.32-7a1 1 0 0 1-1.707.707 1 1 0 0 1 .707-1.707 1 1 0 0 1 1 1zm2.76 1a4.83 4.83 0 0 0-1.32-3.4A4.84 4.84 0 0 0 11.49.12a107.23 107.23 0 0 0-6.71 0 4.87 4.87 0 0 0-3.41 1.31A4.86 4.86 0 0 0 .05 4.84a107.55 107.55 0 0 0 0 6.72 4.86 4.86 0 0 0 1.32 3.41 4.79 4.79 0 0 0 3.41 1.23c1.34.08 5.37.08 6.71 0a4.79 4.79 0 0 0 3.41-1.3 4.86 4.86 0 0 0 1.3-3.41c.08-1.34.08-5.37 0-6.71zM14.48 13a2.76 2.76 0 0 1-1.54 1.55c-1.07.42-3.62.32-4.8.32s-3.73.1-4.8-.32A2.75 2.75 0 0 1 1.79 13c-.43-1.07-.33-3.62-.33-4.8s-.09-3.73.33-4.8a2.73 2.73 0 0 1 1.55-1.54c1.07-.43 3.61-.33 4.8-.33s3.73-.1 4.8.32a2.75 2.75 0 0 1 1.55 1.55c.42 1.07.32 3.62.32 4.8s.1 3.73-.33 4.8z"
/>
</svg>
</a>
Position the list of cards correctly below the web-page elements, clipping issue
I currently have the following web page which basically has a few div elements placed one after the other and are centered in the view of a mobile or a desktop and have appropriate media queries to alter the text size.
I recently got a requirement to add a list of horizontally scrolling cards below the current existing page and i tried doing so like follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<!-- Optional theme -->
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
html {
height: 100%
}
#mainbody {
width: 100%;
height: 100%;
}
#applink a {
display: block;
text-align: center;
background: #9FA8DA;
text-transform: uppercase;
text-decoration: none;
color: white;
padding: 10px;
border-color: white;
border-width: 3px;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.valign-center {
display: inline-flex;
vertical-align: middle;
align-items: center;
}
/* This is the new content added to style the cards*/
.card-block {
min-height: 150px;
min-width: 250px;
margin-right: 5px;
}
/*new content end*/
body {
text-align: center;
height: 100%;
min-height: 100%;
margin: 0;
background-color: #3f51b5;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23abeae8' fill-opacity='0.17'%3E%3Cpath d='M24.37 16c.2.65.39 1.32.54 2H21.17l1.17 2.34.45.9-.24.11V28a5 5 0 0 1-2.23 8.94l-.02.06a8 8 0 0 1-7.75 6h-20a8 8 0 0 1-7.74-6l-.02-.06A5 5 0 0 1-17.45 28v-6.76l-.79-1.58-.44-.9.9-.44.63-.32H-20a23.01 23.01 0 0 1 44.37-2zm-36.82 2a1 1 0 0 0-.44.1l-3.1 1.56.89 1.79 1.31-.66a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .86.02l2.88-1.27a3 3 0 0 1 2.43 0l2.88 1.27a1 1 0 0 0 .85-.02l3.1-1.55-.89-1.79-1.42.71a3 3 0 0 1-2.56.06l-2.77-1.23a1 1 0 0 0-.4-.09h-.01a1 1 0 0 0-.4.09l-2.78 1.23a3 3 0 0 1-2.56-.06l-2.3-1.15a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1L.9 19.22a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01zm0-2h-4.9a21.01 21.01 0 0 1 39.61 0h-2.09l-.06-.13-.26.13h-32.31zm30.35 7.68l1.36-.68h1.3v2h-36v-1.15l.34-.17 1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0L2.26 23h2.59l1.36.68a3 3 0 0 0 2.56.06l1.67-.74h3.23l1.67.74a3 3 0 0 0 2.56-.06zM-13.82 27l16.37 4.91L18.93 27h-32.75zm-.63 2h.34l16.66 5 16.67-5h.33a3 3 0 1 1 0 6h-34a3 3 0 1 1 0-6zm1.35 8a6 6 0 0 0 5.65 4h20a6 6 0 0 0 5.66-4H-13.1z'/%3E%3Cpath id='path6_fill-copy' d='M284.37 16c.2.65.39 1.32.54 2H281.17l1.17 2.34.45.9-.24.11V28a5 5 0 0 1-2.23 8.94l-.02.06a8 8 0 0 1-7.75 6h-20a8 8 0 0 1-7.74-6l-.02-.06a5 5 0 0 1-2.24-8.94v-6.76l-.79-1.58-.44-.9.9-.44.63-.32H240a23.01 23.01 0 0 1 44.37-2zm-36.82 2a1 1 0 0 0-.44.1l-3.1 1.56.89 1.79 1.31-.66a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .86.02l2.88-1.27a3 3 0 0 1 2.43 0l2.88 1.27a1 1 0 0 0 .85-.02l3.1-1.55-.89-1.79-1.42.71a3 3 0 0 1-2.56.06l-2.77-1.23a1 1 0 0 0-.4-.09h-.01a1 1 0 0 0-.4.09l-2.78 1.23a3 3 0 0 1-2.56-.06l-2.3-1.15a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01zm0-2h-4.9a21.01 21.01 0 0 1 39.61 0h-2.09l-.06-.13-.26.13h-32.31zm30.35 7.68l1.36-.68h1.3v2h-36v-1.15l.34-.17 1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.56.06l1.67-.74h3.23l1.67.74a3 3 0 0 0 2.56-.06zM246.18 27l16.37 4.91L278.93 27h-32.75zm-.63 2h.34l16.66 5 16.67-5h.33a3 3 0 1 1 0 6h-34a3 3 0 1 1 0-6zm1.35 8a6 6 0 0 0 5.65 4h20a6 6 0 0 0 5.66-4H246.9z'/%3E%3Cpath d='M159.5 21.02A9 9 0 0 0 151 15h-42a9 9 0 0 0-8.5 6.02 6 6 0 0 0 .02 11.96A8.99 8.99 0 0 0 109 45h42a9 9 0 0 0 8.48-12.02 6 6 0 0 0 .02-11.96zM151 17h-42a7 7 0 0 0-6.33 4h54.66a7 7 0 0 0-6.33-4zm-9.34 26a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-4.34a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-4.34a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-7a7 7 0 1 1 0-14h42a7 7 0 1 1 0 14h-9.34zM109 27a9 9 0 0 0-7.48 4H101a4 4 0 1 1 0-8h58a4 4 0 0 1 0 8h-.52a9 9 0 0 0-7.48-4h-42z'/%3E%3Cpath d='M39 115a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm6-8a6 6 0 1 1-12 0 6 6 0 0 1 12 0zm-3-29v-2h8v-6H40a4 4 0 0 0-4 4v10H22l-1.33 4-.67 2h2.19L26 130h26l3.81-40H58l-.67-2L56 84H42v-6zm-4-4v10h2V74h8v-2h-8a2 2 0 0 0-2 2zm2 12h14.56l.67 2H22.77l.67-2H40zm13.8 4H24.2l3.62 38h22.36l3.62-38z'/%3E%3Cpath d='M129 92h-6v4h-6v4h-6v14h-3l.24 2 3.76 32h36l3.76-32 .24-2h-3v-14h-6v-4h-6v-4h-8zm18 22v-12h-4v4h3v8h1zm-3 0v-6h-4v6h4zm-6 6v-16h-4v19.17c1.6-.7 2.97-1.8 4-3.17zm-6 3.8V100h-4v23.8a10.04 10.04 0 0 0 4 0zm-6-.63V104h-4v16a10.04 10.04 0 0 0 4 3.17zm-6-9.17v-6h-4v6h4zm-6 0v-8h3v-4h-4v12h1zm27-12v-4h-4v4h3v4h1v-4zm-6 0v-8h-4v4h3v4h1zm-6-4v-4h-4v8h1v-4h3zm-6 4v-4h-4v8h1v-4h3zm7 24a12 12 0 0 0 11.83-10h7.92l-3.53 30h-32.44l-3.53-30h7.92A12 12 0 0 0 130 126z'/%3E%3Cpath d='M212 86v2h-4v-2h4zm4 0h-2v2h2v-2zm-20 0v.1a5 5 0 0 0-.56 9.65l.06.25 1.12 4.48a2 2 0 0 0 1.94 1.52h.01l7.02 24.55a2 2 0 0 0 1.92 1.45h4.98a2 2 0 0 0 1.92-1.45l7.02-24.55a2 2 0 0 0 1.95-1.52L224.5 96l.06-.25a5 5 0 0 0-.56-9.65V86a14 14 0 0 0-28 0zm4 0h6v2h-9a3 3 0 1 0 0 6H223a3 3 0 1 0 0-6H220v-2h2a12 12 0 1 0-24 0h2zm-1.44 14l-1-4h24.88l-1 4h-22.88zm8.95 26l-6.86-24h18.7l-6.86 24h-4.98zM150 242a22 22 0 1 0 0-44 22 22 0 0 0 0 44zm24-22a24 24 0 1 1-48 0 24 24 0 0 1 48 0zm-28.38 17.73l2.04-.87a6 6 0 0 1 4.68 0l2.04.87a2 2 0 0 0 2.5-.82l1.14-1.9a6 6 0 0 1 3.79-2.75l2.15-.5a2 2 0 0 0 1.54-2.12l-.19-2.2a6 6 0 0 1 1.45-4.46l1.45-1.67a2 2 0 0 0 0-2.62l-1.45-1.67a6 6 0 0 1-1.45-4.46l.2-2.2a2 2 0 0 0-1.55-2.13l-2.15-.5a6 6 0 0 1-3.8-2.75l-1.13-1.9a2 2 0 0 0-2.5-.8l-2.04.86a6 6 0 0 1-4.68 0l-2.04-.87a2 2 0 0 0-2.5.82l-1.14 1.9a6 6 0 0 1-3.79 2.75l-2.15.5a2 2 0 0 0-1.54 2.12l.19 2.2a6 6 0 0 1-1.45 4.46l-1.45 1.67a2 2 0 0 0 0 2.62l1.45 1.67a6 6 0 0 1 1.45 4.46l-.2 2.2a2 2 0 0 0 1.55 2.13l2.15.5a6 6 0 0 1 3.8 2.75l1.13 1.9a2 2 0 0 0 2.5.8zm2.82.97a4 4 0 0 1 3.12 0l2.04.87a4 4 0 0 0 4.99-1.62l1.14-1.9a4 4 0 0 1 2.53-1.84l2.15-.5a4 4 0 0 0 3.09-4.24l-.2-2.2a4 4 0 0 1 .97-2.98l1.45-1.67a4 4 0 0 0 0-5.24l-1.45-1.67a4 4 0 0 1-.97-2.97l.2-2.2a4 4 0 0 0-3.09-4.25l-2.15-.5a4 4 0 0 1-2.53-1.84l-1.14-1.9a4 4 0 0 0-5-1.62l-2.03.87a4 4 0 0 1-3.12 0l-2.04-.87a4 4 0 0 0-4.99 1.62l-1.14 1.9a4 4 0 0 1-2.53 1.84l-2.15.5a4 4 0 0 0-3.09 4.24l.2 2.2a4 4 0 0 1-.97 2.98l-1.45 1.67a4 4 0 0 0 0 5.24l1.45 1.67a4 4 0 0 1 .97 2.97l-.2 2.2a4 4 0 0 0 3.09 4.25l2.15.5a4 4 0 0 1 2.53 1.84l1.14 1.9a4 4 0 0 0 5 1.62l2.03-.87zM152 207a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm6 2a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-11 1a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-6 0a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm3-5a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-8 8a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm3 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm0 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4 7a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm5-2a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm5 4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4-6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm6-4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-4-3a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4-3a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-5-4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-24 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm16 5a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm7-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0zm86-29a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm19 9a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-14 5a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-25 1a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm5 4a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm9 0a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm15 1a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm12-2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-11-14a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-19 0a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm6 5a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-25 15c0-.47.01-.94.03-1.4a5 5 0 0 1-1.7-8 3.99 3.99 0 0 1 1.88-5.18 5 5 0 0 1 3.4-6.22 3 3 0 0 1 1.46-1.05 5 5 0 0 1 7.76-3.27A30.86 30.86 0 0 1 246 184c6.79 0 13.06 2.18 18.17 5.88a5 5 0 0 1 7.76 3.27 3 3 0 0 1 1.47 1.05 5 5 0 0 1 3.4 6.22 4 4 0 0 1 1.87 5.18 4.98 4.98 0 0 1-1.7 8c.02.46.03.93.03 1.4v1h-62v-1zm.83-7.17a30.9 30.9 0 0 0-.62 3.57 3 3 0 0 1-.61-4.2c.37.28.78.49 1.23.63zm1.49-4.61c-.36.87-.68 1.76-.96 2.68a2 2 0 0 1-.21-3.71c.33.4.73.75 1.17 1.03zm2.32-4.54c-.54.86-1.03 1.76-1.49 2.68a3 3 0 0 1-.07-4.67 3 3 0 0 0 1.56 1.99zm1.14-1.7c.35-.5.72-.98 1.1-1.46a1 1 0 1 0-1.1 1.45zm5.34-5.77c-1.03.86-2 1.79-2.9 2.77a3 3 0 0 0-1.11-.77 3 3 0 0 1 4-2zm42.66 2.77c-.9-.98-1.87-1.9-2.9-2.77a3 3 0 0 1 4.01 2 3 3 0 0 0-1.1.77zm1.34 1.54c.38.48.75.96 1.1 1.45a1 1 0 1 0-1.1-1.45zm3.73 5.84c-.46-.92-.95-1.82-1.5-2.68a3 3 0 0 0 1.57-1.99 3 3 0 0 1-.07 4.67zm1.8 4.53c-.29-.9-.6-1.8-.97-2.67.44-.28.84-.63 1.17-1.03a2 2 0 0 1-.2 3.7zm1.14 5.51c-.14-1.21-.35-2.4-.62-3.57.45-.14.86-.35 1.23-.63a2.99 2.99 0 0 1-.6 4.2zM275 214a29 29 0 0 0-57.97 0h57.96zM72.33 198.12c-.21-.32-.34-.7-.34-1.12v-12h-2v12a4.01 4.01 0 0 0 7.09 2.54c.57-.69.91-1.57.91-2.54v-12h-2v12a1.99 1.99 0 0 1-2 2 2 2 0 0 1-1.66-.88zM75 176c.38 0 .74-.04 1.1-.12a4 4 0 0 0 6.19 2.4A13.94 13.94 0 0 1 84 185v24a6 6 0 0 1-6 6h-3v9a5 5 0 1 1-10 0v-9h-3a6 6 0 0 1-6-6v-24a14 14 0 0 1 14-14 5 5 0 0 0 5 5zm-17 15v12a1.99 1.99 0 0 0 1.22 1.84 2 2 0 0 0 2.44-.72c.21-.32.34-.7.34-1.12v-12h2v12a3.98 3.98 0 0 1-5.35 3.77 3.98 3.98 0 0 1-.65-.3V209a4 4 0 0 0 4 4h16a4 4 0 0 0 4-4v-24c.01-1.53-.23-2.88-.72-4.17-.43.1-.87.16-1.28.17a6 6 0 0 1-5.2-3 7 7 0 0 1-6.47-4.88A12 12 0 0 0 58 185v6zm9 24v9a3 3 0 1 0 6 0v-9h-6z'/%3E%3Cpath d='M-17 191a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm19 9a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2H3a1 1 0 0 1-1-1zm-14 5a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-25 1a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm5 4a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm9 0a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm15 1a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm12-2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2H4zm-11-14a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-19 0a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm6 5a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-25 15c0-.47.01-.94.03-1.4a5 5 0 0 1-1.7-8 3.99 3.99 0 0 1 1.88-5.18 5 5 0 0 1 3.4-6.22 3 3 0 0 1 1.46-1.05 5 5 0 0 1 7.76-3.27A30.86 30.86 0 0 1-14 184c6.79 0 13.06 2.18 18.17 5.88a5 5 0 0 1 7.76 3.27 3 3 0 0 1 1.47 1.05 5 5 0 0 1 3.4 6.22 4 4 0 0 1 1.87 5.18 4.98 4.98 0 0 1-1.7 8c.02.46.03.93.03 1.4v1h-62v-1zm.83-7.17a30.9 30.9 0 0 0-.62 3.57 3 3 0 0 1-.61-4.2c.37.28.78.49 1.23.63zm1.49-4.61c-.36.87-.68 1.76-.96 2.68a2 2 0 0 1-.21-3.71c.33.4.73.75 1.17 1.03zm2.32-4.54c-.54.86-1.03 1.76-1.49 2.68a3 3 0 0 1-.07-4.67 3 3 0 0 0 1.56 1.99zm1.14-1.7c.35-.5.72-.98 1.1-1.46a1 1 0 1 0-1.1 1.45zm5.34-5.77c-1.03.86-2 1.79-2.9 2.77a3 3 0 0 0-1.11-.77 3 3 0 0 1 4-2zm42.66 2.77c-.9-.98-1.87-1.9-2.9-2.77a3 3 0 0 1 4.01 2 3 3 0 0 0-1.1.77zm1.34 1.54c.38.48.75.96 1.1 1.45a1 1 0 1 0-1.1-1.45zm3.73 5.84c-.46-.92-.95-1.82-1.5-2.68a3 3 0 0 0 1.57-1.99 3 3 0 0 1-.07 4.67zm1.8 4.53c-.29-.9-.6-1.8-.97-2.67.44-.28.84-.63 1.17-1.03a2 2 0 0 1-.2 3.7zm1.14 5.51c-.14-1.21-.35-2.4-.62-3.57.45-.14.86-.35 1.23-.63a2.99 2.99 0 0 1-.6 4.2zM15 214a29 29 0 0 0-57.97 0h57.96z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
/*background-size:100%;
background-repeat: no-repeat;
background-image: -webkit-linear-gradient(indigo, violet);
background-image: -o-linear-gradient(indigo, violet);
background-image: -moz-linear-gradient(indigo, violet);
background: linear-gradient(indigo, violet);
background-attachment: scroll;*/
}
#-webkit-keyframes blinkertext {
from {
opacity: 1.0;
}
to {
opacity: 0.0;
}
}
.blinktext {
margin-top: 20px;
-webkit-animation-name: blinkertext;
-webkit-animation-duration: 0.6s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-direction: alternate;
}
h4 {
color: white;
font-weight: bold;
-webkit-font-smoothing: subpixel-antialiased;
}
p {
color: white;
font-weight: bold;
-webkit-font-smoothing: subpixel-antialiased;
}
div {
color: white;
font-weight: bold;
-webkit-font-smoothing: subpixel-antialiased;
}
.wrapper {
position: absolute;
left: 50%;
top: 50%;
margin-bottom: 20px;
}
.relative {
position: relative;
margin-top: 20px;
margin-bottom: 20px;
}
.centered {
/*position: fixed;
margin: 0 auto;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -moz-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);*/
position: relative;
left: -50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%, -50%);
transform: translateY(-50%);
}
#keyframes blink {
/**
* At the start of the animation the dot
* has an opacity of .2
*/
0% {
opacity: .2;
}
/**
* At 20% the dot is fully visible and
* then fades out slowly
*/
20% {
opacity: 1;
}
/**
* Until it reaches an opacity of .2 and
* the animation can start again
*/
100% {
opacity: .2;
}
}
.loading span {
/**
* Use the blink animation, which is defined above
*/
animation-name: blink;
/**
* The animation should take 1.4 seconds
*/
animation-duration: 1.4s;
/**
* It will repeat itself forever
*/
animation-iteration-count: infinite;
/**
* This makes sure that the starting style (opacity: .2)
* of the animation is applied before the animation starts.
* Otherwise we would see a short flash or would have
* to set the default styling of the dots to the same
* as the animation. Same applies for the ending styles.
*/
animation-fill-mode: both;
}
.loading span:nth-child(2) {
/**
* Starts the animation of the third dot
* with a delay of .2s, otherwise all dots
* would animate at the same time
*/
animation-delay: .2s;
}
.loading span:nth-child(3) {
/**
* Starts the animation of the third dot
* with a delay of .4s, otherwise all dots
* would animate at the same time
*/
animation-delay: .4s;
}
#media only screen and (min-width: 320px) {
/*Debug which query gets fired by uncommenting this
body::before {
content: "media query (320+) fired";
font-weight: bold;
display: block;
text-align: center;
background: rgba(255, 255, 0, 0.9);
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 99;
}*/
h4 {
font-size: 11px
}
h6 {
font-size: 9px
}
.material-icons {
font-size: 11px
}
#disclaimer .material-icons {
font-size: 9px;
display: inline-flex;
vertical-align: middle;
align-items: center;
}
#turnDisclaimerPartySize {
font-size: 9px
}
#positionWrapper {
font-size: 11px
}
#timeWrapper {
font-size: 11px
}
}
/* Extra Small Devices, Phones */
#media only screen and (min-width: 480px) {
/*body::before {
content: "media query (480+) fired";
font-weight: bold;
display: block;
text-align: center;
background: rgba(255, 255, 0, 0.9);
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 99;
}*/
h4 {
font-size: 13px
}
h6 {
font-size: 11px
}
.material-icons {
font-size: 13px
}
#disclaimer .material-icons {
font-size: 11px;
display: inline-flex;
vertical-align: middle;
align-items: center;
}
#turnDisclaimerPartySize {
font-size: 11px
}
#positionWrapper {
font-size: 13px
}
#timeWrapper {
font-size: 13px
}
}
/* Small Devices, Tablets */
#media only screen and (min-width: 768px) {
/*body::before {
content: "media query (768+) fired";
font-weight: bold;
display: block;
text-align: center;
background: rgba(255, 255, 0, 0.9);
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 99;
}*/
h4 {
font-size: 15px
}
h6 {
font-size: 13px
}
.material-icons {
font-size: 15px
}
#disclaimer .material-icons {
font-size: 13px;
display: inline-flex;
vertical-align: middle;
align-items: center;
}
#turnDisclaimerPartySize {
font-size: 13px
}
#positionWrapper {
font-size: 15px
}
#timeWrapper {
font-size: 15px
}
}
/* Medium Devices, Desktops */
#media only screen and (min-width: 992px) {
/*body::before {
content: "media query (992+) fired";
font-weight: bold;
display: block;
text-align: center;
background: rgba(255, 255, 0, 0.9);
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 99;
}*/
h4 {
font-size: 17px
}
h6 {
font-size: 15px
}
.material-icons {
font-size: 17px
}
#disclaimer .material-icons {
font-size: 15px;
display: inline-flex;
vertical-align: middle;
align-items: center;
}
#turnDisclaimerPartySize {
font-size: 15px
}
#positionWrapper {
font-size: 17px
}
#timeWrapper {
font-size: 17px
}
}
/* Large Devices, Wide Screens */
#media only screen and (min-width: 1200px) {
/*body::before {
content: "media query (1200+) fired";
font-weight: bold;
display: block;
text-align: center;
background: rgba(255, 255, 0, 0.9);
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 99;
}*/
h4 {
font-size: 19px
}
h6 {
font-size: 17px
}
.material-icons {
font-size: 19px
}
#disclaimer .material-icons {
font-size: 17px;
display: inline-flex;
vertical-align: middle;
align-items: center;
}
#turnDisclaimerPartySize {
font-size: 17px
}
#positionWrapper {
font-size: 19px
}
#timeWrapper {
font-size: 19px
}
}
</style>
<script src="https://www.gstatic.com/firebasejs/4.2.0/firebase.js"></script>
<script>
// Initialize Firebase
function addZeroToHourOrMinute(hourOrMinuteValue) {
return (hourOrMinuteValue < 10 ? '0' + hourOrMinuteValue : '' + hourOrMinuteValue);
}
function addAmPmNotation(hour) {
return (hour < 12 ? "AM" : "PM");
}
function initialiseFirebaseAndAttachListener() {
//Code which writes data to timtTillTurn and positionInList spans
//Long and unnecessary for the cosmetic changes
}
</script>
<title>Foodini Waitlist View</title>
</head>
<body onload="initialiseFirebaseAndAttachListener()">
<div class="container-fluid" id="mainbody">
<div class="wrapper">
<div class="centered" align="center">
<!-- Image logo text was created in Pacifico font -->
<img src="/images/foodini_text_logo.png" class="img-responsive" alt="Foodini">
<div align="center">
<h4>YOUR CURRENT POSITION IS:</h4>
</div>
<div id="positionWrapper" align="center" class="valign-center">
<i class="material-icons">person</i>
<span id="positionInList" style="margin-left:5px;">
<h4>
<span class="loading">Loading
<span>.</span>
<span>.</span>
<span>.</span>
</h4>
</span>
</div>
<div id="timeDiv" align="center">
<h4>YOUR TURN SHOULD COME BY:</h4>
</div>
<div id="timeWrapper" align="center" class="valign-center">
<i class="material-icons">schedule</i>
<span id="timeTillTurn" style="margin-left:5px;">
<h4>
<span class="loading">Loading
<span>.</span>
<span>.</span>
<span>.</span>
</h4>
</span>
</div>
<div id="disclaimer" align="center" hidden>
<h6>
<i class="material-icons">info_outline</i> The restaurant may overlook your turn for an empty table of size
<span id="turnDisclaimerPartySize">
</span> or more.</h6>
</div>
<div align="center" class="blinktext" class="h4">
<h6>This page refreshes on it's own</h6>
</div>
<div id="applink" style="margin-top:10px; margin-bottom:20px; max-width: 300px auto 16px; padding: 5px 10px; border-radius: 3px;"
align="center">
<!-- DO NOT UNCOMMENT THIS P TAG <p>Install our app now</p> -->
<!-- ADD THE HREF BACK WHEN THE LINK SHOULD BE ACTIVE href="https://play.google.com/store/apps/details?id=com.foodini.waitlist.katana" -->
<a>Coming-Soon</a>
</div>
<div class="container-fluid">
<--This is the only new part in the original page-->
<div class="d-flex flex-row flex-nowrap">
<div class="card card-block">Card</div>
<div class="card card-block">Card</div>
<div class="card card-block">Card</div>
<div class="card card-block">Card</div>
</div>
</div>
</div>
</div>
</div>
Now the cards do appear below the wrapper div, they get clipped on the left side completely. And there's no way to scroll to the clipped part.
Also if i try putting the div of the cards outisde the wrapper div, It gets randomly shown in the top part of the screen above the rest of the content. Can some one guide me as to how i should position the card list which can also increase in size below the current elements (the page excluding the card div) while not clipping it.
Link to the changed page to view
You can view it on a desktop and it will look fine, check it on a mobile and you will see it clipped
Card list are cropped because of flex-wrap: nowrap property, you can read about it here. You need to use flex-wrap: wrap instead. In your example you need to change flex-nowrap class from your d-flex element (cards parent) to flex-wrap class. Update. Also I recommend to you this list of actions: Remove position: absolute; left: 50%; top: 50%; from .wrapper element. Remove left: -50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%, -50%) transform: translateY(-50%); from .centered element. Add justify-content: center; to .d-flex and #offers elements.
SVG not rendering only in in Safari (v10)
I have an SVG file (source below) which I tried to use in 2 ways on my website:
(1) As an image
<img src="/images/icons/play-button.svg">
(1) As abackground image
<div class="play-button"></div>
and CSS:
.play-button {
background: url('/images/icons/play-button.svg') no-repeat 0 0;
background-size: 196px 96px;
width: 196px;
height: 96px;
}
In any of the cases above, the SVG is not rendered in Safari 10 (both on a Mac and an iPad). Other browsers (Chrome, Firefox, IE) render the image correctly.
Also, I tried using other SVGs which worked just fine. The difference between the failng SVG and the other ones is the the former has text transformed to paths, but I'm not sure whether that's a real problem.
What might be the reason of Safari failing to render the image?
The SVG source:
<svg xmlns="http://www.w3.org/2000/svg" width="196" height="96" viewBox="0 0 196 96">
<g fill="#FFF" fill-rule="evenodd" style="mix-blend-mode:darken">
<path fill-rule="nonzero" d="M94.89 62.883s-.146 7.214-2.024 10.59c-2.349 4.388-6.074 6.2-7.706 6.854-.547.183-1.107.387-1.671.574l-.005-.017c-.74.271-1.58.243-2.306-.177-1.326-.765-1.782-2.468-1.012-3.777a2.7 2.7 0 0 1 1.504-1.198l-.009-.034c.084-.022.181-.066.265-.089 1.355-.543 4.402-1.378 6.34-5.005 1.549-2.783.894-7.993.894-7.993s-.873-6.09-2.45-11.975l-2.205-8.228c-1.58-5.902-3.866-11.596-3.866-11.596s-2.037-4.84-4.77-6.475c-3.492-2.172-6.549-1.372-7.993-1.165-10.19 1.899-27.236 6.466-27.236 6.466s-17.047 4.568-26.846 7.989c-1.355.543-4.402 1.378-6.34 5.006-1.549 2.782-.91 7.996-.91 7.996s.872 6.091 2.45 11.976l2.204 8.228c1.581 5.901 3.866 11.596 3.866 11.596s2.038 4.84 4.77 6.474c3.492 2.173 7.044 1.131 8.727 1.005 5.882-.98 26.536-6.315 26.536-6.315a2.801 2.801 0 0 1 3.42 1.975 2.801 2.801 0 0 1-1.974 3.42.384.384 0 0 1-.14.02c-1.707.44-21.325 5.461-28.11 6.575-2.022.144-6.754.761-10.986-1.882-3.315-1.985-7.03-8.164-7.03-8.164S7.87 80.001 5.956 72.852l-2.517-9.391C1.53 56.328.834 50.298.834 50.298s.16-7.163 2.037-10.54c2.332-4.383 6.065-6.233 7.697-6.887 11.833-4.128 28.61-8.624 28.61-8.624l.033-.009s16.777-4.495 29.089-6.836c1.74-.25 5.88-.51 10.108 2.116 3.315 1.985 7.039 8.126 7.039 8.126s2.41 5.553 4.325 12.702l2.516 9.391C94.2 56.87 94.89 62.883 94.89 62.883zM65.887 80.702a2.801 2.801 0 0 1 3.42 1.975 2.801 2.801 0 0 1-1.974 3.42 2.801 2.801 0 0 1-3.42-1.974 2.801 2.801 0 0 1 1.974-3.421zM50.132 70.123l-.012.021a2.78 2.78 0 0 1-1.262.754 2.764 2.764 0 0 1-3.378-1.95 2.734 2.734 0 0 1 .806-2.728L58.079 55.2s-.038-.009-.022-.013a1.38 1.38 0 0 0 .434-1.417 1.372 1.372 0 0 0-.965-.97l-18.41-4.302a1.255 1.255 0 0 0-.627.023 1.38 1.38 0 0 0-.993 1.622l4.472 16.692-.033.009.009.034a2.801 2.801 0 0 1-1.975 3.42 2.801 2.801 0 0 1-3.42-1.975L31.514 49.54a5.692 5.692 0 0 1 4.024-6.97 5.616 5.616 0 0 1 3.045.034c.038.008.055.004.072 0l21.488 5.735c.451.132.894.302 1.322.55a5.594 5.594 0 0 1 2.046 7.637 5.86 5.86 0 0 1-.799 1.064L50.237 70.04a.851.851 0 0 0-.105.083z"/>
<path d="M96.976 18.137a1.945 1.945 0 0 0-.856-.367 2.159 2.159 0 0 0-.867.059 1.888 1.888 0 0 0-.737.371c-.202.17-.357.387-.463.65a2.443 2.443 0 0 0-.155.936c.003.361.065.77.188 1.23.125.463.267.846.428 1.148.161.302.338.536.532.702.194.166.403.267.628.304.225.036.461.021.709-.045.396-.106.712-.28.946-.519.234-.24.434-.544.6-.914l-.953-3.555zm.414-6.09l3.077 11.483-1.167.312c-.253.068-.444-.005-.573-.22l-.367-.72c-.221.45-.509.845-.863 1.183-.354.338-.806.58-1.358.728a2.716 2.716 0 0 1-1.262.049 2.745 2.745 0 0 1-1.141-.535c-.352-.273-.667-.643-.944-1.11-.277-.467-.502-1.025-.676-1.674a5.595 5.595 0 0 1-.2-1.702 4.127 4.127 0 0 1 .336-1.498c.2-.451.48-.837.841-1.157a3.21 3.21 0 0 1 1.323-.69c.443-.119.84-.15 1.192-.096.351.055.682.168.993.339l-1.12-4.18 1.909-.512zm8.243 6.47c-.544.174-.995.346-1.352.516-.358.17-.635.34-.833.51-.198.168-.326.338-.385.508a.851.851 0 0 0-.02.51c.089.336.252.549.49.64.236.09.514.094.834.008.391-.105.711-.266.959-.485.248-.218.47-.508.666-.87l-.359-1.336zm-5.295-2.266c.688-1.08 1.674-1.79 2.957-2.134a3.33 3.33 0 0 1 1.305-.106c.406.054.772.183 1.097.386.325.202.603.474.835.815.233.341.409.736.529 1.184l1.342 5.007-.866.232c-.18.048-.327.059-.439.03-.112-.027-.219-.116-.32-.266l-.323-.526a7.143 7.143 0 0 1-.46.633 3.58 3.58 0 0 1-.503.503 3.31 3.31 0 0 1-.604.39 3.94 3.94 0 0 1-.756.281c-.335.09-.657.128-.964.113a2.11 2.11 0 0 1-.843-.209 1.886 1.886 0 0 1-.66-.544 2.469 2.469 0 0 1-.42-.889c-.053-.2-.073-.41-.06-.626.014-.216.073-.435.177-.656a2.83 2.83 0 0 1 .454-.668c.2-.225.46-.444.78-.657.322-.213.707-.42 1.156-.62.448-.2.972-.389 1.57-.566l-.123-.463c-.143-.53-.361-.893-.656-1.088-.295-.194-.657-.234-1.084-.12-.31.084-.556.188-.74.315a3.276 3.276 0 0 0-.472.387c-.13.132-.249.25-.356.357a.863.863 0 0 1-.392.22.57.57 0 0 1-.368-.012.902.902 0 0 1-.29-.184l-.503-.52zm12.984-3.007a.527.527 0 0 1-.115.217.435.435 0 0 1-.203.108.706.706 0 0 1-.318.003c-.12-.023-.258-.049-.414-.076a3.48 3.48 0 0 0-.522-.046 2.356 2.356 0 0 0-.65.091c-.376.101-.65.26-.821.477a.772.772 0 0 0-.153.712c.046.17.14.298.281.384.142.086.316.149.522.187.207.039.435.062.686.07.25.007.506.02.768.038.261.018.522.049.782.092.26.044.504.122.73.235.226.114.425.269.597.466.171.197.3.455.385.774.103.382.129.752.078 1.11a2.36 2.36 0 0 1-.383.997 2.962 2.962 0 0 1-.846.815 4.463 4.463 0 0 1-1.31.562 4.47 4.47 0 0 1-.82.141c-.273.021-.542.02-.805-.004a4.294 4.294 0 0 1-.747-.13 3.34 3.34 0 0 1-.64-.243l.245-.844a.645.645 0 0 1 .147-.255.583.583 0 0 1 .275-.148.639.639 0 0 1 .363.01c.124.039.266.078.425.118.16.04.343.068.55.085.205.016.452-.014.74-.091.227-.061.415-.14.562-.238.148-.097.263-.204.345-.32a.826.826 0 0 0 .15-.367.947.947 0 0 0-.022-.38.664.664 0 0 0-.289-.41 1.505 1.505 0 0 0-.523-.192 4.404 4.404 0 0 0-.69-.068 21.41 21.41 0 0 1-.779-.035 6.883 6.883 0 0 1-.796-.097 2.536 2.536 0 0 1-.739-.254 1.973 1.973 0 0 1-.608-.508c-.177-.217-.313-.501-.406-.851a2.364 2.364 0 0 1-.056-.98c.05-.328.171-.635.362-.92a2.92 2.92 0 0 1 .794-.777 4.032 4.032 0 0 1 1.242-.543 4.102 4.102 0 0 1 1.564-.13c.496.06.933.198 1.31.411l-.248.804zm10.548-2.827a.527.527 0 0 1-.115.218.435.435 0 0 1-.203.108.706.706 0 0 1-.319.002c-.119-.023-.257-.048-.413-.075a3.48 3.48 0 0 0-.522-.047 2.356 2.356 0 0 0-.65.092c-.377.1-.65.26-.821.477a.772.772 0 0 0-.153.711c.046.17.14.299.281.385.142.086.316.148.522.187.207.039.435.062.685.069.25.007.507.02.769.038.261.019.522.05.782.093.26.044.504.122.73.235.226.113.425.269.597.466.171.197.3.455.385.774.103.381.128.751.078 1.11a2.36 2.36 0 0 1-.383.997 2.962 2.962 0 0 1-.846.815 4.463 4.463 0 0 1-1.31.562 4.47 4.47 0 0 1-.82.141c-.274.02-.542.02-.805-.004a4.294 4.294 0 0 1-.747-.13 3.34 3.34 0 0 1-.64-.243l.245-.845a.645.645 0 0 1 .147-.255.583.583 0 0 1 .275-.148.639.639 0 0 1 .363.01c.124.04.266.079.425.119.16.04.343.068.549.085.206.016.453-.014.742-.092.226-.06.414-.14.561-.237.148-.098.263-.204.345-.32a.826.826 0 0 0 .15-.368.947.947 0 0 0-.023-.379.664.664 0 0 0-.288-.41 1.505 1.505 0 0 0-.523-.192 4.404 4.404 0 0 0-.69-.068 21.41 21.41 0 0 1-.779-.035 6.883 6.883 0 0 1-.796-.098 2.536 2.536 0 0 1-.739-.253 1.973 1.973 0 0 1-.608-.508c-.177-.218-.313-.501-.406-.852a2.364 2.364 0 0 1-.056-.979c.05-.328.171-.635.362-.92a2.92 2.92 0 0 1 .794-.777 4.032 4.032 0 0 1 1.242-.544 4.102 4.102 0 0 1 1.564-.129c.496.06.933.197 1.31.41l-.248.804zm6.947 1.353c-.544.173-.995.345-1.353.515-.357.17-.635.34-.832.51-.198.168-.326.338-.386.508a.851.851 0 0 0-.02.51c.09.336.253.549.49.64.237.091.515.094.834.008.392-.105.712-.266.96-.485.248-.218.47-.508.665-.87l-.358-1.336zm-5.295-2.267c.688-1.079 1.674-1.79 2.956-2.134a3.33 3.33 0 0 1 1.305-.105c.407.054.773.182 1.098.385.324.203.603.474.835.815.232.341.408.736.528 1.184l1.342 5.007-.865.232c-.18.048-.327.059-.44.03-.112-.027-.218-.116-.32-.266l-.322-.526a7.143 7.143 0 0 1-.46.633 3.58 3.58 0 0 1-.503.503 3.31 3.31 0 0 1-.604.39 3.94 3.94 0 0 1-.757.281c-.335.09-.656.128-.963.113a2.11 2.11 0 0 1-.843-.209 1.886 1.886 0 0 1-.66-.544 2.469 2.469 0 0 1-.42-.889c-.054-.2-.074-.41-.06-.626.014-.216.073-.435.176-.656a2.83 2.83 0 0 1 .455-.668c.2-.225.46-.444.78-.657.322-.213.707-.42 1.155-.62.45-.2.973-.389 1.571-.565l-.124-.464c-.142-.53-.36-.893-.656-1.087-.295-.195-.656-.235-1.083-.12-.31.083-.556.188-.74.314a3.276 3.276 0 0 0-.472.388l-.356.356a.863.863 0 0 1-.392.22.57.57 0 0 1-.368-.012.902.902 0 0 1-.29-.184l-.503-.52zm11.64-.262c.238-.063.435-.15.593-.262.158-.112.28-.24.365-.384.086-.144.137-.304.153-.48.017-.175 0-.358-.052-.549-.105-.392-.305-.67-.6-.837-.297-.166-.679-.187-1.148-.061-.469.125-.79.334-.962.626-.173.292-.207.634-.102 1.026.05.185.125.35.227.494.102.143.227.258.374.343.147.084.318.135.513.152.195.017.408-.006.64-.068zm3.366 3.935a.547.547 0 0 0-.24-.341.946.946 0 0 0-.44-.127 2.9 2.9 0 0 0-.593.03c-.22.032-.452.074-.695.125-.243.051-.494.106-.751.164a8.948 8.948 0 0 1-.763.138 1.85 1.85 0 0 0-.402.555.88.88 0 0 0-.048.609c.038.14.107.26.21.362.101.103.24.177.415.224.176.047.391.063.646.047.256-.016.558-.071.909-.165.355-.095.654-.205.897-.328a2.29 2.29 0 0 0 .578-.395.998.998 0 0 0 .276-.438.86.86 0 0 0 0-.46zm-.246-8.523l.19.711c.06.227-.038.403-.298.527l-.675.322c.181.244.315.529.402.853.105.392.121.767.05 1.126a2.446 2.446 0 0 1-.437.982 3.168 3.168 0 0 1-.848.778 4.141 4.141 0 0 1-1.176.51 4.355 4.355 0 0 1-.455.097c-.148.023-.295.04-.441.052-.207.216-.286.416-.236.602.042.16.147.257.314.292.167.036.375.036.626.002.25-.034.531-.088.842-.163.311-.075.633-.144.964-.205.332-.061.66-.1.987-.12.326-.018.63.01.909.084.279.075.524.212.735.412.211.2.367.488.468.865.094.35.098.713.014 1.089a2.837 2.837 0 0 1-.513 1.082c-.258.345-.605.66-1.04.945-.434.285-.955.508-1.563.671-.597.16-1.133.242-1.607.245-.474.002-.884-.053-1.23-.168a2.07 2.07 0 0 1-.835-.492 1.622 1.622 0 0 1-.428-.73c-.1-.371-.07-.712.087-1.022.157-.31.411-.592.763-.846a1.378 1.378 0 0 1-.618-.298c-.172-.147-.298-.368-.376-.661a1.157 1.157 0 0 1-.033-.385c.01-.138.04-.28.093-.427a1.91 1.91 0 0 1 .226-.437c.1-.145.225-.285.376-.42a2.59 2.59 0 0 1-1.178-.612c-.326-.299-.554-.69-.684-1.175a2.442 2.442 0 0 1-.049-1.125c.073-.36.22-.689.44-.988.22-.3.507-.56.859-.78a4.389 4.389 0 0 1 1.208-.515c.34-.091.669-.142.986-.152.318-.011.618.018.901.085l2.28-.61zm7.058 1.09a2.378 2.378 0 0 0-.291-.67 1.72 1.72 0 0 0-.468-.492 1.507 1.507 0 0 0-.633-.249 1.88 1.88 0 0 0-.784.057c-.552.148-.944.421-1.176.82-.233.4-.316.9-.249 1.5l3.601-.965zm-3.33 2.127c.14.399.306.731.498.997.193.266.408.47.645.614.237.144.496.229.777.256.28.027.575-.001.884-.084.31-.083.566-.19.771-.322.205-.133.38-.265.523-.397.144-.133.27-.252.376-.358a.765.765 0 0 1 .338-.206c.16-.043.295-.016.404.082l.735.549a3.293 3.293 0 0 1-.545.812 4.128 4.128 0 0 1-.715.622 4.657 4.657 0 0 1-.816.447c-.285.12-.567.218-.845.293a4.385 4.385 0 0 1-1.612.137 3.564 3.564 0 0 1-1.453-.48 3.941 3.941 0 0 1-1.183-1.107c-.343-.475-.607-1.06-.793-1.755a4.544 4.544 0 0 1-.147-1.596 3.8 3.8 0 0 1 .42-1.446c.233-.441.557-.827.974-1.16.416-.332.92-.578 1.512-.736.5-.134.983-.178 1.448-.132.465.047.89.183 1.277.408.386.225.725.537 1.017.937.292.399.514.885.668 1.456.077.289.098.492.063.609-.035.117-.14.199-.315.246L144.01 7.87zm7.703-5.526c.117-.202.246-.396.388-.58a3.273 3.273 0 0 1 1.048-.894c.212-.115.452-.208.72-.28a2.943 2.943 0 0 1 1.21-.088c.375.057.71.188 1.005.394.295.205.55.476.764.813.215.338.381.728.5 1.17l1.352 5.047-1.908.511-1.352-5.046c-.13-.484-.341-.829-.634-1.035-.293-.206-.666-.248-1.119-.127-.33.089-.619.246-.867.473a3.44 3.44 0 0 0-.656.83l1.537 5.734-1.91.511-2.123-7.928 1.166-.313c.248-.066.441.006.58.217l.3.591zm-48.507 31.624l2.124 7.929-1.167.312c-.252.068-.443-.005-.572-.219l-.301-.598c-.236.416-.523.779-.86 1.087-.337.309-.77.534-1.302.676a2.914 2.914 0 0 1-1.206.087 2.38 2.38 0 0 1-1.005-.397 2.82 2.82 0 0 1-.77-.817 4.182 4.182 0 0 1-.5-1.17l-1.35-5.039 1.909-.511 1.35 5.038c.13.485.342.83.637 1.035.296.205.667.247 1.115.127.33-.088.62-.244.869-.468.249-.225.468-.5.656-.826l-1.536-5.734 1.909-.512zm3.931-.01c.117-.202.246-.395.387-.58a3.273 3.273 0 0 1 1.048-.894c.213-.114.453-.207.72-.28a2.943 2.943 0 0 1 1.211-.087c.374.057.709.188 1.004.393.295.205.55.477.765.814.214.337.381.727.5 1.17l1.352 5.046-1.909.512-1.352-5.046c-.13-.484-.34-.83-.634-1.035-.292-.206-.665-.249-1.118-.127-.33.088-.62.246-.868.472a3.44 3.44 0 0 0-.655.83l1.536 5.734-1.909.511-2.124-7.928 1.167-.312c.247-.067.44.006.58.217l.299.59zm11.922-2.581a.527.527 0 0 1-.116.217.435.435 0 0 1-.203.108.706.706 0 0 1-.318.003c-.12-.023-.257-.049-.413-.076a3.48 3.48 0 0 0-.522-.046 2.356 2.356 0 0 0-.65.091c-.377.101-.65.26-.821.477a.772.772 0 0 0-.153.712c.045.17.139.298.28.384.143.086.317.149.523.187.206.039.435.062.685.07.25.007.507.02.768.038.262.018.523.049.783.092.26.044.503.122.73.236.226.113.425.268.597.465.171.197.3.455.385.775.102.38.128.75.078 1.11a2.36 2.36 0 0 1-.383.996 2.962 2.962 0 0 1-.846.815 4.463 4.463 0 0 1-1.311.563 4.47 4.47 0 0 1-.82.14c-.273.021-.54.02-.804-.003a4.294 4.294 0 0 1-.747-.132 3.34 3.34 0 0 1-.64-.242l.245-.844a.645.645 0 0 1 .147-.255.583.583 0 0 1 .275-.148.639.639 0 0 1 .363.01c.124.039.265.078.425.118.16.04.343.068.549.085.206.017.453-.014.741-.091.227-.06.414-.14.562-.238.148-.097.263-.204.345-.32a.826.826 0 0 0 .15-.367.947.947 0 0 0-.023-.38.664.664 0 0 0-.288-.41 1.505 1.505 0 0 0-.523-.192 4.404 4.404 0 0 0-.69-.068 21.41 21.41 0 0 1-.78-.035 6.883 6.883 0 0 1-.795-.097 2.536 2.536 0 0 1-.74-.254 1.973 1.973 0 0 1-.607-.507c-.177-.218-.313-.502-.407-.852a2.364 2.364 0 0 1-.055-.98c.05-.328.17-.635.362-.92a2.92 2.92 0 0 1 .794-.776 4.032 4.032 0 0 1 1.242-.544 4.102 4.102 0 0 1 1.564-.13c.496.06.933.198 1.31.411l-.248.804zm7.467-.386a2.378 2.378 0 0 0-.292-.671 1.72 1.72 0 0 0-.467-.492 1.507 1.507 0 0 0-.634-.248 1.88 1.88 0 0 0-.784.056c-.551.148-.943.422-1.176.82-.233.4-.315.9-.248 1.5l3.6-.965zm-3.331 2.127c.14.399.306.73.499.997.192.266.407.47.644.614.238.143.497.228.777.255.28.027.575 0 .885-.083.309-.083.566-.19.77-.323.205-.132.38-.264.523-.397.144-.132.27-.251.377-.357a.765.765 0 0 1 .338-.207c.16-.043.294-.015.403.083l.735.548a3.293 3.293 0 0 1-.544.813 4.128 4.128 0 0 1-.716.622 4.657 4.657 0 0 1-.816.446c-.285.121-.567.219-.845.293a4.385 4.385 0 0 1-1.611.138 3.564 3.564 0 0 1-1.454-.48 3.941 3.941 0 0 1-1.183-1.108c-.342-.474-.607-1.059-.793-1.754a4.544 4.544 0 0 1-.146-1.597 3.8 3.8 0 0 1 .42-1.446c.232-.44.557-.827.973-1.16.416-.332.92-.577 1.513-.736.5-.134.982-.177 1.447-.131.465.047.891.182 1.277.407.386.225.725.538 1.017.937.292.4.515.885.668 1.457.077.288.098.491.064.608-.035.117-.14.2-.316.246l-4.906 1.315zm7.827-5.129c.12-.54.314-.99.582-1.352a1.944 1.944 0 0 1 1.096-.73c.366-.097.681-.096.946.004l.259 1.463c-.001.1-.02.175-.06.227a.32.32 0 0 1-.18.11c-.078.022-.196.04-.355.054a2.75 2.75 0 0 0-.455.08 1.656 1.656 0 0 0-.539.245 1.469 1.469 0 0 0-.373.385c-.1.152-.178.323-.235.515-.056.191-.1.405-.13.64l1.308 4.883-1.909.512-2.124-7.929 1.12-.3c.196-.052.342-.054.438-.005.096.048.18.16.255.333l.356.865zm9.521-.754a2.378 2.378 0 0 0-.292-.671 1.72 1.72 0 0 0-.467-.492 1.507 1.507 0 0 0-.634-.248 1.88 1.88 0 0 0-.784.057c-.55.147-.943.42-1.175.82-.233.399-.316.899-.249 1.5l3.601-.966zm-3.33 2.127c.139.399.305.73.498.997.193.266.408.47.645.614.237.143.496.228.777.255.28.027.575 0 .884-.083.31-.083.566-.19.77-.323.206-.132.38-.264.524-.397.144-.132.27-.251.376-.357a.765.765 0 0 1 .338-.207c.16-.043.294-.015.403.083l.735.548a3.293 3.293 0 0 1-.544.813 4.128 4.128 0 0 1-.715.622 4.657 4.657 0 0 1-.816.446c-.286.121-.567.219-.845.293a4.385 4.385 0 0 1-1.612.138 3.564 3.564 0 0 1-1.454-.48 3.941 3.941 0 0 1-1.182-1.108c-.343-.474-.607-1.059-.794-1.754a4.544 4.544 0 0 1-.146-1.597 3.8 3.8 0 0 1 .42-1.446c.233-.44.557-.827.973-1.16.417-.332.92-.577 1.513-.736.5-.134.982-.177 1.448-.131.465.047.89.182 1.277.407.386.225.725.538 1.017.937.292.4.514.885.667 1.457.078.288.099.491.064.608-.035.117-.14.2-.315.246l-4.907 1.315zM104.056 54.95l.487-.13c.196-.053.35-.124.465-.212a.853.853 0 0 0 .263-.348l2.038-4.729c.084-.199.189-.35.313-.452.125-.102.295-.183.511-.24l1.793-.481-2.519 5.653c-.145.342-.32.605-.526.787.187.016.363.061.53.135.165.074.335.185.506.332l5.281 4.192-1.831.491c-.247.066-.44.08-.58.044a.896.896 0 0 1-.387-.224l-4.267-3.28a.857.857 0 0 0-.418-.202c-.144-.022-.337 0-.58.064l-.656.176 1.317 4.915-2.08.557-2.993-11.174 2.079-.557 1.254 4.683zm14.66-5.469l2.125 7.929-1.167.312c-.252.068-.443-.005-.572-.22l-.301-.598c-.237.417-.523.78-.86 1.088-.337.308-.771.534-1.302.676a2.914 2.914 0 0 1-1.206.087 2.38 2.38 0 0 1-1.005-.397 2.82 2.82 0 0 1-.77-.817 4.182 4.182 0 0 1-.5-1.17l-1.35-5.039 1.909-.511 1.35 5.038c.13.484.342.83.637 1.034.295.206.667.248 1.115.128.33-.088.62-.244.869-.469.249-.224.468-.499.656-.826l-1.536-5.733 1.908-.512zm4.055.388c.12-.54.314-.991.582-1.353a1.944 1.944 0 0 1 1.096-.728c.366-.098.681-.097.946.003l.259 1.463c0 .1-.02.175-.06.227a.32.32 0 0 1-.18.11c-.078.021-.196.04-.355.054a2.75 2.75 0 0 0-.455.08 1.656 1.656 0 0 0-.539.245 1.469 1.469 0 0 0-.373.385c-.1.151-.178.323-.235.515-.056.191-.1.405-.13.64l1.308 4.883-1.909.511-2.124-7.928 1.12-.3c.196-.053.342-.054.438-.006.096.05.18.16.255.334l.356.865zm8.847-2.188a.527.527 0 0 1-.116.217.435.435 0 0 1-.203.108.706.706 0 0 1-.318.003c-.12-.024-.257-.049-.413-.076a3.48 3.48 0 0 0-.522-.046 2.356 2.356 0 0 0-.65.091c-.377.1-.65.26-.821.477a.772.772 0 0 0-.153.712c.045.17.139.298.28.384.143.086.317.149.523.187.206.039.435.062.685.07.25.007.507.02.768.038.262.018.523.049.783.092.26.044.503.122.73.235.226.114.425.269.596.466.172.197.3.455.386.774.102.382.128.752.078 1.11a2.36 2.36 0 0 1-.383.997 2.962 2.962 0 0 1-.846.815 4.463 4.463 0 0 1-1.311.562 4.47 4.47 0 0 1-.82.141c-.273.021-.54.02-.804-.004a4.294 4.294 0 0 1-.747-.13 3.34 3.34 0 0 1-.64-.243l.245-.845a.645.645 0 0 1 .147-.254.583.583 0 0 1 .275-.149.639.639 0 0 1 .363.01c.124.04.265.079.425.119.16.04.343.068.549.085.206.016.453-.014.741-.091.227-.061.414-.14.562-.238.148-.097.263-.204.345-.32a.826.826 0 0 0 .15-.367.947.947 0 0 0-.023-.38.664.664 0 0 0-.288-.41 1.505 1.505 0 0 0-.523-.192 4.404 4.404 0 0 0-.69-.068 21.41 21.41 0 0 1-.78-.035 6.883 6.883 0 0 1-.796-.097 2.536 2.536 0 0 1-.738-.254 1.973 1.973 0 0 1-.608-.508c-.177-.217-.313-.501-.407-.852a2.364 2.364 0 0 1-.055-.979c.05-.328.17-.635.362-.92a2.92 2.92 0 0 1 .794-.777 4.032 4.032 0 0 1 1.242-.544 4.102 4.102 0 0 1 1.564-.129c.496.06.933.197 1.31.411l-.248.804zm7.467-.386a2.378 2.378 0 0 0-.292-.671 1.72 1.72 0 0 0-.467-.492 1.507 1.507 0 0 0-.634-.249 1.88 1.88 0 0 0-.784.057c-.551.148-.943.421-1.176.82-.233.4-.315.9-.248 1.5l3.6-.965zm-3.331 2.127c.14.398.306.73.499.996.192.266.407.471.644.615.238.143.497.228.777.255.28.027.575 0 .885-.084.309-.082.566-.19.77-.322.205-.132.38-.265.523-.397.144-.132.27-.252.377-.358a.765.765 0 0 1 .338-.206c.16-.043.294-.015.403.082l.735.549a3.293 3.293 0 0 1-.544.812 4.128 4.128 0 0 1-.716.623 4.657 4.657 0 0 1-.816.446c-.285.12-.567.218-.845.293a4.385 4.385 0 0 1-1.611.138 3.564 3.564 0 0 1-1.454-.48 3.941 3.941 0 0 1-1.183-1.108c-.342-.474-.607-1.059-.793-1.755a4.544 4.544 0 0 1-.146-1.596 3.8 3.8 0 0 1 .42-1.446c.232-.44.557-.827.973-1.16.416-.332.92-.577 1.513-.736.5-.134.982-.178 1.447-.131.465.046.891.182 1.277.407.386.225.725.538 1.017.937.292.4.515.885.668 1.457.077.288.098.49.064.608-.035.117-.14.199-.316.246l-4.906 1.315zm14.86.01l-1.839.493a.52.52 0 0 1-.365-.019 1.057 1.057 0 0 1-.279-.19l-2.416-2.31c-.002.095-.01.186-.022.272-.013.086-.03.168-.054.246l-.869 2.693a1.275 1.275 0 0 1-.143.3.459.459 0 0 1-.28.194l-1.707.458 1.625-4.817-3.641-3.14 1.839-.494a.66.66 0 0 1 .324-.024c.078.02.154.067.229.141l2.37 2.198c.01-.19.043-.384.1-.582l.778-2.445c.062-.22.184-.355.364-.404l1.754-.47-1.598 4.454 3.83 3.446zm2.348-2.832c.286.205.572.327.856.367.284.04.575.02.874-.06.288-.078.534-.202.737-.372.203-.17.356-.388.458-.653.103-.265.153-.578.15-.939a4.96 4.96 0 0 0-.188-1.229 5.487 5.487 0 0 0-.428-1.148 2.357 2.357 0 0 0-.53-.699 1.312 1.312 0 0 0-.625-.305 1.634 1.634 0 0 0-.713.043c-.397.106-.712.28-.945.522a3.181 3.181 0 0 0-.599.918l.953 3.555zm-1.385-4.764c.227-.453.516-.848.867-1.185.352-.337.805-.58 1.362-.73a2.691 2.691 0 0 1 1.259-.047c.406.085.785.263 1.137.536s.666.642.942 1.106c.277.464.502 1.021.676 1.67.158.593.225 1.163.201 1.71a4.17 4.17 0 0 1-.332 1.497 3.27 3.27 0 0 1-.841 1.157 3.236 3.236 0 0 1-1.326.691c-.443.119-.84.152-1.191.1a2.873 2.873 0 0 1-.995-.343l.87 3.246-1.909.511-2.818-10.517 1.167-.312c.247-.067.44.006.58.217l.351.693zm12.606-1.266a2.378 2.378 0 0 0-.291-.671 1.72 1.72 0 0 0-.468-.492 1.507 1.507 0 0 0-.634-.249 1.88 1.88 0 0 0-.784.057c-.55.148-.943.421-1.175.82-.233.4-.316.9-.249 1.5l3.601-.965zm-3.33 2.127c.14.398.305.73.498.996s.408.47.645.614c.237.144.496.23.777.256.28.027.575 0 .884-.084.31-.083.566-.19.77-.322.206-.132.38-.265.524-.397.144-.133.27-.252.376-.358a.765.765 0 0 1 .338-.206c.16-.043.294-.016.403.082l.735.549a3.293 3.293 0 0 1-.544.812 4.128 4.128 0 0 1-.715.623 4.657 4.657 0 0 1-.816.446c-.286.12-.567.218-.845.293a4.385 4.385 0 0 1-1.612.137 3.564 3.564 0 0 1-1.453-.48 3.941 3.941 0 0 1-1.183-1.107c-.343-.474-.607-1.06-.794-1.755a4.544 4.544 0 0 1-.146-1.596 3.8 3.8 0 0 1 .42-1.446c.233-.44.557-.827.973-1.16.417-.332.92-.578 1.513-.736.5-.134.982-.178 1.448-.131.465.046.89.182 1.277.407.386.225.725.537 1.017.937.292.4.514.885.668 1.457.077.288.098.49.063.608-.035.117-.14.199-.315.246l-4.907 1.315zm7.826-5.13c.12-.54.315-.99.582-1.352a1.944 1.944 0 0 1 1.097-.728c.366-.098.68-.097.945.003l.26 1.463c-.001.1-.021.175-.06.227a.32.32 0 0 1-.181.11c-.078.021-.196.04-.354.054a2.75 2.75 0 0 0-.455.08 1.656 1.656 0 0 0-.54.244 1.469 1.469 0 0 0-.372.386c-.1.151-.179.323-.235.514-.056.192-.1.405-.131.64l1.308 4.884-1.908.511-2.125-7.928 1.12-.3c.197-.053.343-.055.438-.006.096.05.181.16.255.334l.356.865zm8.396 4.907c-.69.185-1.271.132-1.744-.158-.472-.29-.8-.778-.984-1.463l-1.187-4.428-.811.218a.385.385 0 0 1-.29-.03c-.09-.048-.153-.139-.189-.273l-.202-.757 1.219-.55-.178-2.272a.439.439 0 0 1 .082-.279.452.452 0 0 1 .256-.16l.989-.264.669 2.496 2.117-.568.364 1.36-2.117.568 1.151 4.296c.067.248.179.424.337.531a.648.648 0 0 0 .555.075.93.93 0 0 0 .286-.122c.072-.05.134-.098.184-.145.051-.047.096-.09.135-.131a.274.274 0 0 1 .128-.08.226.226 0 0 1 .15.005c.044.02.094.051.15.097l.82.774a2.991 2.991 0 0 1-.817.782 3.692 3.692 0 0 1-1.073.478zm6.875-7.2a2.378 2.378 0 0 0-.292-.672 1.72 1.72 0 0 0-.467-.492 1.507 1.507 0 0 0-.634-.248 1.88 1.88 0 0 0-.784.057c-.551.147-.943.42-1.176.82-.232.4-.315.899-.248 1.5l3.601-.966zM180.62 37.4c.14.399.306.731.499.997s.408.47.645.614c.237.143.496.229.776.256.28.027.576-.001.885-.084.309-.083.566-.19.77-.323.205-.132.38-.264.524-.397.144-.132.27-.251.376-.357a.765.765 0 0 1 .338-.207c.16-.042.294-.015.403.083l.735.548a3.293 3.293 0 0 1-.544.813 4.128 4.128 0 0 1-.715.622 4.657 4.657 0 0 1-.817.447c-.285.12-.566.218-.845.292a4.385 4.385 0 0 1-1.61.138 3.564 3.564 0 0 1-1.455-.48 3.941 3.941 0 0 1-1.183-1.108c-.342-.474-.606-1.059-.793-1.754a4.544 4.544 0 0 1-.146-1.597 3.8 3.8 0 0 1 .42-1.446c.233-.44.557-.827.973-1.16.416-.331.92-.577 1.513-.736.5-.134.982-.177 1.447-.13.466.046.891.182 1.277.407.386.225.725.537 1.017.936.292.4.515.885.668 1.457.078.289.099.491.064.608-.035.117-.14.2-.315.246l-4.907 1.315zm7.704-5.526c.117-.203.246-.396.387-.58a3.273 3.273 0 0 1 1.048-.894c.213-.115.453-.208.72-.28a2.943 2.943 0 0 1 1.211-.088c.374.057.709.188 1.004.393.295.206.55.477.765.814.214.337.381.728.5 1.17l1.352 5.047-1.909.511-1.352-5.046c-.13-.484-.34-.83-.633-1.035-.293-.206-.666-.248-1.12-.127-.33.088-.618.246-.867.473a3.44 3.44 0 0 0-.655.83l1.536 5.733-1.908.512-2.125-7.929 1.167-.312c.247-.067.44.006.58.217l.3.59z"/>
</g>
</svg>
OK, I didn't find a programatic solution to the problem. However, I let our designer know about the problem, so she took a look and - as she put it - she "just flattened it again in Illustrator". So if anyone has an issue with an SVG with text in paths, only in Safari, I suppose that's what you should ask your designer to do. Note: The new SVG worked as a background-image. I didn't check the <img> version.
Did the SVG work for standalone? The SVG you refer to has a fill set to white on the containing group. When I tried to open it in chrome or safari I couldn't see it but it was there, I validated by changing the group tag to Either way, text in SVG can be problematic if the font isn't available so flattening to paths can be a good solution
how to use pandas to draw many picture
there are many lines in the excel，i want to draw a picture for every line, but there are too many lines,if i show them in one picture(using the subplots=True), every one becomes very small(just like the picture in the attachment). i want to how to draw many picture, not like the subplot. below are my data in excel 2017/2/13 2017/2/14 2017/2/15 2017/2/16 2017/2/17 sds_24g_4x1g 75 0 0 0 0 hsb_stk() 0 0 0 0 0 nic_rx_cluster 0 0 0 0 0 sds_16g_8x2p5g 80 0 0 0 0 sds_20g_4x2p5g 80 0 0 0 0 sds_8g_12x2p5g 81 0 0 0 0 nic_rx_truncate 0 0 0 0 0 sds_24g_4x10g 82 0 0 0 0 sds_8x10g 83 0 0 0 0 opri_rmk_cpuas 0 0 0 0 0 cfi_rmk_vlan 0 0 0 0 0 ipri_rmk_cpuas 0 0 0 0 0 cfi_rmk_cpuas 0 0 0 0 0 sds_16x2p5g 83 0 0 0 0 dei_rmk_cpuas 100 0 0 0 0 sds_24x2p5g 84 0 0 0 0 opri_rmk_mix 0 0 0 0 0 ipri_rmk_mix 0 0 0 0 0 dei_rmk_table 0 0 0 0 0 cfi_rmk_table 0 0 0 0 0 chip_pll_fcov 0 0 0 0 0 sds_24fe_4x1g 91 0 0 0 0 cov_vlan 0 0 0 0 0 cov_l2 0 0 0 0 0 pwr_saving 0 0 0 0 0 cov_trunk 0 0 0 0 0 dscp_rmk_mix 0 0 0 0 0 cov_qid 0 0 0 0 0 cov_led_scan 93 0 0 0 0