CODEWITHSUNDEEP
htmlcss
Dales Vu
Dales Vu

Reputation: 169

My website display differently when using browser in mobile

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: enter image description here

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: enter image description here

Upvotes: 0

Views: 59

Answers (2)

Nilooofar.Afshar
Nilooofar.Afshar

Reputation: 1

The problem is inside iframe. You need to style the components inside the iframe

Upvotes: 0

M123
M123

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

Related Questions