Responsive design; it's not doing what it should; thumbs are cut off

[Manutjee]

Hello,

I've been working on my very first responsive Coppermine-theme and I'm doing good - well... Better than I thought.
The only think I can't get passed is why the table part [Category/Random Files/Last Additions etc.] isn't responding to the coding - at all.
I've been trying my hardest to follow this tutorial, so I'm aware of the following part, and I quote;

The setting for Config -Thumbnail view- Number of columns on thumbnail page must be a reasonable number like 5 not 10. The settings for Album list view - Number of columns for the album list MUST BE MAX 3 .
If you want a big number for Config -Thumbnail view- Number of columns on thumbnail page change max-width: 12vw!important; for .thumbnail and .thumb_title,.thumb_caption,.thumb_filename,.thumb_num_comments with a smaller value like 5vw.

So I adjusted the coding to this;

Code Select Expand

/*------------------------------------------
     Standard Coppermine Responsive Coding
------------------------------------------*/

#cpg_logo_block_logo img {
max-width: 100%;
width: 100%!important;
height: auto!important;
}

.thumbnail {
max-width: 5vw!important;
_max-width: 12vw!important;
height: auto;
}

.thumb_title,.thumb_caption,.thumb_filename,.thumb_num_comments {
max-width: 5vw!important;
_max-width: 12vw!important;
overflow: hidden;
}

Notice the change? I've adjusted its max-width to 5vw instead of the standard 12vw value, but it doesn't do anything besides cutting the images off the smaller the screen size is.
I've added a few attachments, too, in hopes that it makes sense.

Link to theme: http://www.98designs.flaunt.nu/portfolio/index.php?theme=cpgpremade12hereisgina

Responsive CSS:

Code Select Expand

/*
Theme: Gina Rodriguez Coppermine Theme
Author: SilverFox @ https://sellfy.com/silverfox
Description: Gina Rodriguez Coppermine Theme
Colors: .
*/

/*----------------------------------------------------
- NAVIGATION
-----------------------------------------------------
-> This .css file includes all codes that makes a theme
responsive in order to work properly on mobile devices.

Giving credit is not mandatory but very much appreciated.
-----------------------------------------------------*/

/*------------------------------------------
     1024px Media
------------------------------------------*/
@media only screen and (max-width: 1024px), only screen and (max-device-width: 1024px) {

#header {
background-image: url('../images/header.png');
background-repeat: no-repeat;
background-position: center;
background-color:#fff!important;
height:380px!important;
width:auto!important;
overflow:hidden!important;
}

#navigation {
line-height:45px;
width:100%;
padding:40px;
display:block;
}

#navigation a:link {
padding:10px!important;
}

#navigation a:visited {
padding:10px!important;
}

#navigation a:active {
padding:10px!important;
}

#navigation a:hover {
padding:10px!important;
}

#container{
overflow:hidden;
z-index:1;
width:100%!important;
margin:0 auto;
}

#wrapper {
margin:0 auto;
width: 100%!important;
margin-top:0px;
}

#footer {
margin-top:-50px;
}

}

/*------------------------------------------
     959px Media
------------------------------------------*/
@media only screen and (max-width: 959px), only screen and (max-device-width: 959px) {

#header {
background-image: url('../images/header960.png');
background-repeat: no-repeat;
background-position: center;
background-color:#fff!important;
height:528px!important;
width:auto!important;
overflow:hidden!important;
}
}

/*------------------------------------------
     734px Media
------------------------------------------*/
@media only screen and (max-width: 734px), only screen and (max-device-width: 734px) {

#header {
background-image: url('../images/header740.png');
background-repeat: no-repeat;
background-position: center;
background-color:#fff!important;
height:407px!important;
width:auto!important;
overflow:hidden!important;
margin-top:-20px;
}
}

/*------------------------------------------
     450px Media
------------------------------------------*/
@media only screen and (max-width: 450px), only screen and (max-device-width: 450px) {

#header {
background-image: url('../images/header450.png');
background-repeat: no-repeat;
background-position: center;
background-color:#fff!important;
height:248px!important;
width:auto!important;
overflow:hidden!important;
}
}

/*------------------------------------------
     Standard Coppermine Responsive Coding
------------------------------------------*/

#cpg_logo_block_logo img {
max-width: 100%;
width: 100%!important;
height: auto!important;
}

.thumbnail {
max-width: 5vw!important;
_max-width: 12vw!important;
height: auto;
}

.thumb_title,.thumb_caption,.thumb_filename,.thumb_num_comments {
max-width: 5vw!important;
_max-width: 12vw!important;
overflow: hidden;
}

/*------------------------------------------
     600px Media
------------------------------------------*/

@media all and (min-width : 0px) and (max-width : 600px) {
.catrow_noalb table,.catrow table  {
font-size: 80%!important;
}

.alblink a {
font-size: 80%!important;
}

.statlink h2 {
font-size: 3.5vw!important;
}

body {
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;
}
}

/*------------------------------------------
     320px Media
------------------------------------------*/

@media all and (min-width : 0px) and (max-width : 320px) {
.albumsThumbnails p {
font-size: 3.2vw!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;
}

Tip: Use Firefox's Responsive Design View (CTRL+SHIFT+M) to see how it looks on smaller devices.
Note: The coding isn't finished, obviously. I am still working on it, but I'm doing it step by step and I re-upload it after I've made a small change (or several if I'm a 100% sure about what I'm doing).

Thank you very much in advance!

Regards,

[allvip]

PLEASE DON'T DOUBLE POST. You already posted the same thing here http://forum.coppermine-gallery.net/index.php/topic,77662.msg380774.html#msg380774

I will check to see if there is any other errors but for start you must delete width: 1100px; from this code in style.css:

Code Select Expand


.templatetable {
    background-color: #FFF;
    margin: -30px auto 0px;
    width: 1100px;
}


Fixed width is a big no in responsive design. If you want the table to not be bigger then 1100px then you use max-width: 1100px; for .templatetable or for the body class.

The table already has inline style width:100% that makes it responsive:

Code Select Expand

<table class="templatetable" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">


[Manutjee]

PLEASE DON'T DOUBLE POST. You already posted the same thing here http://forum.coppermine-gallery.net/index.php/topic,77662.msg380774.html#msg380774

I will check to see if there is any other errors but for start you must delete width: 1100px; from this code in style.css:

Code Select Expand


.templatetable {
    background-color: #FFF;
    margin: -30px auto 0px;
    width: 1100px;
}


Fixed width is a big no in responsive design. If you want the table to not be bigger then 1100px then you use max-width: 1100px; for .templatetable or for the body class.

The table already has inline style width:100% that makes it responsive:

Code Select Expand

<table class="templatetable" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">


Oh of course, should've known about the double post thing, I apologize.
I've adjusted the coding; set a max-width for .templatetable in style.css but it still does the same thing, and I cannot seem to figure out what causes it.
I assumed it'd be the fact that it needed more of the media-screen function, but I tested it by using a base and it still does the same.
Added new attachments below.

Thank you for taking the time to help me out.

Regards,

[allvip]

For me it works. See attachment. Maybe you should clear chache.

[Manutjee]

Oh of course, haha!
Thank you very much, I think I'll be able to get it done now, if not I'll post it here [unless it's best to create a new topic, depending on the issue, I assume?]