SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Px in responsive?

    Currently converting my fixed width site to responsive, I'm unsure on how best to handle one specific element.

    I have some images the full width of the main text column, coded as the image plus 4px padding and a 1px border.

    I'd quite like to keep that 4+1px proportion even on small displays.

    What's the sensible way of doing this? Or is it simply not possible to retain px within a responsive design, and I therefore have to convert to %?

  2. #2
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,290
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    You can still do that - what you'll need to do is adjust the size of the images. Do a search for responsive images, and you should get the information you need.

    Here's one site I found on a quick search, but I know there are a ton more out there....http://css-tricks.com/on-responsive-images/
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    I believe one way around this is with the newish border-box property. The key is to use this in combination with width: 100%:

    Code:
    img {
    	border: 1px solid blue; 
    	padding: 4px;
    	background: green;
    	vertical-align: bottom;
            -webkit-box-sizing: border-box; 
    	-moz-box-sizing: border-box;
    	box-sizing: border-box;
    	width: 100%;
    }

  4. #4
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DaveMaxwell View Post
    You can still do that - what you'll need to do is adjust the size of the images. Do a search for responsive images, and you should get the information you need.

    Here's one site I found on a quick search, but I know there are a ton more out there....http://css-tricks.com/on-responsive-images/
    Thanks.

    I've already read much before posting - and have yet to find any thing that's reliable. And the article you suggested doesn't appear to help.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by gulliver View Post
    have yet to find any thing that's reliable.
    What I posted has pretty good support even back to IE8, so that should be safe to use.

  6. #6
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    What I posted has pretty good support even back to IE8, so that should be safe to use.
    Thanks.

    When I responded to the earlier post, I hadn't seen your suggestion.

    I agree that it seems the sane option.


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
  •