How to make Images/Buttons responisve for mobile webbrowsing?

[Chrisvr]

Hi folks,

I have this one question. We are using this Responsive Wordpress thme with HTML en CSS3.

http://www.saasdata.nl

No we have made Metro design buttons, for example on this page: http://www.saasdata.nl/diensten/

In a webbrowser it is looking great, but on an iPhone, the webpage overall is been repsonsive to the size of the iPhone browser but the Metro design buttons are WAY TOO BIG.

Is there a way to make even these buttons responsive?

The code we are using is this:

<table cellspacing="5" cellpadding="5">
<tbody>
<tr>
<td>
<div class="button" style="width: 300px; height: 140px; margin-right: 5px; background-color: #04276e; background-repeat: no-repeat; cursor: pointer;" onclick="window.location.href='http://www.saasdata.nl/hosted-desktop/'" onmouseover="this.style.backgroundColor = '#99ACD4'" onmouseout="this.style.backgroundColor = '#04276E';" onclick="this.style.backgroundColor = '#99ACD4'">
<p style="position: relative; text-align: right; top: 30px; margin: 0 10px 10px 10px; font-family: 'Segoe UI', Arial, Helvetica; font-size: 25pt; color: white; visibility: visible;">Online Werkplek</p>

</div></td>
<td>
<div class="button" style="width: 300px; height: 140px; margin-right: 5px; background-color: #04276e; background-repeat: no-repeat; cursor: pointer;" onclick="window.location.href='http://www.saasdata.nl/communication/'" onmouseover="this.style.backgroundColor = '#99ACD4'" onmouseout="this.style.backgroundColor = '#04276E';" onclick="this.style.backgroundColor = '#99ACD4'">
<p style="position: relative; text-align: right; top: 30px; margin: 0 10px 10px 10px; font-family: 'Segoe UI', Arial, Helvetica; font-size: 25pt; color: white; visibility: visible;">Communicatie</p>

</div></td>
</tr>
</tbody>
</table>

Thanks in advance for the answer!

 

[Phreaddee]

bwahaha!
take it out of the table!


for what its worth

<div class="imagebox">
<img src="#" />
</div>

.imagebox {
width:25%;
}

.imagebox img {
max-width:100%;
max-height:100%;
}

any images that are within a div with a class of imagebox will resize to fill exactly 100% of the parent, either height or width, and retain proportion.
so as your imagebox decreases in size, as the viewport shrinks, so will the image.

 

[Phreaddee]

so yes, set the width on the parent and make it flexible, then the children (ie the buttons) will change accordingly

 

[Phreaddee]

and use css rather than inline js to get the hover effect. and use an anchor for the address.

<a href="#" class="button">link title</a>

is all it needs to be.