Message # 1 | 10:37 AM
The uCoz file catalog, news, blog and publisher all have only one column in appearance of entries but i want to show you how you come up with three columns which resize to one on mobile with beautiful appearance. First we need to set up our HTML code which would look like this

Code
<li>
<a href="$ENTRY_URL$"><img src="$IMG_SMALL_URL1$" /></a>
<h3> <a style="color: #000000;" href="$ENTRY_URL$"><?if(len($TITLE$)>25)?><?substr($TITLE$,0,23)?>...<?else?>$TITLE$<?endif?></a></h3>
<?if($MESSAGE$)?>
<h4><?if(len($MESSAGE$)>40)?><?substr($MESSAGE$,0,38)?>...<?else?>$MESSAGE$<?endif?></h4>
<?else?>
<h4>There is no description attached to this file found</h4>
</li>


So after setting up our HTML in the 'APPEARANCE OF ENTIRES', in file catalog, blog etc which ever you want then we go to css which would actually look like this

Code
ul.rig {
list-style: none;
font-size: 0px;
margin-left:auto; /* should match li left margin */
float: left;
padding-left: 0px;
}

ul.rig li {
display: inline-block;
padding: 10px;
margin: 0 6px 10px;
background: #fff;
border: 1px solid #ddd;
font-size: 16px;
font-size: 1rem;
vertical-align: top;
box-shadow: 0 0 5px #ddd;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
height: 220px;
}
ul.rig li img {
max-width: 100%;
height: 120px;
margin: 0 0 0 0px;
padding-bottom: px;
-moz-transition:-moz-transform 0.5s ease-in;
-webkit-transition:-webkit-transform 0.5s ease-in;
-o-transition:-o-transform 0.5s ease-in;
}


ul.rig li img :hover{
-moz-transform:scale(2);
-webkit-transform:scale(2);
-o-transform:scale(2);
}

ul.rig li h3 {
margin: 0 0 px;
padding-top:1px;
font-size: 15px;
color: #000;
font-waight: bold;
font-family: Roboto;
}
ul.rig li h4 {
font-size: 15px;
}

/* class for 3 columns */
ul.rig.columns-3 li {
width: 30.83%; float: left; /* this value + 2.5 should = 33% */
}


@media (max-width: 480px) {
ul.grid-nav li {
display: block;
margin: 0 0 5px;
}
ul.grid-nav li a {
display: block;
}
ul.rig {
margin-left: 0;
}
ul.rig li {
width: 100% !important; /* over-ride all li styles */
margin: 0 0 20px;
}
ul.rig li img {
width: 100%;
height: 10px;
margin: 0 0 10px;
}
}


@media only screen and (max-width: 767px) {
ul.grid-nav li {
display: block;
margin: 0 0 5px;
}
ul.grid-nav li a {
display: block;
}
ul.rig {
margin-left: 0;
}
ul.rig li {
width: 100% !important; /* over-ride all li styles */
margin: 0 0 20px;
}
ul.rig li img {
width: 100%;
height: 190px;
margin: 0 0 10px;
}
ul.rig li {
display: inline-block;
padding: 10px;
margin: 0 0 2.5% 2.5%;
background: #fff;
border: 1px solid #ddd;
font-size: 16px;
font-size: 1rem;
vertical-align: top;
box-shadow: 0 0 5px #ddd;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
height: 295px;
}
ul.rig li h3 {
margin: 0 0 px;
padding-top:1px;
font-size: 17px;
color: #000;
font-waight: bold;
font-family: Roboto;
}
ul.rig li h4 {
font-size: 15px;
}

}


So thats the CSS you can edit to which ever way you want. So our last part is the $BODY$. Go to wherever you see the $BODY$ code, delete it there and add some thing like this;

Code
<ul class="rig columns-3" style="width:100%">
$BODY$
</ul>


And your all set.
Click here to see on my site how its working and please give me a feed back if there are any errors or bugs in the code.

I hate politics, people who do not make an effort with people and those who try hard to be cool