About This Ticket

Additional content divs

by holidaynerja / February 1, 2016, 11:22 pm

Hi, I am trying to modify my property details page and include an availability chart and google map below the content table

Here is the page I am working on

http://www.holidaynerja.co.uk/mobile/property-details.html

Here is a link to an image of what I am trying to acheive, so I need 2 new content holders one beside each other

http://www.holidaynerja.co.uk/mobile/images/banner/propdetail.jpg

Many thanks for your continued support.

 

 

 

Hi, I have moved on a little and have managed to add the divs which hold the availability chart and google map as you can see on the updated link

http://www.holidaynerja.co.uk/mobile/property-details.html

I have 2 issues, one being that the calendar does not show on IE, works fine on FF and also the divs I have added are not responsive so if I look on iPhone the calendar and map are stacked on top of each other :(

The css I added for these divs I kept on the html page

#wrapper {width:100%; height:300px; position:relative;}
.float {background-color:white; height:300px; margin:0; padding:0; color:white;}
.left {background-color:white; position:fixed; width:450px; padding-left:40px;}
.right {float:right; width:450px; padding-left:40px; padding-top:20px;}

Any input greatly appreciated.

 

Staff

Hello 

Your calender embed code not loading my side in any browser. 

But I fix the HTML layout please check with it.

Below is sample code for changes 

Your code

<div id="wrapper">
    <div class="float left">
    <iframe frameborder="0" border="0" style="width: 100%; height:240px;" src="https://www.n2works.com/availability/availability.php?uid=1209&amp;id=6393&amp;m2=2&amp;xconf=750152141"></iframe>
    
    </div>
    <div class="float right">
    <div id="gmap" class="map-responsive" align="center" style="width: 90%; height: 240px;"   ></div>
    
    
    </div>
</div>

 

After chagnes 

<div class="property-section-v1 clearfix">
  <div class="col-md-6 col-xs-12">
    <iframe frameborder="0" border="0" 
    style="width: 100%; height:240px;" 
    src="https://www.n2works.com/availability/availability.php?uid=1209&amp;id=6393&amp;m2=2&amp;xconf=750152141"></iframe>
  </div>
  <div class="col-md-6 col-xs-12">
    <div id="gmap" 
    class="map-responsive" align="center" 
    style="width: 90%; height: 240px;">
    </div>
  </div>
</div>

 

Please remove this code It's not needed now.

#wrapper {width:100%; height:300px; position:relative;}
.float {background-color:white; height:300px; margin:0; padding:0; color:white;}
.left {background-color:white; position:fixed; width:450px; padding-left:40px;}
.right {float:right; width:450px; padding-left:40px; padding-top:20px;}

 

Add this style in style.css and the end of file

.property-section-v1 {
    background:#fff;
    margin:20px 0 0;
    padding:15px 0;
} 

Thanks and regards,
​0effortteam

Thats great, thank you very much :)