SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Location
    Pune, Maharashtra, India
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Stack elements one over the other in fluid or responsive layout for small screens.

    Hello All..
    I had been working with fixed width layout quite some time and now i am starting with responsive layout for the web pages.
    What i learnt is that for responsive layouts of your div(s) you should give the widths in percent.

    I tried with that and it is working but what i am not able to implement is that the elements don't stack one over the other after a certain screen width.

    The elements just re-sizes as i decrease the window size but what i want is to get elements stacked one-over the other after a certain minimum screen width.

    How to achieve this..
    what css do i have to write for this..?

    Thanks..

  2. #2
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Location
    Oskarshamn, Sweden
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Check out media queries. You'll most likely have to stop the floating on some of your elements.

    Code:
    @media screen and (max-width: 800px) {
    	.element-to-stack {
    		float: none;
    		width: auto;
    		/* whatever else needs to be done... */
    	}
    }

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You will need to utilise media queries so that at certain widths you change the columns from floated to non floated and change their width to 100% and then they will line up underneath each other. You can't automatically make elements change from floated to non-floated without using media queries.

    The mobile first approach is recommended these days if you are catering for mobile.

    If you do a search of the forums for "responsive design" you should find many threads on the subject.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Location
    Pune, Maharashtra, India
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think i got what i needed..
    Thanks a lot to both of you.... !


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
  •