Body: <p>I have created an ebook with a lot of figures, and Calibre viewer shows them correctly. A friend of mine however complained that many figures showed really large on his Kobo Aura One, and he sent me some pics (you may see them <a href="https://photos.google.com/share/AF1QipOgZaBv5sXhaIg0ZtJF5CZnwrh9b_7Zm223x-48WCzfFbUPxikRyO8eRxpnxDFuTQ?key=STZfeWVBeHBPWGx1dklzS3l0bE8xSDhPX1FqUEJB" rel="nofollow noreferrer">here</a>).</p>
  
  <p>I had a quick look at the source: the figure is coded as</p>
  
  <pre><code>&lt;div class="wrap"&gt;
      &lt;p class="figura"&gt;&lt;img alt="" src="../Images/q078a.png" width="70%"/&gt;&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="BullProblema"&gt;
      &lt;p&gt;&lt;a href="../Text/aiutini.xhtml#a078"&gt;vuoi un aiutino?&lt;/a&gt;&lt;/p&gt;
      &lt;p&gt;&lt;a href="../Text/soluzioni.xhtml#s078"&gt;vai alla risposta&lt;/a&gt;&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>and the CSS is</p>
  
  <pre><code>.figura { 
    text-align: center; 
    margin: 1em; 
    padding: 0; 
    display: inline-block; }
  
  .wrap {text-align: center; }
  
  .BullProblema, .BullAiutino, .BullSoluzione { 
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 0px;
    text-align: center; 
    line-height: 1.5em;
    border-style: double;
    border-width: medium;
    border-color: black;
  }
  </code></pre>
  
  <p>It seems to me that the Kobo does not read the CSS: indeed, if I remove the line "display: inline-block;" from the CSS, Calibre reader also shows a large figure.</p>
  
  <p>What did I wrong? My source contains the line </p>
  
  <pre><code>  &lt;link href="../Styles/stile.css" rel="stylesheet" type="text/css"/&gt;
  </code></pre>
  
  <p>and stile.css is my actual stylesheet. </p>
  
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2018-11-12T20:25:22.843Z
Comments.Text: Interesting question, I have an Aura One and my complaint is always the opposite: Because of its high DPI, all illustrations are tiny. I hope it's related and that there is a solution.
Comments.UserDisplayName: pipe
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2018-11-12T21:22:16.387Z
Comments.Text: Your html sample appears to be missing an opening `<div>` tag.
Comments.UserDisplayName: rgchris
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2018-11-13T17:25:07.763Z
Comments.Text: @rgchris: I just forgot to copy it: the epub is well formed.
Comments.UserDisplayName: mau
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-02-29T13:44:01.117Z
Comments.Text: did you ever figure out what was causing this?
Comments.UserDisplayName: invalidusername
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-03-02T06:32:29.937Z
Comments.Text: nope. The only guess I have is that Kobo did not read the CSS.
Comments.UserDisplayName: mau
Tags: <epub><kobo>
Title: Kobo Aura and style
UserDisplayName: mau
ThreadText: # Kobo Aura and style
  
  (Asked by: username_0 on 2018-11-08)
  
  I have created an ebook with a lot of figures, and Calibre viewer shows them correctly. A friend of mine however complained that many figures showed really large on his Kobo Aura One, and he sent me some pics (you may see them [here](https://photos.google.com/share/AF1QipOgZaBv5sXhaIg0ZtJF5CZnwrh9b_7Zm223x-48WCzfFbUPxikRyO8eRxpnxDFuTQ?key=STZfeWVBeHBPWGx1dklzS3l0bE8xSDhPX1FqUEJB)).
  
  I had a quick look at the source: the figure is coded as
  
  ```
  <div class="wrap">
      <p class="figura"><img alt="" src="../Images/q078a.png" width="70%"/></p>
    </div>
  
    <div class="BullProblema">
      <p><a href="../Text/aiutini.xhtml#a078">vuoi un aiutino?</a></p>
      <p><a href="../Text/soluzioni.xhtml#s078">vai alla risposta</a></p>
    </div>
  </div> 
  
  ```
  
  and the CSS is
  
  ```
  .figura { 
    text-align: center; 
    margin: 1em; 
    padding: 0; 
    display: inline-block; }
  
  .wrap {text-align: center; }
  
  .BullProblema, .BullAiutino, .BullSoluzione { 
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 0px;
    text-align: center; 
    line-height: 1.5em;
    border-style: double;
    border-width: medium;
    border-color: black;
  }
  
  ```
  
  It seems to me that the Kobo does not read the CSS: indeed, if I remove the line "display: inline-block;" from the CSS, Calibre reader also shows a large figure.
  
  What did I wrong? My source contains the line
  
  ```
    <link href="../Styles/stile.css" rel="stylesheet" type="text/css"/>
  
  ```
  
  and stile.css is my actual stylesheet.
  
  **Tags:** epub, kobo
  
  > **Comments:**
  > **username_1**: Interesting question, I have an Aura One and my complaint is always the opposite: Because of its high DPI, all illustrations are tiny. I hope it's related and that there is a solution.  
  > **username_2**: Your html sample appears to be missing an opening `<div>` tag.  
  > **username_0**: @username_2: I just forgot to copy it: the epub is well formed.  
  > **username_3**: did you ever figure out what was causing this?  
  > **username_0**: nope. The only guess I have is that Kobo did not read the CSS.  
  
  ---
  
  ## 0 answers
  
  