Parlanchina Parlanchina - 3 months ago 27
CSS Question

Images are not resizing correctly

This is my test amp page where I was able to validate and make everything work except one thing - https://www.hawaiidiscount.com/iva/amp/tours.html

There is an issue with the yellow buttons under the header image. Even though they appear responsive there is a large gap under them that shows on small screens.

I figured the problem is:

<amp-img src="https://www.hawaiidiscount.com/Portals/0/Skins/HD-custom-design-s/images/Trans.png" width="186" height="121" ></amp-img>


In order to make Trans.png responsive I tried adding layout="responsive" behind width="186" height="121"

This caused the button to disappear from the page though.

Is there any way to fix this issue?

My code where the images are is:

<div align="center">
<amp-img src="/Portals/0/tours-cat.jpg" itemprop="image" width="740" height="300" layout="responsive"></amp-img>
<div class="ButtonContainer"> <a href="https://www.hawaiidiscount.com/oahu/tours.htm">
<div class="OIslandButtons">
<amp-img src="https://www.hawaiidiscount.com/Portals/0/Skins/HD-custom-design-s/images/Trans.png" width="186" height="121" ></amp-img>
</div>
</a> <a href="https://www.hawaiidiscount.com/maui/tours.htm">
<div class="MIslandButtons">
<amp-img src="https://www.hawaiidiscount.com/Portals/0/Skins/HD-custom-design-s/images/Trans.png" height="121" width="186" ></amp-img>
</div>
</a> <a href="https://www.hawaiidiscount.com/kauai/tours.htm">
<div class="KIslandButtons">
<amp-img src="https://www.hawaiidiscount.com/Portals/0/Skins/HD-custom-design-s/images/Trans.png" height="121" width="186" ></amp-img>
</div>
</a> <a href="https://www.hawaiidiscount.com/bigisland/tours.htm">
<div class="BIslandButtons">
<amp-img src="https://www.hawaiidiscount.com/Portals/0/Skins/HD-custom-design-s/images/Trans.png" height="121" width="186" ></amp-img>
</div>
</a> </div>
</div>


And this is the CSS for the buttons:

.ButtonContainer {
max-width:100%;
height:auto;
}
.CatImg {
max-width:100%;
max-height:auto;
}
.OIslandButtons {
display:inline-block;
vertical-align:top;
margin-right:-4px;
background-image:url(https://www.hawaiidiscount.com/Portals/0/Skins/HD-custom-design-s/images/OahuB.jpg);
background-size:100% auto;
background-repeat:no-repeat;
}
.OIslandButtons:hover {
background-image:url(https://www.hawaiidiscount.com/Portals/0/Skins/HD-custom-design-s/images/OahuR.jpg);
}
.MIslandButtons {
display:inline-block;
vertical-align:top;
margin-right:-4px;
background-image:url(https://www.hawaiidiscount.com/Portals/0/Skins/HD-custom-design-s/images/MauiB.jpg);
background-size:100% auto;
background-repeat:no-repeat;
}
.MIslandButtons:hover {
background-image:url(https://www.hawaiidiscount.com/Portals/0/Skins/HD-custom-design-s/images/MauiR.jpg);
}
.KIslandButtons {
display:inline-block;
vertical-align:top;
margin-right:-4px;
background-image:url(https://www.hawaiidiscount.com/Portals/0/Skins/HD-custom-design-s/images/KauaiB.jpg);
background-size:100% auto;
background-repeat:no-repeat;
}
.KIslandButtons:hover {
background-image:url(https://www.hawaiidiscount.com/Portals/0/Skins/HD-custom-design-s/images/KauaiR.jpg);
}
.BIslandButtons {
display:inline-block;
vertical-align:top;
background-image:url(https://www.hawaiidiscount.com/Portals/0/Skins/HD-custom-design-s/images/BigIslandB.jpg);
background-size:100% auto;
background-repeat:no-repeat;
}
.BIslandButtons:hover {
background-image:url(https://www.hawaiidiscount.com/Portals/0/Skins/HD-custom-design-s/images/BigIslandR.jpg);
}

RAN RAN
Answer

Please apply width for image wrapper div.

.ButtonContainer div {
    float: left;
    width: 25%;
}

Notes:

  • Specify a CSS class for the particular div tag for applying the properties.
  • Apply width percentage based on the margin and padding.
Comments