How to make the images responsive on topic pages in nopCommerce

nopCommerce’s default theme (out of the box) supports responsive design. This means the layout 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:

 

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

 

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:

 

 

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:

 

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

 

 Looking for quality nopCommerce Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , | Posted under nopCommerce | RSS 2.0

Author Spotlight

Lavish Kumar

Founder, developer and owner of StrivingProgrammers.com - By profession, he is a software programmer / web developer, web designer & DBA. He is passionate about technology and electronic gadgets. He enjoys writing tech articles and developing web applications. He is a nopCommerce MVP and author of official nopCommerce Designer's Guide.

Leave a Reply

Your email address will not be published. Required fields are marked *