SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    338
    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
    338
    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,097
    Mentioned
    448 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?
    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."

  4. #4
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    338
    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
    338
    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
    338
    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
    338
    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,276
    Mentioned
    179 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
  •