Responsive .png files

Page: 1

Author Post
Member
Registered: Dec 2015
Posts: 8
I use .pngs for a writing portfolio. I'm working on making it more mobile friendly. For reasons that are a little complicated and I don't think are germane to my question, I have to present these articles as .pngs.

But pages that are responsive in their native state - that certainly don't break the frame - are not adjusting in floatbox.


Typically, these pages include a centered .png file, set up on the page (I'll call it pagename.html) like this:

<img class="centered" src="pagename.html" alt="pagename"/>

Then I invoke floatbox like this (btn green is the name of a css class for a button)

<a href="pagename.html" class="btn green floatbox" data-fb-options="width:max height:max">Read</a>

The floatbox loads fine, and on a desktop or laptop it works. But on small screens, the .png is way bigger than the screen, requiring scrolling and the opposite of what I've been able to achieve, more or less, in pages served without floatbox.
Thanks in advance for any suggestions.
Administrator
Registered: Aug 2008
Posts: 3382
There's not much I can do on this without an online example page to dissect.

From reading the written description, it doesn't sound like there's anything involving Floatbox here. It is the sizing of the png image inside the displayed iframe that is in question. Floatbox does not interfere or get involved with the content portion of what is displayed in any way and the layout and behaviour of that content is entirely the responsibility of the content's author.

Perhaps your solution is something simple like putting css width and height of 100% on your png images, and maybe on your content page's body and html elements as well. But I can't go any further than this simple suggestion in helping with content build or styling.

Page: 1