0

I'm creating an application to create blog posts and show them.
The content of blog, along with the image data is stored as a string as HTML content. Upon retrieval in my Angular app, I'm doing:
<div class="contentBox" [innerHTML]="post?.content"></div>

Now I'm trying to wrap my images to fit the screen when viewed in mobile view but it always gets scrolled right. ( shown in the image as well)

enter image description here

To stop scrolling I tried 

img {
  margin: auto;
  max-width: 100%;
}

It works perfectly when I try it using Inspect Element but when I add it in my code , it doesn't work. I'm adding it like this:

.contentBox img {
      margin: auto;
      max-width: 100%;
    }

How am I supposed to have this functionality working in my code?

Prachi Sharma
  • 331
  • 1
  • 5
  • 14

1 Answers1

0

Try using max-width: 100vw; instead of 100%.

The viewport is the user's visible area of a web page.

The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.

Ref: https://www.w3schools.com/css/css_rwd_viewport.asp

Manish
  • 6,106
  • 19
  • 64
  • 90
  • That's still the case when I apply it using Inspect Element. But when I add it in my code, it doesn't work – Prachi Sharma Jun 16 '20 at 04:58
  • Does it has a parent container? We might have to look at the css applied on parent container(s) as well. – Manish Jun 16 '20 at 05:02
  • No. I've just given the present div a class name and accessing the image css in my code accordingly (have added in the question). I checked, my code is not picking up the img using `.contentBox img {}` in css – Prachi Sharma Jun 16 '20 at 05:38
  • 1
    I had it working now following this https://stackoverflow.com/a/44215795/6546277 . The issue was from the angular side. Anyways, thanks for the help @Manish – Prachi Sharma Jun 16 '20 at 05:55