Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
  1. #1
    Member celticshinobi's Avatar
    Join Date
    Nov 2012
    Location
    TN, USA
    Posts
    36
    Member #
    33858
    Liked
    1 times

    A battle with responsive

    Well, I'm back with another question...I've been plugging away on a simple page off and one for the past few weeks as I get time...and I've about finished it now. Now that everything is there, I've been attempting to make the site responsive...I get what media queries are, and I've tinkered with them a little..I need to tinker more...which is what I'm doing here

    However, the more I mess with things, the worse my page gets, and before I completely broke the thing, I just deleted all of my "responsive" code...I'm not asking anyone to do a lot of work for me, but I would like it if someone could glance at my code and perhaps give me a general idea of what I need to add/delete to make the page scale properly.

    I hope that makes sense... at any rate, here's my poor webpage (The image slider works the way it should now, thanks to everyones help on that, again.)

    Flat Design

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    First things first. Build it out to be responsive from the get-go, and add media queries as necessary to make adjustments.

    Now that it's too late for that, start by removing width:960px from .row. That makes it damn-near responsive on its own. If you don't want the logo and menu out on the edges, use percent or em/rem-based margins. Then, sprinkle on just a small amount of media queries to clean up anything else that breaks. Don't worry about floated elements collapsing. They should.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Location
    Portland, OR
    Posts
    1,306
    Member #
    27566
    Liked
    181 times
    Why is your slideshow blueish background div and your footer not spanning all the way across the page. You have about 15px white space on each side. Is that intentional or not? Just wondering.
    Artificial intelligence is nothing compared to natural stupidity -Someone

    Design is a funny word. Some people think design means how it looks.
    But of course, if you dig deeper, itís really how it works.
    -Steve Jobs



  5. #4
    Member celticshinobi's Avatar
    Join Date
    Nov 2012
    Location
    TN, USA
    Posts
    36
    Member #
    33858
    Liked
    1 times
    Andrew, I'm really not sure. They're set at 100% width :/

  6. #5
    Member celticshinobi's Avatar
    Join Date
    Nov 2012
    Location
    TN, USA
    Posts
    36
    Member #
    33858
    Liked
    1 times
    This is something that isn't even related to my responsive issue...I'm tinkering with a few things, and I decided that I want the header to stick to the top at all times..so I change my headerwrap - I add fixed position and a z-index of 2...and my white background that was behind my header stuffs...has disappeared...I've tried a few hacks, but nothings working..what have I overlooked? it's probably something simple...

    Ronald, I'm also working on doing what you've suggested as well..slowly...a line a time, trying to convert all of my pixels to percentages...and then I'm guessing I should add a few media queries at that point to smooth out any rough edges when it scales. I haven't published all of that yet though..it's still looking ugly.

  7. #6
    Member celticshinobi's Avatar
    Join Date
    Nov 2012
    Location
    TN, USA
    Posts
    36
    Member #
    33858
    Liked
    1 times
    I wanted to do something with this. It's mainly just for practice - it's the best way to get better, I believe...but I don't want to just toss it. I'd like to sell it, but the more I look at it, the more I think that it's awful looking. ><

  8. #7
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Location
    Portland, OR
    Posts
    1,306
    Member #
    27566
    Liked
    181 times
    If your not using a CSS reset then thats why it does that. Do you see the white space on your browser to?
    Google css reset and make a separate css file with that code in it and attach it to your website.
    Artificial intelligence is nothing compared to natural stupidity -Someone

    Design is a funny word. Some people think design means how it looks.
    But of course, if you dig deeper, itís really how it works.
    -Steve Jobs



  9. #8
    Member celticshinobi's Avatar
    Join Date
    Nov 2012
    Location
    TN, USA
    Posts
    36
    Member #
    33858
    Liked
    1 times
    ohh, that's fixed now...thank you. I normally use a reset file, but...I forgot to plug it in ><

  10. #9
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Location
    Portland, OR
    Posts
    1,306
    Member #
    27566
    Liked
    181 times
    Try giving the white background that disappeared a position: relative;
    That usually fixes it for me.
    Artificial intelligence is nothing compared to natural stupidity -Someone

    Design is a funny word. Some people think design means how it looks.
    But of course, if you dig deeper, itís really how it works.
    -Steve Jobs




Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Tags for this Thread

All times are GMT -6. The time now is 09:26 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com