www.webdeveloper.com
Results 1 to 8 of 8

Thread: When I resize my browser...

  1. #1
    Join Date
    Jun 2013
    Posts
    13

    Question When I resize my browser...

    When I resize my browser from left to right.
    Everything gets all jumbled up and looks like garbage.
    A sentence that is this long:
    (---------------------------------------------------------------------------------)
    Would get bunched into something this size.
    (----------
    -----------
    -----------
    -----------
    -----------)
    It just looks sooooooooooooooo bad.
    Im using a style with 3 long box's from top to bottom.
    I would like everything from the right box to be its full size, while the middle box gets pushed to the right.
    You might be able to get a better idea of what im talking about if you look at it.
    http://incursionguru.yolasite.com/
    Im
    not
    sure
    people
    like
    reading
    my
    site
    like
    this.
    I believe I could set this option globally over all my pages with CSS.

    Thank you all for your time.
    IG

  2. #2
    Join Date
    Jun 2013
    Posts
    13
    Well this is what ive found thus far and seems to work if I just put it somewhere with the text hidden.

    [code]<style>
    p
    {
    min-width:500px;
    }
    </style>
    <p></p>[code]

    Is it at all possible to put this in the CSS some how ?
    This is currently what my full CSS looks like.
    http://pastebin.com/zzr0WTLq

  3. #3
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,208
    Might help...

    responsivepx – screen-size testing tool: http://responsivepx.com/

    FitText.js plugin (FitText is a jQuery plugin that makes your font-sizes flexible, allowing headlines to automatically-expand to fit the available space): http://fittextjs.com/
    Adapt.js - Adaptive CSS: http://adapt.960.gs/

    How to create flexible sites quickly using standards like CSS and XHTML: http://www.ibm.com/developerworks/web/library/wa-rapid/
    Designing for the Web: Resolution and Size: http://sitepointcom.createsend4.com/...yd/birtthtw/h/
    Care With Font Size: http://www.w3.org/QA/Tips/font-size
    What are the best programming fonts?: http://slant.co/topics/67/~what-are-...gramming-fonts

    Websites Shouldn’t Look The Same Across Different Browsers: http://www.noupe.com/design/websites...re-is-why.html
    Cross-Browser CSS in Seconds with Prefixr: http://net.tutsplus.com/articles/new...-with-prefixr/
    Responsive Web Design Demystified: http://www.elated.com/articles/respo...n-demystified/
    Responsive Web Design: 5 Handy Tips: http://www.elated.com/articles/respo...-5-handy-tips/
    It’s Not Responsive Web Building, It’s Responsive Web Design: http://www.getfinch.com/finch/entry/...ve-web-design/

  4. #4
    Join Date
    Jun 2013
    Posts
    13
    Quote Originally Posted by Major Payne View Post
    Might help...

    responsivepx – screen-size testing tool: http://responsivepx.com/

    FitText.js plugin (FitText is a jQuery plugin that makes your font-sizes flexible, allowing headlines to automatically-expand to fit the available space): http://fittextjs.com/
    Adapt.js - Adaptive CSS: http://adapt.960.gs/

    How to create flexible sites quickly using standards like CSS and XHTML: http://www.ibm.com/developerworks/web/library/wa-rapid/
    Designing for the Web: Resolution and Size: http://sitepointcom.createsend4.com/...yd/birtthtw/h/
    Care With Font Size: http://www.w3.org/QA/Tips/font-size
    What are the best programming fonts?: http://slant.co/topics/67/~what-are-...gramming-fonts

    Websites Shouldn’t Look The Same Across Different Browsers: http://www.noupe.com/design/websites...re-is-why.html
    Cross-Browser CSS in Seconds with Prefixr: http://net.tutsplus.com/articles/new...-with-prefixr/
    Responsive Web Design Demystified: http://www.elated.com/articles/respo...n-demystified/
    Responsive Web Design: 5 Handy Tips: http://www.elated.com/articles/respo...-5-handy-tips/
    It’s Not Responsive Web Building, It’s Responsive Web Design: http://www.getfinch.com/finch/entry/...ve-web-design/
    I was just coming to post a reply that I figured it all out.
    Took me awhile but playing around with the CSS enough and BAAM there it was.

    h1, h2, h3 {
    font-weight: normal;
    color: #33FFFF;
    min-width: 500px;
    }
    This adjusts all of the text within my page.
    #menu ul {
    margin: 0;
    padding: 15px 10px 0 0;
    list-style: none;
    min-width: 1000px;
    }
    Adjusts the menu bar.
    #logo h1, #logo h2 {
    float: left;
    padding: 0 0 0 20px;
    min-width: 1000px;
    }
    Adjusts my logo.

    Was uber easy once I found it, I guess tags like Logo and Menu I should look for more often.
    Getting to understand most of this is getting easier and easier as I play with it.
    The information you have provided is GREATLY appritiated.
    I have not read this much in the past month compared to my whole life, its very interesting and pretty fun.

  5. #5
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293
    ya major pain you seriously have tons of useful resources i keep seeing you post across this forum. Your super helpful. I have had this same problem a lot and I seem to fix it by adding a div to wrap my main content.
    is that not basically the same thing as adding a min-width to each CSS ID you have? Just with out having to add a min-width to every ID??????

    would #innerWrapper { min-width 1000px not do the same thing?

  6. #6
    Join Date
    Jun 2013
    Posts
    13
    Quote Originally Posted by Nicholas Diaz View Post
    ya major pain you seriously have tons of useful resources i keep seeing you post across this forum. Your super helpful. I have had this same problem a lot and I seem to fix it by adding a div to wrap my main content.
    is that not basically the same thing as adding a min-width to each CSS ID you have? Just with out having to add a min-width to every ID??????

    would #innerWrapper { min-width 1000px not do the same thing?
    I found this too which seems to work.
    white-space: nowrap;
    It works just fine without having to fine tune anything.

    I dont recommend using it on the
    h1, h2, h3 {
    font-weight: normal;
    color: #33FFFF;
    min-width: 500px;
    }

  7. #7
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293
    so white-space:nowrap; fixed your problem?

    all that would do is keep text from wrapping... your problem was basically divs moving across the screen when your re-size the browser window?
    Last edited by Nicholas Diaz; 06-11-2013 at 08:43 AM.

  8. #8
    Join Date
    Jun 2013
    Posts
    13
    Quote Originally Posted by Nicholas Diaz View Post
    so white-space:nowrap; fixed your problem?

    all that would do is keep text from wrapping... your problem was basically divs moving across the screen when your re-size the browser window?
    min-width: px;
    Is currently what im using and its doing the trick just fine.
    white-space:nowrap; works for the menus and logos, but not so well for the information/writing/text parts.
    If you don't space properly it can make the super super wide.
    I'm not sure I fully understand what you mean by
    divs moving across the screen when your re-size the browser window?
    If you look at my first post I think I explained what was happening pretty well.
    I'm very new to all of this so pardon my ignorance.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles