#1
  1. A Change of Season
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,558
    Rep Power
    221

    Simple row col issue with Bootstrap 4 on iphone


    Hi;

    I am a bit puzzled. How can I get the timer here to stay in 1 line on iPhone? On iPhone the "seconds" goes to the next line and looks pretty bad.

    ====> link <====

    Super simple Bootstrap 4 code:

    Code:
    <div class="container text-center">
      <div class="row text-center">
        <div id = "timer_frame" class="col-md-12"> 
          <div class="row justify-content-md-center d-flex">
            <div class="col text-center col_bg">
              <span class="days display-4 timer_font_color"></span>
              <span class="d-block timer_font_color">Days</span>
            </div>
    
            <div class="col text-center timer_font_color col_bg">
              <span class="hours display-4 timer_font_color"></span>
              <span class="d-block timer_font_color">Hours</span>
            </div>
            
            <div class="col text-center timer_font_color col_bg">
              <span class="minutes display-4"></span>
              <span class="d-block timer_font_color">Minutes</span>
            </div>
    
            <div class="col text-center timer_font_color col_bg">
              <span class="seconds display-4"></span>
              <span class="d-block timer_font_color">Seconds</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    And here is the page raw

    TANX
  2. #2
  3. Backwards Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,916
    Rep Power
    9646
    As you can see it won't all fit on one line, so you have to shrink the font size for both labels. The display-4 is too large (2.0rem looks about right) and the d-block needs a smaller font-size (primarily because "Minutes" and "Seconds" are pretty long).

    Look through Bootstrap to see if there's anything helpful. I didn't find one but it might still be there. If not then do some media queries to alter the sizes for those two elements on small displays - where "small" is basically you playing with the browser to see about what pixel width is the limit for the normal styles.
  4. #3
  5. A Change of Season
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,558
    Rep Power
    221
    Originally Posted by requinix
    As you can see it won't all fit on one line, so you have to shrink the font size for both labels. The display-4 is too large (2.0rem looks about right) and the d-block needs a smaller font-size (primarily because "Minutes" and "Seconds" are pretty long).

    Look through Bootstrap to see if there's anything helpful. I didn't find one but it might still be there. If not then do some media queries to alter the sizes for those two elements on small displays - where "small" is basically you playing with the browser to see about what pixel width is the limit for the normal styles.

    There is this but I need help implementing it.

    Also, there has to be a proper way of doing this and not by "guessing". What am I supposed to do? Test every possible size, upload, reload on all mobile devices? Like I said, I am sure thre is a proper way of doing it.
    Last edited by English Breakfast Tea; May 23rd, 2018 at 07:11 PM.
  6. #4
  7. A Change of Season
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,558
    Rep Power
    221
    Everything is in one line on iphone 5

    And on a large page, it looks good too => https://webmoosh.com/broadcast.html

    However, this is not what I want still.

    Issues:

    1- The font is too small on iphone https://ibb.co/cHsXWT and desktop https://webmoosh.com/login

    2 - There is big margin under the timer when the font is small => https://ibb.co/cHsXWT

    This is an issue with media queries.

    This is on Desktop. 301 Moved Permanently.

    How come it's being treated as Phone? min-width: 276px is being applied!

    The font size can be a lot larger. I want this to be like this http://prntscr.com/jlv9el since this is on the desktop.

    In other words, how come this is being applied to the desktop:

    Tanx
    Last edited by English Breakfast Tea; May 23rd, 2018 at 10:38 PM.

IMN logo majestic logo threadwatch logo seochat tools logo