-1

I am building a website using Bootstrap.

The website looks fine on Chrome and Firefox.

But when I open my website on Safari, the columns are way longer there so I get a huge white space on that page.

Here you can see the difference between Chrome and Safari.

Left is Safari | Right is Chrome

enter image description here

Here is my HTML and CSS I use for the column:

For the columns I use the standard bootstrap CSS.

.tipsDetails .content {
    font-family: "H-Lt", sans-serif;
    font-size: 16px;
    color: #56565a;
    // width: 80%;
    margin: 0 auto 150px;
    column-count: 2;
 -webkit-column-break-inside: avoid;
   min-height: 1px;
}
<div class="container tipsDetails desktop">
 <div class="row">
  <div class="image img-responsive"><img  src="<?php echo $image2[0]; ?>"></div>
  <div class="col-md-12 col-sm-12" style="text-align: center;"><img class="arrow-down2" src="<?php echo get_template_directory_uri();?>/images/arrow_down.png" alt="arrow"/></div>
  <div class="col-md-12 col-sm-12 title"><?php the_title();?></div>
  <div class=" " style="width:75%; margin:0 auto;">
     <div class="col-md-12 col-sm-12 content" id="tipsContent"><?php the_content(); ?></div> 
     <div class="col-md-12 col-sm-12 content" id="content2" style="display:none;"></div>
  </div>
jwpfox
  • 5,124
  • 11
  • 45
  • 42
hans kazan
  • 57
  • 6
  • Please include the pictures and code here without us needing to leave SO. Anyay, you'll need specific "if this browser, do that" if you don't want to rely on how the browsers interpret the stylesheets. As of October 2016 roughly 3.6% of internet users use Safari. Also, the difference is quite minor so you might want to reconsider even giving this a though. Good luck if you really have to dig into it. -- http://www.w3schools.com/browsers/ – Jonast92 Nov 24 '16 at 11:04
  • Browsers have different default stylesheets. If you want the same look everywhere, you need to override all the defaults in your CSS. – Barmar Nov 24 '16 at 12:23

1 Answers1

0

Hard to say if it is the cause of your problem without seeing your full generated html, but // is not a valid comment in CSS. You need to use:

/* width: 80%; */
Don't Panic
  • 13,965
  • 5
  • 32
  • 51