Sun, 2018-07-01 10:19
Hi,
I have created a html file(techno_3.html). When i opened in chrome/Ie it looks good and responsive.But when attached to outlook it looks wired. can any one help me.
<!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <head> <style> html { height: 100%; background-color: #eee; } body { background-color: white; font-family: "Helvetica Neue"; margin: 10px auto; border: 1px solid #000000; box-sizing: border-box; min-height: 100%; max-width: 800px; } section { width: 800px; text-align: center; margin: 30px auto 20px; } .header { margin: 0px auto 90px; } .header img { width: 100%; } p { padding: 5px; text-align: justify; line-height: 1.8; font-size: 17px; } a { margin:10px auto; padding: 15px 20px; background-color: black; color: white; text-decoration-color: #0061ff; display:inline-block; } .foot { padding: 30px 2px 50px; box-sizing: border-box; } .foot img { float: right; } .foot .arrow { width: 140px; height:30px; margin-left:60px; padding-top:10px; } .foot .intel { width: 100px; height:60px; } .Rtable { display: flex; flex-wrap: wrap; margin: 4em 0; padding: 0; } .Rtable-cell { box-sizing: border-box; flex-grow: 1; width: 100%; overflow: hidden; text-align: center; } .Rtable-cell p { text-align: center; padding: 0 5px; margin: 0px; } /* Table column sizing ================================== */ .Rtable--4cols > .Rtable-cell { width: 25%; } /* Page styling ================================== */ h4 { font-size: 1em; margin: auto; } /* Apply styles ================================== */ .Rtable { position: relative; top: 3px; } .Rtable-cell img { width: 120px; height: 120px; } /* Responsive ==================================== */ @media all and (max-width:850px){ body { width: 680px; } section { width: 680px; //margin: 40px auto; } a { padding: 12px 17px; font-size: 15px; } .foot .arrow { width: 120px; height:26px; margin-left:50px; } .foot .intel { width: 80px; height:48px; } } @media all and (max-width:767px){ body { width: 600px; } section { width: 600px; margin: 50px auto; } .sec-1 h2 { font-size: 20px; } p { font-size: 15px; } a { padding: 10px 15px; font-size: 14px; } .foot .arrow { width: 100px; height:26px; margin-left:30px; } .foot .intel { width: 70px; height:42px; } .foot { padding: 30px 2px 20px; } } @media all and (max-width: 630px) { body { width: 100%; } section { width: 100%; margin: 20px auto 10px; } .header { margin: 0px auto 70px; } .foot { padding: 30px 2px 30px; margin-bottom: 20px; } .Rtable--collapse { display: block; } .Rtable--collapse > .Rtable-cell { width: 100% !important; } .Rtable-cell--head { margin-top: 30px; font-size: 18px; } } </style> </head> <body> <section class="header"> <img src="https://www.dropbox.com/s/8sowhaf0n35w6rv/Retail%20Header%20680x200%20option2.png?raw=1"> </section> <section class="sec-1"> <div class="div-1"> <h2 class="title">Technologies Transforming the Retail Industry</h2> <p class="content">In-store retail is making a strong comeback, thanks to new technologies to engage customers, multichannel interactions and enhanced overall shopping experience. Display technologies, real-time inventory management, and cloud-based analytical insights are transforming retail. Here are some of the benefits retails reaped by leveraging technology to optimize store operations and improve in-store shopping experience.</p> </div> </section> <div class="Rtable Rtable--4cols Rtable--collapse"> <div style="order:0;" class="Rtable-cell Rtable-cell--head"><h4>Digital Signage</h4></div> <div style="order:1;" class="Rtable-cell"><img src="https://www.dropbox.com/s/g4b937raupvt35r/Digital%20Signage%20100x100-01.png?raw=1"/></div> <div style="order:2;" class="Rtable-cell"><p><b>20%</b> increase in sales, <b>35%</b> improvement in customer satisfaction</p></div> <div style="order:0;" class="Rtable-cell Rtable-cell--head"><h4>Real-Time Inventory</h4></div> <div style="order:1;" class="Rtable-cell"><img src="https://www.dropbox.com/s/htj74lu28p4ungi/Real-Time%20Inventory%20100x100-01.png?raw=1"/></div> <div style="order:2;" class="Rtable-cell"><p>Up to <b>11%</b> increase in sales</p></div> <div style="order:0;" class="Rtable-cell Rtable-cell--head"><h4>Self-Service Kiosks</h4></div> <div style="order:1;" class="Rtable-cell"><img src="https://www.dropbox.com/s/glphcizs55ptijt/Kiosk100x100-01.png?raw=1"/></div> <div style="order:2;" class="Rtable-cell"><p><b>10%</b> increase in sales, <b>95%</b> will use kiosks again</p></div> <div style="order:0;" class="Rtable-cell Rtable-cell--head"><h4>Digital Menu Boards</h4></div> <div style="order:1;" class="Rtable-cell"><img src="https://www.dropbox.com/s/886yojvvih69n23/eMenu%20100x100-01.png?raw=1"/></div> <div style="order:2;" class="Rtable-cell"><p><b>7%</b> reduction in operating costs due to elimination of printed boards and personnel expenses</p></div> </div> <section class="sec-2"> <p>Download the Retail Technology Guide to learn about industry trends and how Intel, Advantech, and Arrow Electronics are together ushering in the next generation of retail solutions.</p> <a href="https://static4.arrow.com/-/media/images/iot/intel-retail-solutions-guide/intel-retail-solutions-guide.pdf">DOWNLOAD GUIDE</a> <div class="foot"> <img class="arrow" src="https://www.dropbox.com/s/qf0501ejn0s8g2j/Arrow-logo.png?raw=1"/> <img class="intel" src="https://www.dropbox.com/s/aw0zrq6map57raf/Intel-logo.png?raw=1"/> </div> </section> </body> </html>
