No replies
kuchipudi
kuchipudi's picture
Offline
newbie
Last seen: 11 weeks 5 days ago
Timezone: GMT+5.5
Joined: 2018-07-01
Posts: 1
Points: 2

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>