Home › Updates


Responsive design: preventing specific images from being manually resized

 July 25, 2018
by Flavio Mester


NoImgResizeThe NoImgResize content block option

By default, our editor will automatically fill in the Width and Height of an image when it’s inserted into a content block. However, sometimes you may not want that. For instance, you may have a very wide image which would appear distorted on mobile. That’s because although we limit the width to 100% of the viewport – so the image doesn’t “break” the page layout – the height in this case is written as inline CSS, which takes precedence, causing the image to look “squashed”.

Although YWD Designer has settings that allow you to remove the Width and Height from blog post images (active by default) or content images (inactive by default) those are applied globally. And while it’s possible to remove those vaues in the editor manually – in which case the image will resize responsively – it’s not always realistic to expect the end users to remember to do that.

By setting up a content block to use the new NoImgResize class, the system will remove the Width and Height values from any images it contains, immediately prior to rendering the page, thus allowing them to resize responsively regardless of their sizes.

Flavio Mester

Flavio Mester is a graphic designer as well as a systems analyst (in a distant life he was an architect). A founding partner of Your Web Department, he's responsible for the design and development of all the YWD website management platform interfaces.
Google+ | Twitter | LinkedIn




Top of page