Results 1 to 3 of 3

Thread: responsive grid help

  1. #1
    Join Date
    Aug 2009
    Location
    London
    Posts
    93
    Thanks
    26
    Thanked 0 Times in 0 Posts

    Default responsive grid help

    Hi

    I have been using a responsive grid that I downloaded, the source files can be found here: www.responsivegridsystem.com

    I've come across a small problem that I don't know how to solve:

    I would like to have 2 responsive columns, centred in the middle of a browser window. I have attached a screen grab to show how this would look. Although all the other columns appear in this screen grab, I don't require them, just the "1 of 4" columns that are highlighted. So they would be about 25% of the browser width.

    So I could use all 4 columns and leave the 2 outer ones empty, but this wouldn't look right when viewed on a mobile device.

    Is this what is known as column offsetting? I can't find a suitable tutorial online to tech myself offsetting. Is anyone able to help suggest a way to achieve the 2 columns I require?

    Thanks in anticipation of your replies

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    I think you're overthinking it. If you only need 2 columns, try putting 2 of the 1-of-2 columns inside a container that's 50% wide. And put margin:auto; on the container to center it.

    Then, under a certain threshold (for mobile) you could make the width of the container 100% to lose the space at each side.
    Last edited by Beverleyh; 04-15-2015 at 05:30 PM.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. The Following User Says Thank You to Beverleyh For This Useful Post:

    jhatter (04-16-2015)

  4. #3
    Join Date
    Aug 2009
    Location
    London
    Posts
    93
    Thanks
    26
    Thanked 0 Times in 0 Posts

    Default

    That did the trick and was simple to implement.

Similar Threads

  1. grid overlapping into cell below it
    By gib65 in forum HTML
    Replies: 1
    Last Post: 03-16-2015, 05:07 PM
  2. responsive image grid?
    By mlegg in forum CSS
    Replies: 8
    Last Post: 09-24-2014, 04:57 PM
  3. Centered, wrapping grid - help
    By jimctierney in forum CSS
    Replies: 0
    Last Post: 08-05-2011, 02:46 PM
  4. OS X Grid-like drawer Javascript
    By Guillaumeb in forum JavaScript
    Replies: 0
    Last Post: 05-17-2011, 02:02 PM
  5. AJAX Grid like EBA Grid V3?
    By EZboy in forum JavaScript
    Replies: 4
    Last Post: 08-22-2006, 03:49 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •