Oct 132014
 

Last Updated: September 04, 2015

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

Latest News: I have added another link to the menu.

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 Advanced Tutorials

  1. Lightbox Title Permanently Displayed Tutorial
  2. Add Quantity Product Website
  3. Add Video To Product Description Tutorial
  4. Integrate Catablog Into Your Theme
  5. Custom Display CataBlog Items In Suffusion Theme
  6. Different Size Thumbnail Images
  7. Shopping Cart Template
  8. Responsive Settings
  9. Move Meta Text To Right Side LightBox
  10. Troubleshooting

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

For more CataBlog tutorials check the following Link

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)