forum.coppermine-gallery.net
Support => cpg1.5.x Support => cpg1.5 themes (visuals) => Topic started by: Manutjee on January 27, 2016, 04:39:35 pm
-
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 (http://forum.coppermine-gallery.net/index.php?topic=77662.0) 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;
/*------------------------------------------
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:
/*
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,
-
PLEASE DON'T DOUBLE POST. You already posted the same thing here http://forum.coppermine-gallery.net/index.php/topic,77662.msg380774.html#msg380774 (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:
.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:
<table class="templatetable" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
-
PLEASE DON'T DOUBLE POST. You already posted the same thing here http://forum.coppermine-gallery.net/index.php/topic,77662.msg380774.html#msg380774 (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:
.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:
<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,
-
For me it works. See attachment. Maybe you should clear chache.
-
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?]