goldberry Posted April 14, 2016 Share Posted April 14, 2016 I am a real novice and I am trying to understand and learn from this responsive image gallery. http://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery_responsive If I only want to use 3 images or 2 rows of 3 for 6 images how do I alter the code to enable this? On the tryit editor I eliminate one image but they line up left. I see that if I change this code I can move them to the right or left but I want them to center. .responsive { padding: 0 6px; float: right; width: 24.99999%;} I haven't been able to find a solution on the w3schools site. Link to comment Share on other sites More sharing options...
davej Posted April 14, 2016 Share Posted April 14, 2016 Huh? Responsive means that the number of images per row will change depending on the width of the screen. Link to comment Share on other sites More sharing options...
goldberry Posted April 15, 2016 Author Share Posted April 15, 2016 Thanks for the reply. I get that responsive will adjust the number of images so that if the screen width is less then they will overflow to a lower row. I am trying to work out how if there are only 3 images how to have them centered on the screen when the screen is wider than the images. If I remove one of the images from the code when I run it, I get the images from the left leaving a large space at the right. It would look better if they were centered with equal space left and right. Link to comment Share on other sites More sharing options...
Ingolme Posted April 15, 2016 Share Posted April 15, 2016 You need to set the width of their containers to 33.33%. If you need spacing between the images you will need to make the width a bit smaller than 33.33% and add a percentage margin on the containers. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 15, 2016 Share Posted April 15, 2016 Other than that you would have to remove/disable float and replace with display: inline-block; this causes the respnsive elements to act like text. Then by adding outer block element and using text align these responsive elements will center themselves. <!DOCTYPE html> <html> <head> <style> div.img { border: 1px solid #ccc; } div.img:hover { border: 1px solid #777; } div.img img { width: 100%; height: auto; } div.desc { padding: 15px; text-align: center; } * { box-sizing: border-box; } .responsive { padding: 0 6px; float: left; width: 24.99999%; } .gallery_wrap{text-align:center;}/* added by dsonesuk */ .gallery_wrap .responsive{float: none; display: inline-block;}/* added by dsonesuk */ @media only screen and (max-width: 700px){ .responsive { width: 49.99999%; margin: 6px 0; } } @media only screen and (max-width: 500px){ .responsive { width: 100%; } } .clearfix:after { content: ""; display: table; clear: both; } </style> </head> <body> <h2 style="text-align:center">Responsive Image Gallery</h2> <div class="gallery_wrap"> <!-- added by dsonesuk --> <div class="responsive"> <div class="img"> <a target="_blank" href="img_fjords.jpg"> <img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200"> </a> <div class="desc">Add a description of the image here</div> </div> </div> <!--<div class="responsive"> <div class="img"> <a target="_blank" href="img_forest.jpg"> <img src="img_forest.jpg" alt="Forest" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div> </div>--> <div class="responsive"> <div class="img"> <a target="_blank" href="img_lights.jpg"> <img src="img_lights.jpg" alt="Northern Lights" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div> </div> <div class="responsive"> <div class="img"> <a target="_blank" href="img_mountains.jpg"> <img src="img_mountains.jpg" alt="Mountains" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div> </div> </div> <!-- added by dsonesuk --> <div class="clearfix"></div> <div style="padding:6px;"> <p>This example use media queries to re-arrange the images on different screen sizes: for screens larger than 700px wide, it will show four images side by side, for screens smaller than 700px, it will show two images side by side. For screens smaller than 500px, the images will stack vertically (100%).</p> <p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p> <h4>Resize the browser window to see the effect.</h4> </div> </body> </html> Link to comment Share on other sites More sharing options...
Ingolme Posted April 15, 2016 Share Posted April 15, 2016 To center a responsive grid I prefer to wrap it in a container and change the container's max-width property. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now