bad starting page on smartphone

Code is not added?

Add all of rules:

@media screen and (max-width: 620px){
.cat-children > div {
width: 100%;
clear:both;
}

.cat-children > div IMG{
max-width:100%;
}

.items-row .item{
width: 100%;
clear:both;
}

.items-row .item IMG{
max-width:100%;
}
}

now the code is updated

Try this code:

@media screen and (max-width: 620px){
.cat-children > div {
width: 100%;
clear:both;
}

.cat-children > div IMG{
max-width:100%;
}

.items-row .item{
width: 100%!important;
clear:both;
}

.items-row .item IMG{
max-width:100%;
}
}


@media (max-width: 979px) and (min-width: 768px){
.items-row > .span4 {
width:33%!important;
}
}

same problem.
would you like to have an ftp access to the template directory?

Found it, open layout.css, find this:

.cat-children div {
float: left;
text-align: center;
width: 33%;
}

change that to:

.cat-children > div {
float: left;
text-align: center;
width: 33%;
}

we are on the right way!

the pictures aren't even square on the smartphone but a little bit larger than before: