Did I mess up my website by designing in 1280px?

Design help General
1

So I kinda screwed up by not designing in desktop mode (yes I know it says to design there first), my site looks good in 1280px and up, but looks trash/zoomed in when in desktop mode.

Do I have to create the whole website again in desktop mode, or is there any way to copy it from 1280px and up and paste it directly into desktop mode and scale it from there. Or do I have to start over again? :(

Thanks in advance.

2

No easy way around it. You don’t need to start completely from scratch but there will be some production work.

There’s value to having the structure and styling created.
While in the 1280 breakpoint, you’ll need to review each element and the properties that appear in blue text. For example, let’s say you have a div with a background color of hex = #44c048, but when switching to the Base breakpoint the background is transparent. You will plug this hex value into the background color for that div while at the Base breakpoint.
After all values have been plugged in at the Base, you’ll return to the 1280 breakpoint and reset all of the styling that appears in blue text (option + click on each place with blue text) Resetting each will ensure that the styling is cascading from the Base properly.
Make any necessary styling changes at the Base, then return to 1280 and edit the cascade as needed.

3

Yep, this is going to be painful.

If your site isn’t in production yet, and you have at least 2 monitors on your system, then the best approach I can think of is;

  • Clone your site
  • Use Finsweet’s Chrome extension, and Chrome browser
  • On the main site, use the FS clear styles ( not classes ). You want all of your styles reset but the classes still in place.
  • Open the clone design in your second monitor, at 1280 breakpoint
  • Make certain your main design is at desktop breakpoint
  • Go through your main design, element by element, and recreate the styles in your main site, using the clone as a reference. You’ll need to use the class selector when you’re using combo classes.

Note that FS browser extension also has a breakpoint highlighting tool which will show the top icon in red when you’re on a higher breakpoint. That might help prevent this from accidentally happening again.

Ruari has a good overview vid to familiarize you with the extension;