HTML on a responsive mobile version of site

Question

I'm struggling with this bit of HTML on my iPhone for the hours portion of the site at the bottom of the page. The desktop site's operation hours looks great, but the mobile version looks terrible. You can view it by reducing your horizontal browser to less than 968px or so. There are just huge spaces in between the times.

I'm currently using the following code within my wordpress text widget. We are trying to keep it aligned.

Any help would be much appreciated.

<p>
    <strong></strong>
    <div class="flex_column av_one_fourth first  el_before_av_one_half">Monday</div>
    <div class="flex_column av_one_fourth el_after_av_one_fourth">6 AM - 10 PM</div>

    <div class="flex_column av_one_fourth first  el_before_av_one_half">Tuesday</div>
    <div class="flex_column av_one_fourth el_after_av_one_fourth">6 AM - 10 PM</div>
    
    <div class="flex_column av_one_fourth first  el_before_av_one_half">Wednesday</div>
    <div class="flex_column av_one_fourth el_after_av_one_fourth">6 AM - 10 PM</div>
    
    <div class="flex_column av_one_fourth first  el_before_av_one_half">Thursday</div>
    <div class="flex_column av_one_fourth el_after_av_one_fourth">6 AM - 10 PM</div>
    
    <div class="flex_column av_one_fourth first  el_before_av_one_half">Friday</div>
    <div class="flex_column av_one_fourth el_after_av_one_fourth">6 AM - 10 PM</div>
    
    <div class="flex_column av_one_fourth first  el_before_av_one_half">Saturday</div>
    <div class="flex_column av_one_fourth el_after_av_one_fourth">8 AM - 10 PM</div>
    
    <div class="flex_column av_one_fourth first  el_before_av_one_half">Sunday</div>
    <div class="flex_column av_one_fourth el_after_av_one_fourth">8 AM - 8 PM</div>
    
</p>

Answer 1

Firstly, as suggested you should clean up your HTML, and maybe start from basics.

Firstly, you can't place loads of divs inside a paragraph tag. You'll see on your website, you'll have an empty

tag that's been automatically closed by your browser.

Secondly, I would put each line into it's own container div, and then place a div for each day, and times inside that.

<div>
    <div>Monday</div>
    <div>6am - 10pm</div>
</div>
<div>
    <div>Tuesday</div>
    <div>6am - 10pm</div>
</div>
etc

Now, you can assign each line a class, and set that styling to 100% width. Then, each of the divs inside, you can set to inline-block, with a width of 50%.

<div class="item">
    <div class="day">Monday</div>
    <div class="times">6am - 10pm</div>
</div>

.item {
    display:block;
    width:100%;
}
.item .day, .item .times {
    display:inline-block;
    width:49.9%;
}

Here's a quick example I created showing how media queries work in this case, along with naming your divs, and having your markup correct.

http://jsfiddle.net/jyyg5f62/

The CSS breakpoint is 736px which is the width of an iPhone 5s (and similar) sized screen in portrait mode. When the browser detects this width, the new CSS styling takes over. In this case, it swaps the inline-block for block, so each day and time are on their own line. When the viewport expands, they appear side by side.

Answer 2

If you want them to be on the same line, I would suggest putting the day and time in the same div. If you would like them to just be closer, reduce the margin on the top of the time and bottom of the date on the mobile devices.

Answer 3

Some tips on developing mobile (aka "responsive") sites.

1. Use DIVs within DIVs within DIVs. Break your page into sections that are contained within DIVs. Set outer DIV widths as percentages, heights auto (or as pixels). Immed inside the outer DIVs, should be other DIVs that divide up that screen space accord to percent required (width). See reference article (bottom) re fluid grid.

2. Also, all images should be sized the same way -- width as percentage. This way, as the view size changes, the images/etc will be resized appropriate to the container, which will also be resized appropriately.

3. Font sizes in em and/or percents.

4. Use Chrome to view your website on various mobile devices by:

   • press F12 (Dev Tools)
   • In Dev Tools window, at top left, beside magnifying glass icon, click the iPhone icon. Look what happens to the page in Chrome. Note at top almost-left you can set the device: iPhone5, for e.g.

5. You can use this jQuery/js strategy to specifically size DIVs etc for various-sized screens:

   $(function() {
       win_size_recalc();
   
       $(window).on('resize', function(){
           win_size_recalc();
       });
   });
   

And your recalc fn can look something like this:

function win_size_recalc(){
    ww = $(window).width();
    if (ww <= 550){
        $('#header').css({'height':'50px'});
        $('nav').css({'height':'55px', 'width':'98%'});
        $('#main').css({'width':'98%'});
        $('#footer').css({'width':'98%'});
    }else if (ww <= 650){
        //etc
    }
}

If you do it right, though -- using DIVs and IMGs with widths as percentages, there should be no need to use jQuery/js to play with sizes.

References:

http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design