Reputation: 169
I have a html code like this:
<div id="markContainer" class="maxW1000">
<div id="titleRow">
Title
</div>
<div class="card-box listPhotos">
<iframe id="mNote"
src="https://classlive.stume.net/mnote.html" frameborder="0">
</iframe>
</div>
</div>
The CSS is like this:
#titleRow{
background-color: #00a7d0;
height: 40px;
}
.listPhotos {
width: 100%;
cursor: pointer;
height: calc(100vh - 40px);
}
#mNote{
width: 100%;
height: 100%;
}
I chrome browser in desktop, it displays like this. The iframe has its own buttons like this:
But when I open by browser in Android or iPhone, it looks like this. It seems like it taller than the device screen and the last button is hidden out:
Upvotes: 0
Views: 59
Reputation: 1
The problem is inside iframe. You need to style the components inside the iframe
Upvotes: 0
Reputation: 1253
You can use below css or also use javascript for making your site responsive.
@media only screen and (min-width:363px) and (max-width:400px) {
#titleRow{
background-color: #00a7d0;
height: 40px;
}
set properties according your requirementt
Upvotes: 1