Adding the breakpoints

There are several ways to go about adding breakpoints for a design. The one I prefer is by first completing the first page of the design and then adding the needed breakpoints. This will allow the rest of the pages to conform to the designated breakpoints (or add a few extra if needed). I find this helps keep the number of breakpoints down and saves the good stuff until the end!

This process is just like above, a row by row, column by column workflow. This allows us to focus on one section of the design at a time, rather than all at once.

 

Want to learn more about breakpoints?

We have a couple of other articles that can assist in your path to enlightenment. Head on over to Grid Systems and Frameworks & Refining your Design.

1st Breakpoint - First Row

Start by moving the slider down to see how the design adapts to different screen sizes. Around 741px the About Us nav link truncates to the next line. So, this would be a good place to add a breakpoint and make a change to the layout. There are many different browsers and some can sometimes display an element a pixel or two differently then what is applied. For this reason, I normally add the breakpoint 5 pixels above where the change needs to happen in the design. In this case, I would set the breakpoint at 746px to add that buffer zone.

 

So why did I add the Push/Pull earlier?

Remember when the push/pull were added to the first row columns? This was done so that we could create the same look on desktops as the current theme has, but when viewed on mobile, the H4 and social icons could sit next to each other. While the navigation column could be moved below those two columns, keeping the design looking good on all the different screensizes.

We are going to remove the push and pull at this breakpoint and to accommodate this I am going to work in reverse for the first row, editing the third column, second and then the first column.

Third Column
  1. Select the third column and remove the push setting. Then change the span width to 3 spans. Align the content of the social-icon-column to the right, do this via the Design pane > Typography section.
  2. Edit the social-icons class at this breakpoint by changing the top-margin to 30px.
Second Column
  1. Select the second nav column and remove the pull and change the span width to 12 spans. Align the content of the column to the center.
  2. Now, select one of the nav-links and change the top-margin to 12px.
First Column

Change the first column span width to 9 spans.

1st Breakpoint - Third Row

You might be thinking a step was skipped, because I moved straight to the third row. Well, in this layout, the second row does not need to be edited in the breakpoint and neither does the forth row. Ever heard the phrase, “If it ain’t broke, don’t fix it?” That applies here.

  1. To ensure the third row looks great, select each of the 4 columns in the row, and change their span widths to 6 spans each.

After completing the span changes to the column, the spacing of the elements needs to be fixed.

  1. First, select the picture element and change the 50px top-margin to 15px. Lastly, change the bottom-margin of the H6 element to 15px as well.

That completes this breakpoint, that was easy!

2nd Breakpoint - First Row

Move the slider down until an element in the first row, no longer looks good at a certain breakpoint. In this instance it is at 440px. Learning from above, add a breakpoint at 445px.

First Column

Now that the design is entering a mobile breakpoint, most of the columns can be converted to a 12 span layout. With that said, change the span width of the first column to 12 spans, edit the top-heading by centering the text in the design and remove the 9% left-margin.

Second Column

For this design, hide the second column at this breakpoint. To do this, change the display of the column to none.

 

Want to keep this column?

If you wanted to keep this column, the best option would be to move it to the footer area. To do this, you would still hide the column at this breakpoint, but first copy it to the new location you wish it to be and then give it a new class name.

Third Column

No edits are needed to the column itself, but there are changes needed to the style of the nav links. Select one of the nav links and reduce the font size to 16px, center the text, change the width to 50%, set the top-margin and bottom-margin to 0px, remove the 6% left-margin and add a top and bottom padding of 7px.

2nd Breakpoint - Second Row

Finally, the second row needs to be edited to ensure it is easily readable.

  1. Select the row and change the background size to custom and check the auto checkboxes under the Y and X controls.
  2. Reduce the top-margin of the FRESH H1 to 7px.
  3. Then edit each of the H1’s located in the column and reduce their font size to 28px, remove the 4% left-margin and center them (for the Talent H1 you will need to set it to display block in order to center it).
  4. Select the + (plus) font icon and change the display to block and center it as well.
  5. Reduce the icons font-size to 35px and give it a top and bottom margin of 2px and remove the left-margin. You will also need to center the H5 and reduce its font size to 22px.
  6. Lastly, style the buttons so that they sit above one another. Do this by selecting one of the buttons, reducing the padding to 7px all around, changing the bottom-margin to 7px, checking the auto controls under left and right margin and setting the display to block. Since the buttons are a bit wide, apply a max-width of 170px.

2nd Breakpoint - Third Row

Again, this is an easy job. For this row, select each column and change the span width to 12 spans. Then change images by reducing the top-margin to 5px, then select the headers and reduce the bottom-margin to 5px.

2nd Breakpoint - Fourth Row

To finish off the page, reduce the copywrite paragraph font-size to 12px and center it.

 

That is it! All done...

See, all that hard (and easy) work paid off! You have successfully created a theme in Responsive Site Designer. If you want to view the entire theme being created (with vocal explanation) please see our full video tutorial here. COMING SOON, check back for link!

Want to compare your version to mine? No problem, you can download it below.


Download Project

For any feedback or questions, you can message me on Facebook, leave a note in the CoffeeCup user forums, or on our Facebook page. Want to share this article? Please help to make RSD known to the world by share it on any (or all) of the buttons at the top of the page, Twitter, Facebook, Pintrest or Google+. Code well my friends.