Jump to content

Gallery Responsive design


Recommended Posts

Hi Guys,

Does anyone know how to change the standard Responsive design code (below) for gallery pages so that on trigger the number of columns is reduced not to one column (image) but two? I currently have a gallery page set up with three columns (images) i've wrapped a div round them and set it to width: 100%; so that the images adjust naturally as the screen size reduces, however once the @media clause kicks in the gallery reverts to one image at 100% and that is too big, i'd prefer the columns to reduce to 2 from 3 as set in the datapage.

<!-- Responsive Code Begin -->
<style>

@media (max-width: 768px) { 

  #gallery-single * {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
  }

  #gallery-single table[id^="PageActionsCtnr"] {
    border-spacing: 0px !important;
    border-collapse: separate !important; 
  }

  #gallery-single table[id^="PageActionsCtnr"] td {
    display: block;
    width: auto!important;
    float: left;
    text-align: left;
    padding: 1px !important;
  }

  #gallery-single table[id^="PageActionsCtnr"] td div {
    text-align: left !important;
  }

  #gallery-single table[data-cb-name^="cbTable"] {
    border-spacing: 0px !important;
    border-collapse: collapse !important; 
    margin-bottom: 7px;       
  }

  #gallery-single table[data-cb-name^="cbTable"] td {
    display: block;
    width: 100% !important;
    float: left;
    text-align: left;
    margin-top: 10px;   
  }

  #gallery-single table[data-cb-name^="cbTable"] td div {
    text-align: left !important;    
  }

  #gallery-single table[data-cb-name^="cbTable"] td > div > div[name^="RACtnr"], 
  #gallery-single table[data-cb-name^="cbTable"] td > div > div[name^="RACtnr"]:hover { 
    vertical-align: middle !important;
    white-space: normal !important;
    background: transparent !important;
    overflow: hidden !important;
    display: inline-block !important;
    padding: 0px !important;      
    margin: -6px 12px 8px 12px !important; 
    line-height: 0px;
    position: static !important;
    width: auto !important;
    opacity: 1.0 !important;
  }
  
}
</style>
<div id="gallery-single">
<!-- Responsive Code End -->

Any help will be appreciated.

Link to comment
Share on other sites

  • 6 years later...
  • 5 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...