Inline style to auto resize - html

Question

I have encountered issue updating contents in a particular block using CMS (WYSIWYG editor).
The image and text inside the particular block will not resize automatically in different resolution (e.g. mobile browser or a resize browser window)
For your information, the CMS allows me to use HTML and inline styling.
I tried using percentage instead of fixed size but it is not working correctly.
I saw some solutions suggest using jquery or external style sheet.
I am wondering is there a way I can do the auto resizing (responsive) using inline style?
Please advise.

Answer 1

set the style for images and text inside the block of width:100% !important.
check also if what first and the last style did the page rendered and never use inline style if you want to make your page responsive instead use media queries css.

Answer 2

You have to define percentage in both class and image into the class. Please see the CSS code as an example:
<style type="text/css">
<!-- For left column -->
.single_image_left {
border-radius: 10px;
width: 50%;
}
.single_image_left img {
width: 96%;
}
<!-- For right column -->
.single_image_right {
border-radius: 10px;
width: 50%;
}
.single_image_right img {
width: 96%;
}
</style>

Answer 3

Try using max-width and a percentage-width at the same time, so your image does not become bigger than what you want it:
<div style="max-width:600px;width100%!important;">
<img src="myimage.png" style="max-width:250px;width100%!important;">
<p>Some text</p>
</div>