What files control the screen size ?

[Swansea_Jack]

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

[phill104]

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.

[Swansea_Jack]

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

[phill104]

Can we have a link to the affected page?

[Αndré]

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 Expand

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

[Swansea_Jack]

Thanks Phil and Andre,

ill give it a go now and let you know

[Swansea_Jack]

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

[phill104]

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.

[Swansea_Jack]

ah ok no probs. 

Thanks for the reply.