Email sent from Actionmailer does not read css - ruby-on-rails-5

I am implementing an ActionMailer that sends out an email to the customer when a file is uploaded. I have a 0-10 rating system at the bottom of the email which I want should look different on the browser and phone app.
The browser can only read inline CSS and not but #media cannot be implemented using inline CSS.
I have tried using the "browser" gem but it doesn't work for mailers, only controllers.
Using javascript hasn't helped either because the email is marked as Spam by Gmail in the browser.
Works for mobile app not browser:
<html>
<style>
body {
a:link, a:visited {
border-radius: 10px;
background-color: white;
color: black;
border: 1px solid #586674;
padding-top: 15px;
padding-bottom: 15px;
margin: 0px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: #6e7f91;
color: white;
}
#nps-rating a:link, #nps-rating a:visited {
width: 8.5%;
font-size: 2em;
}
div{
text-align: center;
background-color: #f2f2f2;
}
#nps-question {
font-size: 2em;
}
#nps-options {
width: 70%;
margin: 0px auto;
}
.float-right {
float: right;
}
.float-left {
float: left;
}
#nps-legend {
width: 100%;
}
#media only screen and (max-width: 600px) {
#nps-rating a:link, #nps-rating a:visited {
width: 250px;
font-size: 2em;
display:block;
}
#nps-options {
width: 50%;
margin: 0px auto;
display:block;
}
.float-right {
position: fixed;
top: 0;
right: 0;
}
.float-left {
position: fixed;
bottom: 0;
right: 0;
}
#nps-legend {
width: 100%;}
}
</style>
WORKS FOR BROWSER NOT MOBILE APP
<p style="font-size: 2em;text-align: center;" >How likely would you be to recommend Carter & Clark to a friend or colleague?</p>
<div >
<p style="float:left">0: Not Likely</p>
<p style="float: right">10: Very Likely</p>
</div>
<br>
<div >
<% (0..10).each do |i| %>
<%= link_to i,
"http://localhost:3060/nps_ratings/new_from_email?
order_id=#{#drawing.order_id}&user_id=# .
{#user.id}&rating=#{i}",
{:style=>'display:inline-block;
line-height:50px;
width: 75px;
font-size: 2em;
border-radius: 10px;
color: black;
border: 1px solid #586674;
padding-top: 15px;
padding-bottom: 15px;
margin: 0px;
text-align: center;
background-color: white;', :class => "css_class"}%>
<% end %>
</div>
</div>
</html>
the rating numbers should look like small buttons on browser and larger buttons : display:block; in mobile app

Related

How to show vue component on only certain routes

I want to show my Navbar in every page except the login and register page of my Vue app. How can I do that?
App.vue code:
<template>
<div id="app">
<NavBar v-if="this.$route!= '/' || this.$route!='/register' " />
<main class="form-signin">
<router-view/>
</main>
</div>
</template>
<script>
import NavBar from './components/NavBar.vue'
export default {
components: {NavBar}
}
</script>
<style>
nav{
}
#app{
width: 100%;
height: 100%;
}
html,
body {
height: 100%;
min-height: 75rem;
}
body {
justify-content: center;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
body,html{
padding: 0;
margin: 0;
min-height: 100vh;
width: 100%;
}
html{
background-color: white;
}
</style>
I tried using this.$route and v-if , but it wasn't working. The end result still looked like this:
Register page:
Login page:
I just need to exclude the navbar from both of these pages. How can I do that?

Change pseudo element color on selected state

I want to change arrow color as well as circle when click on it. I am using LESS and getting right place to add border-top-color: #0066ff; Can anyone suggest please? Here is code:
LESS:
.circle {
border-radius: 50%;
box-sizing: border-box;
width: 225px;
height:225px;
border: 6px solid #ff6600;
border-radius: 50%;
position: relative;
cursor:pointer;
&.selected {
border: 6px solid #0066ff;
}
&:after {
top: 104%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-top-color: #ff6600;
border-width: 10px;
margin-left: -10px;
transform: scaleY(1.6);
&.selected {
border-top-color: #0066ff;
}
}
}
HTML:
<div class="circle"></div>
JS:
$(document).ready(function(){
$('.circle').on('click', function(){
$(this).addClass('selected');
});
});
JS fiddle is here:
https://jsfiddle.net/kunjsharma/6eu431hp/1/

You need to put :after inside .selected: see this fiddle
.circle {
border-radius: 50%;
box-sizing: border-box;
width: 225px;
height:225px;
border: 6px solid #ff6600;
border-radius: 50%;
position: relative;
cursor:pointer;
&.selected {
border: 6px solid #0066ff;
&:after { // <-- moved this inside .selected
border-top-color: #0066ff;
}
}
// rest of the styles...
}

How to disable v-tooltip when user click outside

I use v-tooltip to show tooltip on every cell of table
<td v-tooltip="{content: 'some content', trigger: 'click'}"></td>
But I want when user click another cell, current tooltip will disapear, I have tried "autoHide" property, but it not working.
Thanks
v-tooltip repository:
https://github.com/Akryum/v-tooltip

It's a late answer but maybe it can help someone else:
you can add the tooltip component as a ref and call the hide method:
this.$refs.popover.hide()

I think you will have to use the more customizable v-popover component. The v-tooltip directive doesn't seem to handle manual triggering, and you need manual triggering.
console.clear();
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
selectedCell: null
}
})
body {
font-family: sans-serif;
margin: 42px;
}
.tooltip {
display: block !important;
z-index: 10000;
}
.tooltip .tooltip-inner {
background: black;
color: white;
border-radius: 16px;
padding: 5px 10px 4px;
}
.tooltip .tooltip-arrow {
width: 0;
height: 0;
border-style: solid;
position: absolute;
margin: 5px;
border-color: black;
}
.tooltip[x-placement^="top"] {
margin-bottom: 5px;
}
.tooltip[x-placement^="top"] .tooltip-arrow {
border-width: 5px 5px 0 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
bottom: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.tooltip[x-placement^="bottom"] {
margin-top: 5px;
}
.tooltip[x-placement^="bottom"] .tooltip-arrow {
border-width: 0 5px 5px 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-top-color: transparent !important;
top: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.tooltip[x-placement^="right"] {
margin-left: 5px;
}
.tooltip[x-placement^="right"] .tooltip-arrow {
border-width: 5px 5px 5px 0;
border-left-color: transparent !important;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
left: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
.tooltip[x-placement^="left"] {
margin-right: 5px;
}
.tooltip[x-placement^="left"] .tooltip-arrow {
border-width: 5px 0 5px 5px;
border-top-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
right: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
.tooltip[aria-hidden='true'] {
visibility: hidden;
opacity: 0;
transition: opacity .15s, visibility .15s;
}
.tooltip[aria-hidden='false'] {
visibility: visible;
opacity: 1;
transition: opacity .15s;
}
<script src="//unpkg.com/popper.js"></script>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/v-tooltip"></script>
<div id="app">
<table border="1">
<tr v-for="i in 3">
<td #click="selectedCell = i">
<p><span>This is cell {{ i }}</span></p>
<v-popover trigger="manual" :open="selectedCell === i">
<template slot="popover">
<p>
{{ message }}
</p>
</template>
</v-popover>
</td>
</tr>
</table>
</div>

Bootstrap Lighbox - how to add caption with link?

I would like some of my Lightbox gallery images to have a caption with a link to another website. And if the caption link can open up in a new window/tab like the target="_blank" style. But I have no idea how to do this. Could I have some help please? Thanks in advance :)
Code for one gallery image:
<li class="col-xs-6 col-sm-6 col-md-3 col-lg-3 bottom-space">
<a href="img/photos/gallery/gallery_photo044.jpg" data-lightbox="tristone" data-title="My caption goes here">
<img class="img-responsive" src="img/photos/gallery-thumbs/gallery-thumbs044.jpg">
</a>
</li>
I have read somewhere I could use data attributes, so I tried data-href:
<li class="col-xs-6 col-sm-6 col-md-3 col-lg-3 bottom-space">
<a href="img/photos/gallery/gallery_photo044.jpg" data-lightbox="tristone" data-title="My caption goes here" data-href="http://mylinkgoeshere">
<img class="img-responsive" src="img/photos/gallery-thumbs/gallery-thumbs044.jpg">
</a>
</li>
But of course that didn't work since I don't really know what data-href does so I was just guessing :( I did look up about it but I guess my coding level isn't good enough so I don't understand it ^^;
Lightbox.css:
/* Preload images */
body:after {
content: url(../img/close.png) url(../img/loading.gif) url(../img/prev.png) url(../img/next.png);
display: none;
}
.lightboxOverlay {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color: black;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
display: none;
}
.lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
font-weight: normal;
}
.lightbox .lb-image {
display: block;
height: auto;
max-width: inherit;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
.lightbox a img {
border: none;
}
.lb-outerContainer {
position: relative;
background-color: white;
*zoom: 1;
width: 250px;
height: 250px;
margin: 0 auto;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}
.lb-outerContainer:after {
content: "";
display: table;
clear: both;
}
.lb-container {
padding: 4px;
}
.lb-loader {
position: absolute;
top: 43%;
left: 0;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
.lb-cancel {
display: block;
width: 32px;
height: 32px;
margin: 0 auto;
background: url(../img/loading.gif) no-repeat;
}
.lb-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
.lb-container > .nav {
left: 0;
}
.lb-nav a {
outline: none;
background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}
.lb-prev, .lb-next {
height: 100%;
cursor: pointer;
display: block;
}
.lb-nav a.lb-prev {
width: 34%;
left: 0;
float: left;
background: url(../img/prev.png) left 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.lb-nav a.lb-prev:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.lb-nav a.lb-next {
width: 64%;
right: 0;
float: right;
background: url(../img/next.png) right 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.lb-nav a.lb-next:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.lb-dataContainer {
margin: 0 auto;
padding-top: 5px;
*zoom: 1;
width: 100%;
-moz-border-radius-bottomleft: 4px;
-webkit-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.lb-dataContainer:after {
content: "";
display: table;
clear: both;
}
.lb-data {
padding: 0 4px;
color: #ccc;
}
.lb-data .lb-details {
width: 85%;
float: left;
text-align: left;
line-height: 1.1em;
}
.lb-data .lb-caption {
font-size: 13px;
font-weight: bold;
line-height: 1em;
}
.lb-data .lb-number {
display: block;
clear: left;
padding-bottom: 1em;
font-size: 12px;
color: #999999;
}
.lb-data .lb-close {
display: block;
float: right;
width: 30px;
height: 30px;
background: url(../img/close.png) top right no-repeat;
text-align: right;
outline: none;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.lb-data .lb-close:hover {
cursor: pointer;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}

An image size and a div size doesn't match

(I am making a website by myself and it's the first time. I am adding this writing because my post is mostly code. )
I added an image on the right div 'about_Cell2', but I don't know where the about 1px space comes from..
Please help me..
* { padding: 0; margin: 0; }
body {
font-family: Helvetica, Verdana, sans-serif;
font-size: 13px;
}
.div-left{
float:left;
padding-left:0px;
padding-right:0px;
font-family:Helvetica, Verdana, sans-serif;
letter-spacing: 2px;
}
.div-right{
float:right;
padding-top:14px;
font-family:Helvetica, Verdana, sans-serif;
}
.div-left p{
font-size: 2.0em;
}
.header{
height:40px;
padding-top:9px;
}
/* menu& submenu */
.nav {
height:30px;
}
.nav2 {
height:30px;
margin-bottom:50px;
}
.nav li {
list-style-type:none;
float:left;
padding-left:30px;
letter-spacing: 2px;
}
.nav2 li {
list-style-type:none;
float:left;
padding-left:30px;
letter-spacing: 2px;
}
.nav a {
text-decoration:none;
color:#333;
}
.div-left a:hover {
color: #333;
}
.nav, .div-right a:visited{
color: #555;
}
.submenu a {
text-decoration:none;
color:#333;
}
.submenu a:hover {
color: #333;
}
.submenu a:visited{
color: #555;
}
.submenu li {
float:left;
list-style-type:none;
padding-left:0px;
letter-spacing: 2px;
font-family: Cambria, serif;
font-size: 1.5em;
}
ul {
list-style-type:none;
padding:0px;
margin:0px;
}
#wrapper {
margin: 0 auto;
width: 1032px;
align: center;
}
#logo {
font-family:Cambria, serif;
}
#logo a {
text-decoration: none;
}
a {
text-decoration: none;
color: #333;
}
#sub_logo {
font-family:Helvetica, Verdana, sans-serif;
}
.content {
max-height:auto;
max-width:auto;
padding-top:25px;
}
.content .about{
}
.content .main0 .nav{
margin-left: auto;
margin-right: auto;
width: 700px;
text-align: center;
font-family:Cambria, serif;
font-size: 1.5em;
}
.content .main0 .nav2{
margin-left: auto;
margin-right: auto;
width:700px;
text-align: center;
font-family:Cambria, serif;
font-size: 1.5em;
font-weight: bold;
}
.main0 {
background-color: #eee;
height: 50px;
line-height:45px;
}
.content .main1 span{
font-size:4.0em;
letter-spacing : 3px;
font-family:Cambria, serif;
color: #fff;
}
.main2{
margin: 0px 0px 0px 0px;
}
.t1 {
margin: 0px 0px 0px 0px;
padding: 0px;
}
.menus{
width: 1032px;
}
.menu_left{
width: 520px;
}
.menu_right{
background-color: #333;
}
.t1 th {
max-width: 344px;
margin: 0px 50px 50px 0px;
font-family:Cambria, serif;
font-size:2.0em;
letter-spacing: 2px;
}
.t1 td{
max-width: 344px;
text-align: center;
margin: 0px 0px 0px 0px;
padding: 5px;
}
t1 .des{
text-align: center;
padding: 10px 10px 10px 10px;
letter-spacing : 2px;
line-height:16px;
}
t1 .des span{
font-family: Helvetica, Verdana, sans-serif;
font-size: 1.0em;
line-height:16px;
}
.main1{
background: url(img/1.jpg);
height: 500px;
text-align: center;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.main3{
text-align: center;
margin: 0px 0px 25px 00px;
padding-top: 20px;
padding-bottom : 55px;
height: 120px;
background-color: #e3e3e3;
}
.main3 .main3_depth{
margin-left: auto;
margin-right: auto;
width: 70%;
}
.main1 .main3_depth{
margin-left: auto;
margin-right: auto;
width: 70%;
}
.main3 .main3_depth p{
font-size: 1.7em;
font-family:Cambria, serif;
letter-spacing: 2px;
}
.main1 .main3_depth p{
font-size: 1.3em;
font-family:Helvetica, Verdana, serif;
letter-spacing: 2px;
color: #fff;
}
.cta{
border: 1px solid #333;
margin-left: auto;
margin-right: auto;
line-height: 25px;
width: 130px;
height : 30px;
}
.content .main2 .t1 th a{
color: #b76115;
}
#footer {
font-family:Helvetica, Verdana, sans-serif;
color: #fff;
height: 20px;
background-color:#333;
margin: 20px 0px 10px 0px;
padding: 20px;
text-align: center;
font-size:0.8em;
letter-spacing: 2px;
clear:both;
text-align:center;
}
/* div table */
* { padding: 0; margin: 0; }
body {
font-family: Helvetica, Verdana, sans-serif;
font-size: 13px;
}
.div-left{
float:left;
padding-left:0px;
padding-right:0px;
font-family:Helvetica, Verdana, sans-serif;
letter-spacing: 2px;
}
.div-right{
float:right;
padding-top:14px;
font-family:Helvetica, Verdana, sans-serif;
}
.div-left p{
font-size: 2.0em;
}
.header{
height:40px;
padding-top:9px;
}
/* menu& submenu */
.nav {
height:30px;
}
.nav2 {
height:30px;
margin-bottom:50px;
}
.nav li {
list-style-type:none;
float:left;
padding-left:30px;
letter-spacing: 2px;
}
.nav2 li {
list-style-type:none;
float:left;
padding-left:30px;
letter-spacing: 2px;
}
.nav a {
text-decoration:none;
color:#333;
}
.div-left a:hover {
color: #333;
}
.nav, .div-right a:visited{
color: #555;
}
.submenu a {
text-decoration:none;
color:#333;
}
.submenu a:hover {
color: #333;
}
.submenu a:visited{
color: #555;
}
.submenu li {
float:left;
list-style-type:none;
padding-left:0px;
letter-spacing: 2px;
font-family: Cambria, serif;
font-size: 1.5em;
}
ul {
list-style-type:none;
padding:0px;
margin:0px;
}
#wrapper {
position: relative;
margin: 0px auto 0px auto;
width: 1032px;
max-width: 1032px;
}
#logo {
font-family:Cambria, serif;
}
#logo a {
text-decoration: none;
}
a {
text-decoration: none;
color: #333;
}
#sub_logo {
font-family:Helvetica, Verdana, sans-serif;
}
.content {
max-height:auto;
max-width:auto;
padding-top:25px;
}
.content .about{
}
.content .main0 .nav{
margin-left: auto;
margin-right: auto;
width: 700px;
text-align: center;
font-family:Cambria, serif;
font-size: 1.5em;
}
.content .main0 .nav2{
margin-left: auto;
margin-right: auto;
width:700px;
text-align: center;
font-family:Cambria, serif;
font-size: 1.5em;
font-weight: bold;
}
.main0 {
background-color: #eee;
height: 50px;
line-height:45px;
}
.content .main1 span{
font-size:4.0em;
letter-spacing : 3px;
font-family:Cambria, serif;
color: #fff;
}
.main2{
margin: 0px 0px 0px 0px;
}
.menus{
}
.t1 {
margin: 0px 0px 0px 0px;
padding: 0px;
}
.t1 th {
max-width: 344px;
margin: 0px 50px 50px 0px;
font-family:Cambria, serif;
font-size:2.0em;
letter-spacing: 2px;
}
.t1 td{
max-width: 344px;
text-align: center;
margin: 0px 0px 0px 0px;
padding: 5px;
}
t1 .des{
text-align: center;
padding: 10px 10px 10px 10px;
letter-spacing : 2px;
line-height:16px;
}
t1 .des span{
font-family: Helvetica, Verdana, sans-serif;
font-size: 1.0em;
line-height:16px;
}
.main1{
background: url(img/1.jpg);
height: 500px;
text-align: center;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.main3{
text-align: center;
margin: 0px 0px 25px 00px;
padding-top: 20px;
padding-bottom : 55px;
height: 120px;
background-color: #e3e3e3;
}
.main3 .main3_depth{
margin-left: auto;
margin-right: auto;
width: 70%;
}
.main1 .main3_depth{
margin-left: auto;
margin-right: auto;
width: 70%;
}
.main3 .main3_depth p{
font-size: 1.7em;
font-family:Cambria, serif;
letter-spacing: 2px;
}
.main1 .main3_depth p{
font-size: 1.3em;
font-family:Helvetica, Verdana, serif;
letter-spacing: 2px;
color: #fff;
}
.cta{
border: 1px solid #333;
margin-left: auto;
margin-right: auto;
line-height: 25px;
width: 130px;
height : 30px;
}
.content .main2 .t1 th a{
color: #b76115;
}
#footer {
font-family:Helvetica, Verdana, sans-serif;
color: #fff;
height: 20px;
background-color:#333;
margin: 20px 0px 0px 0px;
padding: 20px;
text-align: center;
font-size:0.8em;
letter-spacing: 2px;
clear:both;
text-align:center;
}
/* div table */
.Table
{
display: table;
}
.Title
{
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
padding: 0px;
}
.Heading
{
display: table-row;
}
.Row
{
display: table-row;
}
.Cell1
{
display: table-cell;
padding-left: 0px;
padding-right: 0px;
height: 350px;
}
.Cell2
{
display: table-cell;
text-align: center;
padding-left: 0px;
padding-right: 0px;
background-color: #eee;
width: 51%;
height: 350px;
vertical-align: middle;
}
.about_low3{
background-color: #eee;
height: 150px;
}
/*div about*/
.Table
{
width: 100%;
display: table;
}
.Title
{
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
padding: 0px;
}
.Heading
{
display: table-row;
}
.Row
{
display: table-row;
}
.about_Cell2
{
display: table-cell;
padding-left: 0px;
padding-right: 0px;
width: 500px;
height: 650px;
}
.Cell1
{
display: table-cell;
padding-left: 0px;
padding-right: 0px;
background-color: #000;
width: 532px;
height: 650px;
vertical-align: middle;
color: #eee;
}
.cell_left{
padding-left: 80px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Baan Yang - Korean Thai Restaurant & Cafe</title>
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Header -->
<div class="header">
<div class="div-left">
<div id="logo"><p><strong>Baan Yang</strong></p></div>
<div id="sub_logo">Korean Thai Restaurant and Cafe</div>
</div>
<div class="div-right">
<ul class="nav">
<li>Home</li>
<li>Baan Yang</li>
<li>Menu</li>
<li>Reservations</li>
<li>Location</li>
<li>Jeju</li>
</ul>
</div>
</div>
<!-- End Header -->
<!-- Begin Content -->
<div class="content" >
<div class="Row">
<div class="Cell1">
<div class="cell_left">tttt</div>
</div>
<div class="about_Cell2"><img src="img/2.jpg" width="500px" height="650px" alt="baan yang" /></div>
</div>
<div class="about_low3"> </div>
<!-- End Content -->
<!-- Begin Footer -->
<div id="footer">Copyright © 2015 Baan Yang</div>
<!-- End Footer -->
</div>
<!-- End Wrapper -->
</body>
</html>

Try using
<div class="about_Cell2" style="background-image:img/2.jpg"></div>
instead of
<div class="about_Cell2"><img src="img/2.jpg" width="500px" height="650px" alt="baan yang" /></div>