How to make the images responsive on topic pages in nopCommerce

nopCommerce default theme (out of the box) support responsive design / layout that is optimized for all the screen sizes including desktop, tablets and smartphones. This allows the store site layout to adjust automatically depending on the screen size by keeping the same overall design.

Enable / Disable the responsive design:  nopCommerce allows store owners to enable or disable the responsive design. By default, this feature is enabled and available on this location: Administration > Configuration > Settings > General And Miscellaneous settings > "Responsive design supported"

A lot of users post questions about why their images are not responsive when posted on topic pages even when the theme is responsive. Today. we will discuss the solution that can fix this problem.

Let us create a sample topic page and post some content & an image on it like this:

nopCommerce responsive topic

This is how the topic page looks like on a desktop:

nopCommerce responsive topic

As, you can see in the screenshot above, the image is quite wide but one would expect that the image will re-size itself when viewed on a smaller screen. But unfortunately, the image does not adjust when responsive theme is active. Here is the result:

nopCommerce responsive topic

In order to fix this issue there are 2 different solutions:

Solution 1: Simple add this CSS code in your theme style.css 

.topic-page .page-body img {
    width: 100%;
    height: auto;

Solution 2: Go to the source code in the html editor of topic and add this to the image tag:

style="max-width: 100%;"

Like this:

nopCommerce responsive topic

In both cases, the issue will be resolved and you should get the results like this:

nopCommerce responsive topic

Hope it helps!

About Author

Written By Lavish Kumar

Based out of New York, USA, Lavish Kumar is a full stack web developer by profession and founder of Striving Programmers, a trusted community for developers that offers a wealth of articles and forums to assist individuals with improving their software development skills.

Leave your comment
12/20/2015 1:22 AM
many thank.
Nice article.
I fix my issue 100%. :)
12/20/2015 1:24 AM
Thank you for your comments - I am glad it helped :)