1. ksawon
  2. Commercial Templates
  3. Tuesday, 25 February 2014
  4.  Subscribe via email
I want to present a catalogue using Category Blog layout. I created articles and created new menu item. I set #Leading Articles to 0, #Intro Articles to 10 and #Columns to 2. Everything looks as expected, but only under Chrome. In Firefox and IE the left column overlaps the right column. Please, check enclosed screenshots.

How can I fix it?

If you want to see it online, you can go to my webpage: http://statuetki3d.pl/statuetki-szklane/statuetki-w-cenie-do-80-zl.html
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

May I suggest sending temporary administration access to your Joomla installation to info@joomla51.com and we will examine this issue further. For our reference please paste a link to this post in your email.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you

We hope to have amended this issue by removing the following your templates jstuff.css...


/*Category Blog Layout*/
.items-row{float:left; margin-bottom:5px !important;}
.column-1, .column-2, .column-3, .column-4{padding:0;}

/* 1 column layout */
.cols-1{display: block; float: none !important; margin: 0 !important;}

/* 2 column layout */
.cols-2 .column-1{width:48%; float:left;}
.cols-2 .column-2{width:48%;float:right;}

/* 3 column layout */
.cols-3 .column-1{float:left; width:31.5%; padding:0px;}
.cols-3 .column-2{float:left; width:31.5%; padding:0px; margin-left:2.2%;}
.cols-3 .column-3{float:left; width:31.5%; padding:0px; margin-left:2.2%;}

/* 4 column layout */
.cols-4 .column-1{width:23%;float:left;}
.cols-4 .column-2{width:23%; margin-left:2.2%; float:left;}
.cols-4 .column-3{width:23%; margin-left:2.2%; float:left;}
.cols-4 .column-4{width:23%; margin-left:2.2%; float:left;}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
It solved the problem under Firefox and IE, but the width of the images under Chrome was reduced (check enclosed screenshots). So I edited class .pull-left.item-image in bootstrap.css removing the left margin. Now it works fine.

Thank you for your help. You are the best!.
  1. more than a month ago
  2. Commercial Templates
  3. # 3
Accepted Answer Pending Moderation
0
Votes
Undo
Update: I solved the problem in the different way. I wanted to document the changes for future reference and I tried different approach - without deleting. I restored original jstuff.css file and add as a custom code:
.pull-left.item-image { margin: 0 0px 18px 0;}
.blog .column-1 {
padding: 0 14px 0 0;
width: auto !important;
}

The changes I made are marked in bold.

The second column is still a little bit off to the left, but for my purposes it doesn't rally matter.
  1. more than a month ago
  2. Commercial Templates
  3. # 4
Accepted Answer Pending Moderation
0
Votes
Undo
Nice work :)

Thank you for posting your solution!

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 5
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!