Advanced search  

News:

CPG Release 1.6.26
Correct PHP8.2 issues with user and language managers.
Additional fixes for PHP 8.2
Correct PHP8 error with SMF 2.0 bridge.
Correct IPTC supplimental category parsing.
Download and info HERE

Pages: [1]   Go Down

Author Topic: Responsive design; it's not doing what it should; thumbs are cut off  (Read 5165 times)

0 Members and 1 Guest are viewing this topic.

Manutjee

  • Coppermine regular visitor
  • **
  • Offline Offline
  • Posts: 80

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;

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]
/*------------------------------------------
     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]
/*
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,

Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Responsive design; it's not doing what it should; thumbs are cut off
« Reply #1 on: January 27, 2016, 05:13:50 pm »

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]
.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]
<table class="templatetable" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
 
« Last Edit: January 27, 2016, 05:25:55 pm by allvip »
Logged

Manutjee

  • Coppermine regular visitor
  • **
  • Offline Offline
  • Posts: 80
Re: Responsive design; it's not doing what it should; thumbs are cut off
« Reply #2 on: January 27, 2016, 08:44:27 pm »

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]
.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]
<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,
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Responsive design; it's not doing what it should; thumbs are cut off
« Reply #3 on: January 27, 2016, 08:57:59 pm »

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

Manutjee

  • Coppermine regular visitor
  • **
  • Offline Offline
  • Posts: 80
Re: Responsive design; it's not doing what it should; thumbs are cut off
« Reply #4 on: January 29, 2016, 05:17:45 pm »

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?]
Logged
Pages: [1]   Go Up
 

Page created in 0.02 seconds with 19 queries.