Oct 132014

CataBlog Responsive Settings helps you set up your categories, galleries and all images to be responsive for mobile devices like iPhone, tablets etc.

Last Updated: January 23, 2018

Latest News: I have fixed a broken link.

For this tutorial I used Firefox browser and Firebug extension. You might want to use Google Chrome or other browser as long as you can view the code and especially the css code.

CataBlog Responsive Settings

Important: If your theme is responsive or set up with a responsive plugin then the following instructions might not be necessary in your case.

Step 1 ) Open your Firefox browser and click on Tools -> Web Developer -> Firebug -> Open Firebug. See image below.

Note: You can also use F12 on your keyboard.


Step 2 ) Once Firebug opens up locate the selector tool see Number 1 below and click on the tool to activate it. Then search on your webpage the area that you want to view the code. In this tutorial we are looking at the images created using CataBlog see Number 2 below.


Step 3 ) Once I clicked on the image above Number 2 I could see the following HTML source code. See image below.

Please Note: In your case it might be different especially if you are using a different Browser or tool.


Step 4 ) The following are the HTML class code that CataBlog adds to each image whether you are using galleries view, single view, add description, have a title etc.

Note: There might be other code added depending on your theme and or your website set up.

CataBlog Class

  • .catablog-row
  • .catablog-images-column
  • .catablog-image
  • .catablog-row .catablog-images-column .catablog-image img
  • .catablog-description
  • .catablog-title

The following is an example of the CSS code you might see when following the method above. (Remember that in your website it will be different)


.catablog-row {
height: auto !important;
min-height: 300px;
width: 550px; <-----this is what you need to change


.catablog-images-column {
width: 250px; <-----this is what you need to change


.catablog-image {
width: 250px; <-----this is what you need to change


.catablog-row .catablog-images-column .catablog-image img {
float: none;
max-height: none;
max-width: none; <-----this is what you need to change, this should have a percentage value.
min-height: 0;
min-width: 0;


.catablog-description {
margin: 0 0 0 260px; <-----this is what you need to change


.catablog-title {
margin: 0 0 0 260px !important; <-----this is what you need to change


The above CSS code has a pixel value and you need to change them to a percentage % value.

For example, find out what the width of the wrapper area is in your blog post or page. Then find out what the width is for CataBlog slideshow i.e. slideshow is 450px, this might equal to 55% of the overall wrapper width. You need to play around with these settings until you get the correct results.

(Remember there are other css codes like margins, borders etc)

The following setting width: 100%; can break your images when viewed on a wider screen. Instead use max-width: 100%;. That will create a maximum limit for your images on the screen, whether it is portrait or landscape.

If you have issues because of your theme or other elements in your website then add !important to every entry you add.

Step 5 ) The following image shows you a tool that Firefox has that allows you to view your website in different responsive layouts. This is a very handy tool to use when ever you need to test your design.


I hope this helps you create a responsive slideshow using CataBlog.

Click on the following URL Troubleshooting to continue.

If you have any questions please let me know. I will be updating this post from time to time. So make sure you come back to view any updates.


CataBlog tutorials list:

I have been working in IT since 1999 and I enjoy the challenges it brings me. I love developing websites with WordPress. I spend a lot of time helping out in wordpress.org forums. I have been writing tutorials since 2011. Now I am learning how to manage my own VPS "Virtual Private Server.

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>



five × one =