Making Trip Advisor Certificate of Excellence Code Responsively Fit In With Webpagei

Good Morning All

I thank you in advance for any assistance and greatly appreciate this resource.

I have designed a restaurant website and have made most aspects of the site responsive.

The restaurant has recently been awarded the trip advisor certificate of excellence, and you are allowed to add the following code to the site, without alterations : -

"<div id=“TA_certificateOfExcellence718” class=“TA_certificateOfExcellence”>
<ul id=“UKbN8wvN0we” class=“TA_links xI2LWREOU”>
<li id=“8s2L0P9” class=“2EX1CuR”><a href=“http://www.tripadvisor.co.uk/Restaurant_Review-g186361-d789990-Reviews-Moya-Oxford_Oxfordshire_England.html”>Moya</a></li>
</ul>
</div>
<script src=“http://www.jscache.com/wejs?wtype=certificateOfExcellence&amp;uniq=718&amp;locationId=789990&amp;lang=en_UK&amp;year=2013”></script>
"
The problem is found on my homepage :-

http://tinyurl.com/k4ou8dt

In order to fit the formatting of the boxes at the bottom of the page, I have added a div that sets the margins to align the boxes at the bottom of the page together. : -

<div style=“margin: 2% 0 11% 0;”>

However, this box breaks up on smaller devices and doesn’t fit in with the rest of the site. Is there any way that I can correct this? I’ve played around but I’m yet to find a solution.

Again thank you in advance for any help

Didcot84

That styling doesn’t seem to be helping you much. Would it be possible to take a screen shot of what the JS pulls in and just use it as an image in your page? Then you could format that fourth box just lie the others, and not have to mess with that ugly JavaScript.

Hi,

If the TOS say that you can’t alter the code or the look of the element then there’s little you can do to make it fit in a space when that space is smaller than the element concerned. You’ll just have to find somewhere in the page where it doesn’t conflict with the size of other elements.

If you are allowed to scale the image then you can set it to match your media queries but you will need to add a class to the element where you have presently used inline styling for the margins.



.cert {margin:0!important}
.cert {min-height:151px}

@media all and (max-width: 1200px) {
.cert{min-height:122px}
.cert img{max-height:50px;height:auto;width:100%}
}

@media all and (max-width: 960px) {
.cert{min-height:92px}
.cert img{max-height:22px;}
}
@media all and (max-width: 772px) {
.cert{min-height:0}
.cert img{max-height:none;width:100%;height:auto}
}



<div style="margin: 2% 0 11% 0;" [B]class="cert">[/B]


However, I would guess that the above breaks the terms of service as the image size is being modified.