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?
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.
- Select the third column and remove the push setting. Then change the span width to
3spans. Align the content of the social-icon-column to the right, do this via the Design pane > Typography section.
- Edit the social-icons class at this breakpoint by changing the top-margin to
- Select the second nav column and remove the pull and change the span width to
12spans. Align the content of the column to the center.
- Now, select one of the nav-links and change the top-margin to
Change the first column span width to
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.
- To ensure the third row looks great, select each of the 4 columns in the row, and change their span widths to
After completing the span changes to the column, the spacing of the elements needs to be fixed.
- First, select the picture element and change the
15px. Lastly, change the bottom-margin of the H6 element to
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
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
For this design, hide the second column at this breakpoint. To do this, change the display of the column to
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.
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
2nd Breakpoint - Second Row
Finally, the second row needs to be edited to ensure it is easily readable.
- Select the row and change the background size to
customand check the
autocheckboxes under the Y and X controls.
- Reduce the top-margin of the FRESH H1 to
- 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
blockin order to center it).
- Select the + (plus) font icon and change the display to
blockand center it as well.
- Reduce the icons font-size to
35pxand give it a top and bottom margin of
2pxand remove the left-margin. You will also need to center the H5 and reduce its font size to
- Lastly, style the buttons so that they sit above one another. Do this by selecting one of the buttons, reducing the padding to
7pxall around, changing the bottom-margin to
7px, checking the
autocontrols under left and right margin and setting the display to
block. Since the buttons are a bit wide, apply a max-width of
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
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.
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.