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 : -
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.
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.
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}
}