1. FCPeggy
  2. Sherlock Holmes
  3. Commercial Templates
  4. Saturday, 30 June 2018
  5.  Subscribe via email
Does anyone have any ideas on how to make this embedded iframe from GolfAdvisor "responsive"?
Each line has a defined width. I'm trying to understand how to change this coding so it can be responsive but I'm getting confused.

I wanted to put the embedded iframe on the left side of the article with a written paragraph of text beside it. I've tried tables and divs but not understanding what to change I'm stuck. (I'm using free software called "sourcerer" to code in TinyMCE without the editor stripping out my coding. - {source}{source} tags)

{source}
<div class="row">
<div class="span3"><!-- GolfAdvisor.com badge start -->
<style> div#golfadvisor_b1 *{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}div#golfadvisor_b1{width:300px;height:100px}div#golfadvisor_b1 div{position:relative;width:300px;height:100px;background:#FAFAFA;border:1px solid #DCDCDC}div#golfadvisor_b1 div p#gavd{position:absolute;top:37px;left:15px;width:270px;padding:3px 0;margin:0;font-family:Roboto;font-weight:300;text-align:center;font-size:18px;color:#848584;line-height:24px;border-bottom:1px solid #E3E3E3;border-top:1px solid #E3E3E3}div#golfadvisor_b1 div p#gavr{position:absolute;top:75px;left:55px;padding:0;margin:0;font-family:Roboto;text-align:center;font-weight:400;font-size:12px;color:#62A7AE;line-height:16px}div#golfadvisor_b1 div img#gavla{position:absolute;top:10px;left:15px}div#golfadvisor_b1 div img#gavra{position:absolute;top:8px;right:10px} </style> <link href='https://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'> <script src="https://badge.golfadvisor.com/api/courses/badge/27963"></script> <div id="golfadvisor_b1"> <a href="https://www.golfadvisor.com/courses/27963-rivendell-golf-club/?utm_campaign=badge_1&utm_medium=website&utm_source=badges"; target="_blank"> <div> <img id="gavla" src="https://gav_static.s3.amazonaws.com/badges/ga-badge-logo.png"> <script type='text/javascript'> try { var d=window.golfadvisor_rb[27963]; if (d['reviews'] > 0) { document.write('<img id="gavra" src="https://golfnow.ugc.bazaarvoice.com/0079ga/' + d['rating'] +'/5/rating.png"><p id="gavd">This course is rated '+ d['rating'] + ' out of 5 </p><p id="gavr">Read all '+ d['reviews'] + ' Reviews / Write Review</p>'); } else { document.write('<img id="gavra" src="https://golfnow.ugc.bazaarvoice.com/0079ga/' + d['rating'] +'/5/rating.png"><p id="gavd">Be the first to review this course</p><p id="gavr" style="left:95px">Write a review today</p>'); } } catch (e) { document.write('<p id="gavd" style="">Write a review today!</p>'); } </script> <noscript> <p id="gavd" style="">Write a review today!</p> </noscript> </div> </a> </div>
<!-- GolfAdvisor.com badge end --></div>
<div class="span6">If you have enjoyed your day at Rivendell or if you have a comment, please visit Golf Advisor and write a review of the course.<br/>
Thank you for your business.</div>
</div>
{/source}

Screenshot attached x 2. First full screen. Second, webdeveloper in Firefox showing responsive overlap.

Scratching my head trying to figure out what to change. Any help from anyone would be appreciated.
Attachments (2)
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

Could you please include a URL to a live example of your code?

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you! I have emailed the link/address to you. Some countries outside of Canada are blocked, if you cannot see the link, please send me your IP address.
Cheers,
Peggy
  1. more than a month ago
  2. Commercial Templates
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
Resent email to you with log in details. Thank you.
  1. more than a month ago
  2. Commercial Templates
  3. # 3
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters
the trademark holder in the United States and other countries.