Click here to Skip to main content
15,310,056 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
Website: showdeal.in I have places a static banner from snapdeal but the banner runs out of its container box. The static banner is a javascript with fixed height and width mentioned in it. Here is the code:
HTML
<div class="col-lg-4 col-md-4">
    <div class="panel panel-primary">
        <div class="panel-heading">TITLE</div>
        <div class="panel-body">
            <div data-SDID="someidhere"  data-identifier="SnapdealAffiliateAds" data-height="auto" data-width="auto" >
            </div><script async id="snap_zxcvbnhg" src="https://affiliate-ads.snapdeal.com/affiliate/js/snapdealAffiliate.js"></script>
        </div>
    </div>
</div>

I have used following jquery in head section (also tried it after body) to add responsive classes to the image i get from snapdeal:
JavaScript
<script>
    $(document).ready(function() 
    {
        $("img").addClass("img");
        $("img").addClass("img-responsive");
    });
</script>

but, no wonders. Please help.

What I have tried:

static width to image, auto width and auto height to images and responsiveness to image.
Actually, the view in mobile is fine, but on laptop, the tiles get out of the container. I tried auto in place of fix width, still it didnt work because the script overrides the dimensions at runtime. please see the view-source of showdeal.in for rendered result.
Posted
Updated 18-Oct-16 4:14am
v3
Comments
Suvendu Shekhar Giri 8-Oct-16 14:50pm
   
Can host the code in jsfiddle.net?

Hi,

Why are you adding the responsive class via jquery? Just have the class assigned to the element as standard:
HTML
<img class="img-responsive" src="#">

This sets a 100% width and auto height to the image. I would also check to ensure that you have no other CSS overwriting the above.

Hope this helps.
   
Take a look at the script you've linked to. It's not creating an <img>; it's creating an <iframe>.

HTML iframe tag[^]

CSS in the outer document has no effect on the styles applied to a document hosted in an <iframe> element.

The best you can do is use Bootstrap's Responsive Embed[^] classes to ensure that the <iframe> resizes to fit the available space. How the embedded document responds to that is beyond your control.

Also note that the script you've linked to adds "px" to the end of the data-width and data-height attributes, so specifying "auto" isn't going to work. If you look in your browser's developer tools, you'll probably see an error logged from the external script.
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900