Skip to main content
F
focused_Gemstone157F
Known Participant
March 28, 2017
Answered

Updating a current site to make it responsive

  • March 28, 2017
  • 2 replies
  • 723 views

This is the current website:  Education Law - Reporter Elementary & Secondary   done with tables, etc, and obviously not responsive.

I took on the task of redesigning it, however, I am having troubles, as this where I am at:  Page Title   (for now ignore the "main content" I will work on that once I get the overall "template" of the pages to be responsive.

Here are my questions:

1.  In a mobile view (max width 414?) - how can I get the image called "preventive law reporters" to move up beneath the menu and/or to the right of the scales.

2.  Why do the images look better in Chrome then IE? Zoom both are 100.

3.  Ideally, I would like a "popup" window to offer complimentary reporters... how can I do that?

Thanks in advance!!

Donna

    This topic has been closed for replies.
    Correct answer osgood_

    Take your mobile "menu' code and wrap it in a <div> named "mobile_nav" see below. Insert it after the <!-- end header --> closing comment in your page code, as shown below: 

    <!-- end header -->

    <div class="mobile_nav">

      <ul id="menu">

        <li><a href="#">Elementary & Secondary</a></li>

        <li><a href="#">Post-Secondary</a></li>

        <li><a href="#">Research Services</a></li>

        <li><a href="#">Research Login</a></li>

        <li><a href="#">Subscribe </a></li>

        <li><a href="#">Renew</a></li>

        <li><a href="#">Contact Us</a></li>

      </ul>

    </div>

    <!-- end mobile_nav -->

    In your jquery.slicknav.js file find the below line of code, its at the top under the 'default = {' settings:

    prependTo: 'body',

    and change it to .mobile_menu like shown below so the script places the mobile menu in the mobile_nav <div> and not the body of the page.

    prependTo: '.mobile_nav',

    To make it all look a bit neater add the below css selector to the css styles:

    .slicknav_menu {

    width: 100%;

    background-color: #8999BB;

    text-align: center;

    }

    2 replies

    Rob Hecker2
    Rob Hecker2
    Legend
    March 29, 2017

    To make a website responsive, you need to address:

    • images
    • font sizes
    • structure (tables, div tags, etc)

    Two methods are used:

    • relative sizes such as percents, viewport widths, ems and rems
    • CSS media queries to change CSS definitions at various break points

    Don't focus on a specific size, such as 414. Make your layout responsive between the full range of 300 to 1200 pixels wide. I work in 100pixel increments. Make sure your web pages  use the HTML5 doctype -- very important!

    With images, it's easy to just make the images 100% the width of the container size, but handling fonts and structure gets more complicated. The details of achieving a good responsive site are beyond the scope of this forum, but there are many tutorials on the web.

    Research:

    https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    https://medium.com/@madhum86/css-font-sizing-pixels-vs-em-vs-rem-vs-percent-vs-viewport-units-b1485716afe7

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

      O
      osgood_
      Legend
      March 29, 2017

      dmreid  wrote

      1.  In a mobile view (max width 414?) - how can I get the image called "preventive law reporters" to move up beneath the menu and/or to the right of the scales.

      You would update your float_left and float_right css selectors to ensure that they add up to no more than 100%, as below:

      .float_left {

      float: left;

      width: 30%;

      margin-left: 20%;

      }

      .float_right {

      float: right;

      width: 38%;

      margin-right: 12%;

      margin-top: 30px;

      }

      You will proabably want to update them in the @media (max-width: 414px)  media query also to take advantage of the limited horizontal space available:

      .float_left {

      width: 25%;

      margin-left: 5%;

      }

      .float_right {

      width: 65%;

      margin-right: 5%;

      }

        F
        focused_Gemstone157FAuthor
        Known Participant
        March 29, 2017

        Thank you so much!  I should have thought of that!  Still learning!

        One last question pertaining to this subject!  Is there anyway that I can get the mobile menu to either be at the very top or allow the header "Preventive Law For Canadian Professionals" run right across the screen? Currently, it is kept to the left and I am thinking it is because of the menu.  I have tried to drop the menu and allow the text to fill in that space (ie., across the container) but it doesn't.

        Thank you!

        O
        osgood_
        Legend
        March 30, 2017

        Thank you so much!  Looks great. Not sure what happened as I was sure that I had uploaded the files!  Looks great now though.

        If I was to make this as an overall look or structure for emailing content within the main body area to our clients, do I have to do inline css for everything?  I am trying to test this out!

        Thanks

        Donna


        dmreid  wrote

        If I was to make this as an overall look or structure for emailing content within the main body area to our clients, do I have to do inline css for everything?  I am trying to test this out!

        Producing html code to use as an email is a whole new skill set.

        I don't get involved with html email these days so I can't really provide much help.

        When I used to build html emails I used tables and inline css styling but I think css doesnt necessarily need to be inline these days and of course gone is the static 650px fixed width table, you need to make your email responsive these days.

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices