Switching an old theme to a responsive theme

1

Hello,
I’m new to roots and I have a client that have a website from three years ago built with roots. It is unresponsive and they would like to make it responsive. Would updating roots make it responsive or would they need their theme updated? Would the best practice be to adjust the theme or install a new theme and make updates to the style from there?

Thanks for the help!

2

Site size, complexity, project timeline and budget all factor in here.

Updating Roots may have some unintended consequences because Roots is meant to be modified directly rather than used as a parent theme and kept up to date. If you’re curious about this option and want to test it then the best practice would be to create a local clone of the site and try updating Roots locally.

Then again, depending on the size and structure of the site, it may be easier to simply write some media queries to make the existing theme responsive.

On the other hand, if the site is relatively small and not too complex then it may benefit from a fresh theme built on the latest Roots. That would also enable you to take advantage of Roots’ advancements since the original theme’s creation.

I think you need to weigh your options!

1 Like
3

Great reply from @cfx.

It’s pretty easy to experiment with all of the options. Just create theme copies, hack a little bit and see which gets you closest the fastest.

I’m not sure if Roots even used Bootsrap 3 years ago (only drank the roots kool-aid last year) but if it did, it might be as simple as adding the correct Bootstrap classes to your main containers. Thankfully, bootstrap maintains some older docs.

Short of all that, depending on the visual requirements of your responsive versions, you might be surprised at how far this CSS snippet will get you along the way.

/* hopefully the original CSS developer didn't include a bunch of !importants.*/
div, p, ul, table, img {
    float: none !important;
    max-width: 96% !important; /* breathing room on the sides */
    margin-left: auto
    margin-right: auto; 
}

You can tighten/loosen that selector as needed.