CODEWITHSUNDEEP
htmlcssmedia-queries
user11954009
user11954009

Reputation:

Html5/CSS3 Media Query

I made a new html document with only a PDF-file in it. The code:

<embed src="impressum.pdf" width="1200" height="900" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html">

It workes perfectly but my problem is now, that I don´t know how to format it for the smartphone view. I started with the regular Media Query code in css and don´t know what I should put in there:

@media screen and (max-width: 800px) {  
}

Upvotes: 0

Views: 190

Answers (2)

sina_r
sina_r

Reputation: 524

You can simply set the height and with to a 100% for the embed and set the body height to 100vh:

body {
        height: 100vh;
        overflow: hidden;
    }

Like this, the pdf will always have the correct width no matter what device you open it on.

<body>
    <embed src="impressum.pdf" width="100%" height="100%" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html">
</body>

Upvotes: 1

ilnicki010
ilnicki010

Reputation: 287

You can wrap your embed object in a div and then style it height and width. Does it help with your problem?

HTML

  <div class="pdf-wrapper">
        <object dtype="application/pdf" width="100%" height="100%">
            <embed src="./test.pdf" type="application/pdf"  width="100%" height="100%" />
        </object>
    </div>

CSS

 .pdf-wrapper{
     width:100vw;
     height:100vh;
   }

@media screen and (max-width: 800px) {
     .pdf-wrapper{
      height:40vh;
     }

Upvotes: 1

Related Questions