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.

catablog-responsive-settings-firebug

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.

catablog-responsive-settings-select-image

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.

catablog-responsive-settings-html-code

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.

catablog-responsive-settings-firefox-tool

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.

Enjoy.

CataBlog tutorials list:

Manuel Ballesta RuizManuel Ballesta Ruiz is a web developer, Blogger and WordPress Enthusiast.

 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>

(required)

(required)

The following GDPR rules must be read and accepted:
This form collects your name, email and content so that we can keep track of the comments placed on the website. For more info check our privacy policy where you will get more info on where, how and why we store your data.