SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Want to display images centered using responsive layout

    I have a site I am working on for a client. I am using Skeleton for the responsive layout. There are two images in the footer area that in larger browsers float left and right. On smaller screens I want them to be aligned center under the other content.

    Code:
    	/* All Mobile Sizes (devices and browser) */
    	@media only screen and (max-width: 767px) {
    		
    			photo_one  {
    				float: none;
    
    			}
    			photo_two  {
    				float: none;
    			}
    
    		
    		}
    The code above does not do what I want. What do I need to put in order for this to work? Thanks.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Are "photo_one" and "photo_two" classes or IDs? You don't say in your code. You either need a dot before each or a #. If that doesn't help, we need to see your HTML too.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Oops sorry....they are classes. So I would use a . I did that and it worked with the smallest width. I can't get it to work with the width already mentioned. They still float left and right but are staggered.

    Code:
        <div class="band footer">
            <footer class="container main">
                <div class="sixteen columns">
                    <p class="photo_one"><img src="images/1929statecapitalgypsyrunsml.jpg"</p>
                    <p class="photo_two"><img src="images/1930copysml.jpg"</p>
                </div><!--end sixteen--> 
            </footer><!-- container --> 
        </div><!--end band-->

  4. #4
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    What I don't understand is that it works with this code.

    Code:
    	@media only screen and (min-width: 480px) and (max-width: 767px) {
    img {
    	display: none;
    }
    header h1.logo {
    	width: 417px;
    	height: 50px;
    	display: block;
    	background-image: url(../images/sml_logo.png);
    	background-repeat: no-repeat;
    	font: 0/0 a;/*use the next 3 lines instead of text-indent: -9999px*/
    	text-shadow: none;
    	color: transparent;
    	background-position: 0 0;
    }
    body {
    	background: #000;
    }
    .photo_one {
    	margin-top: 7px;
    	display: block;
    }.photo_two {
    	margin-top: 7px;
    	display: block;
    }
    }
    
    	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
    	@media only screen and (max-width: 479px) {
    img {
    	display: none;
    }
    header h1.logo {
    	width: 321px;
    	height: 32px;
    	display: block;
    	background-image: url(../images/sml_logo1.png);
    	background-repeat: no-repeat;
    	font: 0/0 a;/*use the next 3 lines instead of text-indent: -9999px*/
    	text-shadow: none;
    	color: transparent;
    	background-position: 0 0;
    }
    body {
    	background: #000;
    }
    .photo_one {
    	margin-top: 7px;
    	display: block;
    }
    .photo_two {
    	margin-top: 7px;
    	display: block;
    }
    }
    The images stack on top of one another and look great. It is only the max-width of 767px that are messed up.

  5. #5
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I have the site up for anyone to look at and see what is happening.

    http://foxdenwebsolutions.com/29gypsyrun/index.html

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    This addresses the two wide images at the bottom of the page.

    Instead of floating the image containers left and right, try setting them to display:inline-block. The images will remain centered whatever the width.

    layout.css, Line 179:
    Code:
    .photo_one {
        float: left;
        display:inline-block;
    }
    .photo_two {
        float: right;
        display:inline-block;
    }

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by cgacfox View Post
    What I don't understand is that it works with this code.
    It works because, at that width, you set the image container to the width of the images (more or less) so that the images have no option but to sit vertically.

    In the scenario where they are staggered, the container is some 748px wide, so the images move as far left and right as they can within that.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  8. #8
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you, ronpat. This worked perfectly! Now on to the second page, which will hold the images and the Paypal gateway info.

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    You are very welcome. Glad to know it worked. The link to your site was most helpful
    Thanks for the feedback!


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
  •