WordPress.org

Ready to get started?Download WordPress

Forums

NextGEN Gallery problem with mobiles making thumb gallery responsive (1 post)

  1. terryrook
    Member
    Posted 10 months ago #

    Hi ya
    I am new to WordPress and responsive layouts. I have been trying to make the Next Gen Gallery responsive and fluid so it keeps to 6 thumbs in a row. I have added the code to a child theme but have found a problem with mobiles and ipads. When I use the code below the thumbs scale fine when in the responsive theme twenty twelve when viewing on a desktop monitor. When viewing on a mobile sometimes it's OK sometimes not, the thumbs go really small (especially on a page refresh).

    /*Next generation gallery*/
    .ngg-gallery-thumbnail-box {
    	width: 16.667%;
    
    }
    .ngg-gallery-thumbnail img{
    	background-color:#FFFFFF;
    	border:1px solid #CCCCCC;
    	display:block;
    	padding:3.6%;
    	position:relative;
    	height: auto;
    	width: 100%;
    }
    .ngg-gallery-thumbnail {
    	float: left;
    	margin-right: 16%;
    	margin-bottom:4%;
    	text-align: center;
    }
    /*End Next generation gallery*/

    I noticed if I changed width: 100%; to max-width: 100% it works for mobiles but the images don't scale right on the desktop monitor.

    I then wrote some media queries for the gallery see below, but this could be a problem for some devices. There must be a better way of doing it.

    I have also tried sizing the thumbs in pixels for particular devices using media queries but its not ideal as you cant cater for all devices. Feeling a bit frustrated!

    Any help yes please :)

    /*Next generation gallery*/
    .ngg-gallery-thumbnail-box {
    	width: 16.667%;
    
    }
    .ngg-gallery-thumbnail img{
    	background-color:#FFFFFF;
    	border:1px solid #CCCCCC;
    	display:block;
    	padding:3.6%;
    	position:relative;
    	height: auto;
    }
    .ngg-gallery-thumbnail {
    	float: left;
    	margin-right: 16%;
    	margin-bottom:4%;
    	text-align: center;
    }
    /*End Next generation gallery*/
    
    /*Media Queries*/
    /* Smartphones (portrait and landscape) ----------- */
    @media only screen
    and (min-device-width : 1px)
    and (max-device-width : 640px) {
    
    .ngg-gallery-thumbnail img{
    	max-width: 100%;
    }
    }
    
    /* Large screens ----------- */
    @media only screen
    and (min-width : 641px)
    and (max-width : 2000px) {
    
    .ngg-gallery-thumbnail img{
    	width: 100%;
    }
    }

Reply

You must log in to post.

About this Topic