SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    339
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Modify responsive CSS

    Anyone know how to modify this theme so when it is accessed by mobile devices under 800px so the featured image moves to the top right instead of below the two divs on the left?
    Code:
    http://tablet-emulator.org/
    
    
    http://demos.cyberchimps.com/responsivepro/
    I have tried clear:both, position:relative, vertical-align:top

    it is within a div wrapper that is 47% on both sides (right and left, the image is within the right 47% width div) so I am out of clues as to why at full desktop width it is there while at 800 or less it moves to the bottom.
    I have also made the image smaller to scale as the width decreases. i.e. 679px, I have it at 250px width.

    I have removed .fit {margin-right:auto; margin-left:auto;} as well and no change. Responsive is ignoring me.

  2. #2
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    339
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have also tried display:inline-block for the wrapper div.

    in case anyone thinks I am trying to mod a paid design, It is FREE.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    The boxes get unfloated via @media rules on narrower screens. The image comes after the text in the HTML, so once the boxes are unfloated, the content stacks in its natural order. Are you saying you want to keep the columns even on small screens?

  4. #4
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    339
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought the code says for col-450 width: 47.3%;} so they align perfectly left & right.
    the other class is grid { float:none;{ so weren't they already not floated.?
    <div class="grid col-450">

    I wanted it even only on the 600 to 768px screens.. tablets and iPads. For phones I will let stack.

  5. #5
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    339
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, you waved a carrot (float property) in front of me to figure it out. OK, so I just floated them in the smaller screens and I seem to have it working now.

    Thanks

  6. #6
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    339
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    strange. it worked for 30 minutes then same thing even with the floats

  7. #7
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    339
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found the answer. a couple of conflicting @media queries

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Glad you sorted it


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
  •