SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2005
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,197
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    .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}
    }
    Code:
    <div style="margin: 2% 0 11% 0;" class="cert">
    However, I would guess that the above breaks the terms of service as the image size is being modified.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •