Simple Responsive Gallery

5 posts from 3 voices

• Started 7 months ago by craigstephen
• Latest reply from Devin
• This topic is not a support question

Tags:

No tags yet.

1. 

   craigstephen
   Member

   Hello chaps.

   A little guidance please...

   I need a secondary style portfolio layout. It needs to be 4 columns. No heading title, just a plain square box thumbnail. On click action will trigger the modal lightbox to reveal the full size image.

   I almost have it, see this page ... http://flyingstartonline.co.uk/ourservices/illustration/

   You might be thinking - well why are you asking us for help if you've already done it?

   Answer: It does not tie into your responsive css. Therefore when you view on a small device the thumbnails are too small, don't fill the width of the site and have alignment issues. Also, I'm having some slight computability issues with older browsers, which is making me think my coding isn't as good as it could be.

   I was wondering if you could give me a sample piece of code that illustrates how to best put together a 4 column thumbnail gallery. I don't require it to dynamically pull the data from portfolio items, I don't mind it's just DIV's with ID's and CLASS's, I just don't know where to start when it comes to your responsive CSS.

   Thanks guys :)

   Craig

   Posted 7 months ago #
2. 

   Ismael
   Moderator

   Hi,

   You can check css > grid.css and layout.css, look for these contents.

   #Media Queries

   #Tablet (Portrait)
   #Mobile (Portrait)
   #Mobile (Landscape)

   It will give you some ideas on how to create a responsive layout. Basically you will be using this code

   @media only screen and (max-width: 479px) {
   
   		/* Style for Mobile Devices here */
   
   }

   You can create the changes on your custom.css.

   Regards,
   Ismael

   Posted 7 months ago #
3. 

   craigstephen
   Member

   I'm thinking that might be beyond me for now.

   Could you possibly give me an example? So maybe 4 square div's with a margin of 5px and maybe all set to 25% each.

   Hope you can help me. Thanks Ismael.

   Posted 7 months ago #
4. 

   craigstephen
   Member

   I'm just thinking if I see an example it'll help me understand how the media query CSS works.

   Cheers

   Posted 7 months ago #
5. 

   Devin
   Moderator

   Hey craigstephen,

   That is quite a bit beyond what we could show you in a single post but I'll try ;)

   The basics for media queries are it says for this size of screen, change the following css.

   So for your page, you would start with the following css in your custom.css file:
   

   /* #Media Queries
   ================================================== */
   
     /* Smaller than standard 960 (devices and browsers) */
     @media only screen and (max-width: 959px) {}
   
     /* Tablet Portrait size to standard 960 (devices and browsers) */
     @media only screen and (min-width: 768px) and (max-width: 959px) {}
   
     /* All Mobile Sizes (devices and browser) */
     @media only screen and (max-width: 767px) {}
   
     /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
     @media only screen and (min-width: 480px) and (max-width: 767px) {}
   
     /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
     @media only screen and (max-width: 479px) {}

   Then add new css rules to make your content do whatever you want for each size. The main issue you will run into using the layout you have in your example is that your images are already 216x216 which means that on the mobile views they will need to stretch to expand and fill the container. You could center them, but if you wanted them to expand to their container you would need to have them set to 100% width and a container for each column.

   You could try using the themes shortcode for it, but it will still take some adjustment and testing.

   Regards,

   Devin

   Posted 7 months ago #

RSS feed for this topic

Reply

You must log in to post.