Updating a current site to make it responsive

Report · Mar 28, 2017

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

Report · Mar 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%;

}

Report · Mar 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!

Report · Mar 29, 2017

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

<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>

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;

}

Report · Mar 29, 2017

Thank you, I made the changes you suggested, but it didn't change it. I must have missed something.

Thanks for your time, I do appreciate it.

Donna

Report · Mar 29, 2017

dmreid wrote
Thank you, I made the changes you suggested, but it didn't change it. I must have missed something.
Thanks for your time, I do appreciate it.
Donna

Make sure you are not looking at a cached version of the page in your web-browser. If you follow the steps carefully it will change.

If you want to put a version of the page up again with the latest changes I'll take another look later tonight.

Report · Mar 29, 2017

I had updated the files: Page Title

Thank you so much!

Donna

Report · Mar 29, 2017

Did you make the change in your slicknav.js file and upload it again?

http://preventivelaw.ca/js/jquery.slicknav.js

At the moment its still showing:

prependTo: 'body',

Instead of:

prependTo: '.mobile_nav',

plus I don't see that you have added the css selector below to the end of your slicknav.css file:

.slicknav_menu {

width: 100%;

background-color: #8999BB;

text-align: center;

}

Report · Mar 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

Report · Mar 30, 2017

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.

Report · Mar 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-b14857...

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

Updating a current site to make it responsive

1 Correct answer