I know my question is quite similar to other people, but the case is different.
This is how it shown in Chrome
Safari
You can see the map disappears in safari. I have tried some methods including min-height in percentage but not working.
Take note: I want to make the image and text columns have same height, the size will be changed according to screen size, so please don't suggest a fix width and height for me.
Hoping that some of you could provide me with some advice. Thanks!
$('#tabs').tabs({
activate: function (event, ui) {}
});* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100%}
#Contact, #contact-panel{ height: 92%;}
.fullwidth_contact{
display: flex;
display: -moz-box;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-flex;
flex-direction: row;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
height: 92%;
margin: 0;
padding:0;
}
.rowdisplay_contact {
display: flex;
display: -moz-box;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-flex;
flex-direction: column;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
height: 90%;
margin: 0;
padding:0;
}
.repeat-xcontact {
flex: 1;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.width70{flex-basis: 70%;}
.width30{flex-basis: 30%;}
.country_box{
font-size: 25px;
line-height: 1.2em;
padding: 12% 10%;
background-color: #5ba4ee;
}
.address_box{
padding: 12% 10%;
background-color: #ccc;
}
.map { background-image: url("http://geology.com/world/world-map.gif");}
ul.tabs{
margin:0;
padding: 16% 0 0 0;
list-style-type: none;
}
ul.tabs li{
padding: 5px 0;
}
ul.tabs li a{
color: #fff;
font-weight: bold;
}
ul.tabs li a:hover, .ui-state-active{
font-weight: bold;
color: #1d70c4;
outline:none;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
font-weight: bold;
color: #1d70c4;
text-decoration: none;
}
ul.tabs li a:focus {
outline:none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="tabs" class="fullwidth_contact">
<div class="repeat-xcontact map width70"></div>
<div class="repeat-xcontact width30">
<!-- <div class="rowdisplay_contact width100"> -->
<div class="repeat-xcontact country_box">
<div class="txt8">CONTACT</div><br/>
<ul class="tabs" data-persist="true">
<li><a href="#view1">Content 1</a></li>
<li><a href="#view2">Content 2</a></li>
<li><a href="#view3">Content 3</a></li>
</ul>
</div>
<div class="repeat-xcontact address_box">
<div id="view1">
<p class="country_title">Content 1</p>
<p>Cras dignissim lectus sed dui ullamcorper, et suscipit justo vehicula.</p>
<p>T 1234 5678</p>
<p>F 1234 5678</p>
<p>E <script language="JavaScript"><!--
var name = "info";
var domain = "test.com";
document.write('<a href=\"mailto:' + name + '@' + domain + '\">');
document.write(name + '@' + domain + '</a>');
// --><!--</script></p>
</div>
<div id="view2">
<p class="country_title">Content 2</p>
<p>Cras dignissim lectus sed dui ullamcorper, et suscipit justo vehicula.</p>
<p>T 1234 5678</p>
<p>F 1234 5678</p>
<p>E <script language="JavaScript"><!--
var name = "info";
var domain = "test.com";
document.write('<a href=\"mailto:' + name + '@' + domain + '\">');
document.write(name + '@' + domain + '</a>');
// --><!--</script></p>
</div>
<div id="view3">
<p class="country_title">Content 3</p>
<p>Cras dignissim lectus sed dui ullamcorper, et suscipit justo vehicula.</p>
<p>T 1234 5678</p>
<p>F 1234 5678</p>
<p>E <script language="JavaScript"><!--
var name = "info";
var domain = "test.com";
document.write('<a href=\"mailto:' + name + '@' + domain + '\">');
document.write(name + '@' + domain + '</a>');
// --><!--</script></p>
</div>
</div>
<!-- </div> -->
</div>
</div>
