Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Automatically resize the page width

  1. #1
    Join Date
    Jun 2011
    Posts
    60
    Thanks
    43
    Thanked 0 Times in 0 Posts

    Talking Automatically resize the page width

    Hello!
    I have the following problem. I have a global style that is not resized in the mobile version of the site.
    This is the style:
    HTML Code:
    <style>.page-t, .fullco {background:#5590cc;}.conte {width:883px; background:#eaeaea; position: relative; border:1px solid #d1d1d1; margin:0; padding:10px 20px; -webkit-border-radius: 0px 0px 8px 8px; border-radius: 6px 6px 6px 6px; -webkit-box-shadow: inset 0px 0px 9px 5px rgba(0, 0, 0, 0.02); box-shadow: inset 0px 0px 9px 5px rgba(0, 0, 0, 0.02); -webkit-box-shadow:  0px 4px 0px 0px rgba(0, 0, 0, 0.1); box-shadow:  0px 4px 0px 0px rgba(0, 0, 0, 0.1);}.page-t {width:883px; font-size:26px; color:#fff; margin: -11px 0 20px -20px; -webkit-border-radius: 6px 6px 0px 0px; border-radius: 6px 6px 0px 0px; padding:10px 20px;}</style><style>.calendar{margin:.50em 16px 10px 0;padding-top:10px;float:left;width:66px;background:#ededef;background: -webkit-gradient(linear, left top, left bottom, from(#ededef), to(#ccc)); background: -moz-linear-gradient(top,  #ffffff,  #ffffff); font:bold 16px Arial Black, Arial, Helvetica, sans-serif;text-align:center;color:#000;text-shadow:#fff 0 1px 0;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;position:relative;-moz-box-shadow:0 2px 2px #888;-webkit-box-shadow:0 2px 2px #888;box-shadow:0 2px 2px #888;}.calendar em{display:block;font:normal bold 11px/24px Arial, Helvetica, sans-serif;text-transform:uppercase;color:#fff;text-shadow:#00365a 0 -1px 0;background:#04599a;background:-webkit-gradient(linear, left top, left bottom, from(#04599a), to(#00365a)); background:-moz-linear-gradient(top,  #04599a,  #00365a); -moz-border-radius-bottomright:4px;-webkit-border-bottom-right-radius:4px;border-bottom-right-radius:4px;-moz-border-radius-bottomleft:4px;-webkit-border-bottom-left-radius:4px;border-bottom-left-radius:4px;border-top:1px solid #00365a;}.calendar:before, .calendar:after{content:'';float:left;position:absolute;top:4px;width:6px;height:6px;background:#111;z-index:1;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;-moz-box-shadow:0 1px 1px #fff;-webkit-box-shadow:0 1px 1px #fff;box-shadow:0 1px 1px #fff;}.calendar:before{left:7px;}.calendar:after{right:7px;}.calendar em:before, .calendar em:after{content:'';float:left;position:absolute;top:-3px;width:2px;height:10px;background:#dadada;background:-webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#aaa)); background:-moz-linear-gradient(top,  #f1f1f1,  #aaa); z-index:2;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;}.calendar em:before{left:9px;}.calendar em:after{right:9px;}</style>
    This is the site: http://www.souhssz.com/tjestova/question/
    I know the problem is this:
    HTML Code:
    width:883px;
    I tried to set the width in percent (87%), but the design shifted.
    Please help me make the mobile version display the content correctly.

  2. #2
    Join Date
    May 2014
    Posts
    203
    Thanks
    28
    Thanked 5 Times in 5 Posts

    Default

    did you try different percentages? i just tinker with it till it fits. like you can use decimals. for example, 87.2%
    or 86.5%, etc.

  3. The Following User Says Thank You to jundo12 For This Useful Post:

    balki (05-09-2017)

  4. #3
    Join Date
    Jun 2011
    Posts
    60
    Thanks
    43
    Thanked 0 Times in 0 Posts

    Default

    Blue background becomes shorter and looks bad.

  5. #4
    Join Date
    May 2014
    Posts
    203
    Thanks
    28
    Thanked 5 Times in 5 Posts

    Default

    i'm looking at it with iphone 5. it resizes if you mean the blue bar at the top of the text

  6. #5
    Join Date
    May 2014
    Posts
    203
    Thanks
    28
    Thanked 5 Times in 5 Posts

    Default

    if you mean the background image behind everything. do you mean this:

    background: #e2e5e8 url("https://lh6.googleusercontent.com/-tuM25buM760/UvH0LR6bGeI/AAAAAAAAEzQ/WGRhVEqX_3w/s695/bg.png") repeat center top;

    that one?

  7. The Following User Says Thank You to jundo12 For This Useful Post:

    balki (05-09-2017)

  8. #6
    Join Date
    Sep 2004
    Location
    Little Falls, Roodepoort, South Africa
    Posts
    411
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    Hi

    Did you try putting this at the top of the html page??

    Code:
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    just after the initial <head> tag


    Also take a look at https://developer.mozilla.org/en-US/..._media_queries for the @media formats

    rgds, Simon
    Very Best Rgds, Simonf :cool:
    __________________________________
    My Site | E-Mail Me

  9. The Following User Says Thank You to simonf For This Useful Post:

    balki (05-09-2017)

  10. #7
    Join Date
    Jun 2011
    Posts
    60
    Thanks
    43
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jundo12 View Post
    if you mean the background image behind everything. do you mean this:

    background: #e2e5e8 url("https://lh6.googleusercontent.com/-tuM25buM760/UvH0LR6bGeI/AAAAAAAAEzQ/WGRhVEqX_3w/s695/bg.png") repeat center top;

    that one?
    Hello,
    I'm talking about the blue background of the title. The percentages are different in the mobile version and the other version, and this displacement length.

    Quote Originally Posted by simonf View Post
    Hi

    Did you try putting this at the top of the html page??

    Code:
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    just after the initial <head> tag
    I put it in the head part, but I do not know if I got to the top position. Unfortunately nothing changed.

    Quote Originally Posted by simonf View Post
    Also take a look at https://developer.mozilla.org/en-US/..._media_queries for the @media formats

    rgds, Simon
    This is too complicated for me and I can not handle it.

    I tried the following:
    I replaced width:883px; with width:100%;. Then I put the site content into this: <div style="width:95.5%;"></div>. That looks good, but the mobile version is shrinking. I'm still looking for a working way for both versions to fit into the screen.
    Regards!

  11. #8
    Join Date
    May 2014
    Posts
    203
    Thanks
    28
    Thanked 5 Times in 5 Posts

    Default

    are you using google chrome?

  12. #9
    Join Date
    Jun 2011
    Posts
    60
    Thanks
    43
    Thanked 0 Times in 0 Posts

    Default

    Only Firefox and Opera.

  13. #10
    Join Date
    May 2014
    Posts
    203
    Thanks
    28
    Thanked 5 Times in 5 Posts

    Default

    this keeps the text in divs and such, responsive
    just change the number to suit you.

    <style>
    p {
    font-size: 3vmin;
    }
    div {
    font-size: 2.6vmin;
    }

    </style>

Similar Threads

  1. Define Image width & Height automatically
    By boosters in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 04-14-2011, 09:02 AM
  2. Lightbox image viewer 2.03a automatically resize to window?
    By chiba151 in forum Dynamic Drive scripts help
    Replies: 17
    Last Post: 01-08-2011, 01:31 PM
  3. Automatically adjust/resize DIV to fit content
    By wispsofsmoke in forum CSS
    Replies: 0
    Last Post: 11-11-2010, 07:20 PM
  4. Replies: 5
    Last Post: 08-30-2007, 02:33 AM
  5. *Automatically Fitting JPG Width Wise On A Open Window*
    By Anurag Agarwal in forum JavaScript
    Replies: 4
    Last Post: 02-11-2006, 05:51 PM

Tags for this Thread

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
  •