forum.coppermine-gallery.net

Support => cpg1.5.x Support => cpg1.5 themes (visuals) => Topic started by: Swansea_Jack on January 08, 2013, 01:45:07 pm

Title: What files control the screen size ?
Post by: Swansea_Jack on January 08, 2013, 01:45:07 pm

Hi all

Im using a responsive design on my website (so no matter what screen size you use it will adjust appropriately).  the screen sizes are controlled from seperate css files and works fine with all pages until i load the gallery.  When viewing it on my smartphone the gallery just compresses to fit and it seems to 'ignore' the css settings. 

Which file contains the min-width etc settings for the gallery and is there a way of removing it so the gallery compresses as with the ordinary pages ?

www.peter-burns.co.uk/index.html - main site

www.peter-burns.co.uk/coppermine/index.php?theme=pbphotography for the gallery.

please note it is a work in progress

Title: Re: What files control the screen size ?
Post by: phill104 on January 08, 2013, 01:55:04 pm

Which area of the galley in particular? Each different view may have different things controlling the width. Intermediate is probably the main problem as the final fullsize pic should resize automatically.

Title: Re: What files control the screen size ?
Post by: Swansea_Jack on January 08, 2013, 02:27:38 pm

its actually the smallest screen when viewing on an iphone or similar small screen.  the whole page compresses and doesnt follow the css rules set out for the other pages.

i hope that makes sense.  if you view the main index page on a phone or similar it behaves according the the css rules, once on the gallery, the whole pages shrinks to fit as is not as per the css rules

Title: Re: What files control the screen size ?
Post by: phill104 on January 08, 2013, 02:39:41 pm

Can we have a link to the affected page?

Title: Re: What files control the screen size ?
Post by: Αndré on January 08, 2013, 02:44:38 pm

On my PC, the CSS rules apply as expected (I can see how your header/footer changes). I'm not certain why mobile browsers shrinks your gallery. With some trial and error I found out that it works as expected in my gallery when I add

Code: [Select]

<meta name="viewport" content="width=device-width" />to my theme's template.html file.

Title: Re: What files control the screen size ?
Post by: Swansea_Jack on January 08, 2013, 02:57:22 pm

Thanks Phil and Andre,

ill give it a go now and let you know :)

Title: Re: What files control the screen size ?
Post by: Swansea_Jack on January 08, 2013, 04:06:33 pm

ive tried adding that to the template bit but its just shrunk things more than the screen size.  the actual thumbnails then sticks out either side.  Im actually using a different css file to control layout based on the screen size as follows

<link rel="stylesheet" type="text/css" href="themes/pbphotography/css/screen_styles_gallery.css" />
<link rel="stylesheet" type="text/css" href="themes/pbphotography/css/screen_layout_large_gallery.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:5px) and (max-width:500px)" href="themes/pbphotography/css/screen_layout_small_gallery.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:800px)" href="themes/pbphotography/css/screen_layout_medium_gallery.css" />
<link rel="stylesheet" href="css/coppermine.css" type="text/css" />
<link rel="stylesheet" href="themes/pbphotography/style.css" type="text/css" />

small screen widths (ie phones) use one layout etc.

if you have any further advice id appreciate it

Title: Re: What files control the screen size ?
Post by: phill104 on January 08, 2013, 04:15:34 pm

Problem is most of the standard CPG templates are not designed to be responsive. We have tables etc and numbers of thumbnails per row dictated by php in a fixed way. So some elements may need more than a little css to adjust to be fully responsive.

Title: Re: What files control the screen size ?
Post by: Swansea_Jack on January 08, 2013, 04:19:51 pm

ah ok no probs. 

Thanks for the reply.