I am currently developing a website for a client and encountering some display issues specifically on Chrome using an Android phone. The text in a regular div unexpectedly enlarges to 42px on my Samsung Galaxy S3 device.
Interestingly, there are no compatibility problems when I view the site on Firefox on the same mobile phone, nor do I face any issues when accessing it on a desktop computer.
The CSS code causing this anomaly is as follows:
#content.is-front .post:first-child .post-title-excerpt {
left: 2%;
float: left;
z-index: 99;
bottom: 2%;
border: none;
width: 92%;
padding: 2%;
overflow: hidden; /* not present on the live site. It could prevent text from overflowing the box but won't affect the enlarged font size. */
color: #ffffff;
max-height: 133px;
position: absolute;
font-size: 14px !important;
background: rgba(0, 0, 0, .7);
}
As for the HTML structure, it resembles the following snippet:
<div id="post-138" class="post-138 post type-post status-publish format-standard hentry category-torsten tag-featured">
<div class="post-header">
<a href="http://copenhero.dk/torsdagsbar-guide/">
<img width="940" height="390" src="http://copenhero.dk/wp-content/uploads/2014/03/Torsdagsbar-forside-featured2.jpg" class="attachment-front-featured-thumb wp-post-image" alt="Torsdagsbar forside featured2"> </a>
<div class="post-title-excerpt">
<div class="post-category"><a href="http://copenhero.dk/kategori/torsten/">Tørsten</a></div>
<div class="post-title"><a href="http://copenhero.dk/torsdagsbar-guide/">Guide: Torsdagsbarer i København</a></div>
<div class="post-excerpt"><p>Øl, drinks og shots har som bekendt ikke kun den ønskede effekt i weekenden. Torsdag kan være en perfekt gå-ud dag med gode tilbud, flere siddepladser og knapt så meget pres på fadølshanerne rundt omkring i København. Copenhero har været på field-research, og er gået videnskabeligt og alkoholisk til værks for at finde lidt for […]</p>
</div>
<a class="post-permalink" href="http://copenhero.dk/torsdagsbar-guide/">Læs mere</a>
</div>
</div>
</div>