Flexbox is not side by side on Safari - safari

I am trying to put the divs side by side with flexbox, but on safari for mac is not working.
Chrome, Firefox, Edge and Internet Explorer 11 it is working.
Someone can help me? hehe
all browsers
safari
It looks like the white block has box-sizing: content-box, but it does not have...
Does anyone know why?
The code: fiddle
.flex {
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.box-full {
width: 100%;
border-radius: 3px;
background-color: #fff;
box-shadow: 0 2px 20px 0 rgba(0,0,0,0.08);
margin-bottom: 34px;
}
.box-fridge {
&:last-of-type {
margin-bottom: 40px;
}
.block-left {
padding: 21px 22px;
flex-grow: 2;
}
.block-right {
border-radius: 0 3px 3px 0;
background-color: #4681A8;
max-width: 190px;
flex-grow: 1;
}
.title-fridge {
font-size: 24px;
font-weight: 500;
line-height: 29px;
}
.desc {
font-size: 12px;
font-weight: 300;
line-height: 15px;
margin-top: 17px;
}
.block {
align-self: center;
color: #fff;
flex: 1 1 auto;
}
.price {
font-size: 24px;
line-height: 29px;
}
.period {
font-size: 10px;
line-height: 12px;
margin-top: 6px;
text-transform: uppercase;
}
}

Related

datepicker last day of the month styling

So basically I've done my best to style the datepicker for my project.
My last hurdle is to style the last days of the month if they're in range of the selection to be all curvy like all the other days at the start and end of a week.
Can anyone please help with this problem? Any sort of help is highly appreciated thank you.
This is my stylesheet.
.wpm-datepicker {
font-weight: 600;
box-shadow: none;
background-color: transparent;
font-family: "Inter", sans-serif;
width: 100%;
.bs-datepicker-multiple {
margin: 0 0 10px;
border-radius: 8px;
box-shadow: $color-light-blue-grey 0 6px 13px;
flex-basis: 50%;
&:first-of-type {
margin-right: 20px;
}
&:nth-of-type(2) {
margin-left: 20px;
}
}
.bs-datepicker-container {
padding: 0;
width: 100%;
}
.bs-datepicker-head {
background-color: #0f2332 !important;
border-radius: 8px 8px 0 0;
padding: 17px 10px;
height: auto;
&::after {
content: unset;
}
button:nth-of-type(1) span,
button:nth-of-type(4) span {
color: transparent;
left: -12px;
top: 10.5px;
display: inline-block;
border-right: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
width: 10px;
height: 10px;
border-radius: 1px;
}
button:nth-of-type(1) span {
transform: rotate(135deg);
}
button:nth-of-type(4) span {
transform: rotate(-45deg);
}
}
.bs-datepicker-body {
border-radius: 0 0 8px 8px;
border: 0.1px solid #e5e5e5;
padding: 19px;
table th {
color: #970202 !important;
font-weight: 600;
text-transform: uppercase;
padding: 14px 0;
}
table th:first-of-type,
table td:first-of-type {
display: none;
}
table td {
color: #0f2332 !important;
}
table td span .is-other-month {
color: #aab9c3 !important;
}
table.days span {
line-height: 31px;
font-size: 14px;
}
table.days span.in-range:not(.select-start)::before {
background: #ffcaca !important;
right: 19px;
height: 24px;
top: 4px;
}
table td::before,
table td span::before {
left: -20px !important;
}
table td span.selected,
table td.selected span,
table td span[class*="select-"]::after,
table td[class*="select-"] span::after,
table td.is-highlighted:not(.disabled):not(.selected) span,
table td span.is-highlighted:not(.disabled):not(.selected) {
background-color: #ffcaca;
width: 24px;
height: 24px;
line-height: 24px;
}
table td span.is-other-month,
table td.is-other-month span {
background-color: transparent !important;
}
table td span.selected,
table td.selected span,
table td span[class*="select-"]::after,
table td[class*="select-"] span::after {
background: #e60000 !important;
}
table td:nth-of-type(2) span::before {
border-radius: 16px 0 0 16px;
left: 8px !important;
}
table td:nth-of-type(8) span::before {
border-radius: 0 16px 16px 0;
right: 4px !important;
}
table td:nth-of-type(8) span.select-end::before {
right: 10px !important;
}
table.days span.in-range.select-end::before {
right: 20px;
}
}
bs-days-calendar-view {
&:nth-of-type(1) bs-datepicker-navigation-view {
display: flex;
button {
padding: 0 4px;
font-size: 14px;
&:nth-of-type(1) {
padding-left: 24px;
padding-right: 10px;
}
&:nth-of-type(1) span {
bottom: 2px;
}
&:nth-of-type(3) {
padding: 0;
}
}
}
&:nth-of-type(2) bs-datepicker-navigation-view {
display: flex;
justify-content: flex-end;
button {
padding: 0 4px;
font-size: 14px;
&:nth-of-type(3) {
padding: 0;
}
&:nth-of-type(4) {
padding-left: 30px;
padding-right: 10px;
}
&:nth-of-type(4) span {
bottom: 2px;
}
}
}
}
}
My component has this for the bsConfig
this.bsConfig = {
containerClass: "wpm-datepicker",
};
And this how I have it for my markup.
<bs-daterangepicker-inline
[bsConfig]="bsConfig"
[bsValue]="bsRangeValue"
></bs-daterangepicker-inline>

FlexSlider Arrows working but not visible

I tried following advice about this issue from other chat rooms but with no luck. I am using Unbounce and I copied all codes from one old landing page to a new one. Everything works except the arrows are not visible (yet they are clickable, they work).
All I managed to do so far was removing the frame around the arrows.
Any idea what could be wrong?
Link to the new LP
Link to the old LP with working Flexslider
<style>
a {
text-decoration: none !important;
}
/*Testimonials slider*/
.testimonial-container {
background-color: transparent;
width: 100%;
}
.cd-testimonials-wrapper {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto;
background-color: transparent;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding: 25px 0px 40px 0;
z-index: 1;
}
.testimonial-content {
max-width: 1000px;
width: 80%;
margin: 0 auto 30px auto;
}
.cd-testimonials {
color: rgba(130, 132, 139, 1);
text-align: center;
list-style: none;
padding: 0;
margin: 0;
}
.cd-testimonials > li {
position: absolute;
opacity: 0;
font-family: 'Fira Sans', sans-serif;
}
.cd-testimonials > li:first-child {
position: relative;
opacity: 1;
}
.testimonial-content p {
font-style: italic;
line-height: 1.4;
margin-bottom: 30px;
padding: 0 14px;
font-size: 19px;
color: #284A6A;
}
.cd-author .cd-author-info {
display: inline-block;
vertical-align: top;
color: #0058A9;
font-size: 16px;
font-weight: 500;
text-align: center;
line-height: 1
}
ul.cd-author-info {
list-style: none;
}
ul.cd-author-info li span {
font-size: 14px;
line-height: 32px;
font-style: italic;
font-weight: 300;
color: #9c9c9c;
}
.flex-direction-nav a {
text-decoration: none;
display: block;
width: 50px;
height: 100%;
margin: 0px 0 0;
position: absolute;
z-index: 9999;
top: 0;
opacity: 1;
background: transparent;
cursor: default;
color: transparent;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.flex-direction-nav a:before {
font-size: 52px;
font-family: Arial;
content: "\f053";
position: absolute;
display: block;
top: 50%;
cursor: pointer;
color: transparent;
padding: 14px 10px 14px 10px;
}
.flex-direction-nav a.flex-next:before {
content: "\f054";
padding: 14px 20px 14px 10px;
}
.flex-direction-nav .flex-prev {
left: 0px;
}
.flex-direction-nav .flex-next {
right: 0px;
text-align: right;
}
.flexslider:hover .flex-direction-nav .flex-prev {
opacity: 1;
left: 0px;
}
.flexslider:hover .flex-direction-nav .flex-prev:hover {
opacity: 1;
}
.flexslider:hover .flex-direction-nav .flex-next {
opacity: 1;
right: 0px;
}
.flexslider:hover .flex-direction-nav .flex-next:hover {
opacity: 1;
}
.flex-direction-nav .flex-disabled {
opacity: 0!important;
filter: alpha(opacity=0);
cursor: default;
}
.flex-control-paging li a {
width: 6px;
height: 6px;
display: block;
background: #666;
background: rgba(0, 0, 0, 0.4);
cursor: pointer;
text-indent: -9999px;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.flex-control-paging li a:hover {
background: #333;
background: rgba(0, 0, 0, 0.7);
}
.flex-control-paging li a.flex-active {
background: #000;
background: rgba(2, 23, 31, 1);
cursor: default;
}
.flex-control-nav {
bottom: 30px;
position: absolute;
margin: 0 auto;
padding: 0;
text-align: center;
width: 100%;
}
.flex-control-nav li {
display: inline-block;
padding: 0px 5px 0px 5px;
}
/*Footer icons custom style*/
.footer-icons {
text-align: left;
}
.footer-icons a {
margin-right: 10px;
color: #fff;
}
#media screen and (max-width: 767px) {
.cd-author .cd-author-info {
line-height: 1.4;
}
.cd-author .cd-author-info {
font-size: 16px;
}
.testimonial-content p {
font-size: 16px;
}
.flex-direction-nav a {
width: 30px;
}
.flex-direction-nav a:before {
font-size: 30px;
}
.flex-direction-nav a:before {
padding: 14px 0px 10px 0px;
}
.flex-direction-nav .flex-prev {
left: 0px;
}
.flex-direction-nav .flex-next {
right: 0px;
text-align: right;
}
.flexslider:hover .flex-direction-nav .flex-prev {
opacity: 1;
left: 0px;
}
.flexslider:hover .flex-direction-nav .flex-prev:hover {
opacity: 1;
}
.flexslider:hover .flex-direction-nav .flex-next {
opacity: 1;
right: 0px;
}
}
</style>
You lose Font Awesome css, which is required as the nav arrow.
add
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
to <head> section. (Just as the working page does, check it's source code line 2825). Good luck.

How to change mobile menu respond width?

In prestashop 1.7 moble menu is active from 768 screen size . I need to change this size to 991 . How to change this ? Also there is anyway to know viewport size in tpl.
You can use this piece of css if you are using bootstrap.css
#media (min-width: 768px) and (max-width: 991px) {
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-nav .open .dropdown-menu > li > a {
line-height: 20px;
}
.navbar-nav .open .dropdown-menu > li > a,
.navbar-nav .open .dropdown-menu .dropdown-header {
padding: 5px 15px 5px 25px;
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
}
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
/*margin: 7.5px -15px;*/
margin: 7.5px 50px 7.5px -15px
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}
Edit your /prestashop/themes/[theme]/assets/js/theme.js file.
Search for 768 or default.responsive.min_width and replace the numeric value with your pixel value.

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>