Constrain HTML with fixed width to width of screen


#1

I am pulling in some HTML with text and images from an RSS feed that has some fixed widths of say 600px and some image width attributes that are fixed to larger than 320. I am trying to constrain the HTML to only be the size of the phone screen max. Is there any css I could use that would override the HTML I pull in, or a way to zoom to width in ionic so the user doesnt have to scroll along the horizontal axis to read the text?

Thanks,

RGecy


#2

use maxwidth and maxheight css property


#3

Yes, you would think that would work. I have set the content div to max-width:100% or even a fixed number, but the html inside has a wider width. So looks something like this.

<div content style="max-width:100%;" ng-bind-html="innerHtml">
</div>

JS:

innerHtml = '<div style="width:600px;"><h1>Test></h1><p>Some stuff here</p></div>'

#4

Js InnerHtml variable has fixed widh to make a responsive contents in a outer div width=600px will never work. You need to specify the width in terms of percentage


#5

I have no control over the InnerHtml. It is received through RSS feed.

If I cant constrain the HTML to width of the page, what I would like is to be able to zoom the page in out so it will all fit into the view on a mobile.