Is the Simple theme (white with a little black) theme
http://forum.coppermine-gallery.net/index.php/topic,78162.0.html made responsive just with css.
You can test the theme for all monitor resolution, tables and phones at
http://quirktools.com/screenfly/ after you install it. No need to change the theme from Config. Just type in the box your_domain_name/index.php?theme=simple_responsive.
Has the same styles like Simple theme (white with a little black) but I organized them by chapters.
I also added this styles at the end of styles.css
/****** START Styles RESPONSIVE theme *******************/
#cpg_logo_block_logo img {
max-width: 100%;
width: 100%!important;
height: auto!important;
}
.albumName,
.thumbsAdmin {
float: left;
padding: 0.5%;
margin: 0px;
}
.sortorder_cell {
float: right;
}
#formcell {
float: left;
}
.thumbnail,
.catrow_noalb img,
.catrow img {
max-width: 12vw!important;
height: auto!important;
}
.thumb_title,.thumb_caption,.thumb_filename,.thumb_num_comments {
max-width: 12vw!important;
overflow: hidden;
word-break: break-all;
}
@media all and (min-width : 0px) and (max-width : 320px) {
.albumsThumbnails p {
font-size: 3.2vw!important;
}
.buttonlist ul li a {
margin-left: 0px!important;
}
.album_stat,.tableh2 {
overflow: hidden;
word-break: break-all;
}
}
@media all and (min-width : 0px) and (max-width : 500px) {
.menuheight {
height: 10px;
}
.catrow_noalb table,.catrow table {
font-size: 80%!important;
}
.alblink a {
font-size: 80%!important;
}
.statlink h2 {
font-size: 3.5vw!important;
}
#cpg_main_block_outer,
.cpg_main_block_inner {
padding: 0px!important;
}
.tableb {
padding: 0px!important;
}
.buttonlist ul li a span {
height: 3vw!important;
line-height: 2vw!important;
}
.buttonlist ul li a{
font-size: 3vw!important;
}
.navmenu img,.buttonlist img {
max-width: 3vw!important;
height: auto;
}
.navmenu {
font-size: 3vw!important;
}
.tableh2 {
padding: 0px!important;
}
.tableh1 {
font-size: 80%!important;
padding: 0px 2px 0px 0px!important;
}
.thumbnails {
padding: 0px!important;
}
.thumbsAdmin .admin_menu {
margin: 2%!important;
}
.thumbsAdmin a {
font-size: 2.5vw!important;
}
}
.strip_image {
max-width: 10vw!important;
height: auto;
}
#film {
width: 100%!important;
}
#film .thumb a:link {
width: 100%!important;
}
.tape {
width: 100%!important;
height: 100%!important;
margin-left: 0px!important;
}
.remove {
display: none!important;
}
.display_media {
width: auto;
}
.display_media .image {
max-width: 70vw!important;
height: auto!important;
}
.display_media td.image {
background-color: #1E1E1E;
background-repeat:no-repeat;
background-position: center center;
background-size: contain;
}
.display_media .image img {
width: auto!important;
height: 70vw!important;
}
#picinfo {
width: 100%!important;
overflow: scroll;
}
.sortorder_cell img,.thumb_caption_rating img,#comments img {
max-width: 2vw!important;
height: auto!important;
}
#comments #captchaImg img{
max-width: 25vw!important;
height: auto!important;
}
.comment_date {
font-size: 1.8vw!important;
}
/********END Styles responsive theme**************************************/
In theme.php I added:
1) function $template_thumb_view_title_row to change the look of the thumbnails sort.
2) function $template_thumbnail_view to give id="tabs" to the thumbnails page tabs.
3) function $template_album_list
4) function $template_album_list_cat (When Config - Album list view - Show first level album thumbnails in categories ON is responsive too.)
5) function $template_add_your_comment to add id="captchaImg".The image for captcha (confirmation for comments) and the smilies must have diffrent widths.