Making a theme responsive

  • So I know your theme is responsive, but had a split decision between owners where they decided to go with another developer. This other developer bought a “premium” theme for their WordPress (which previously had frontier installed) and used it instead. Well now they aren’t happy because this new site isn’t responsive and they want me to make it responsive for them.
    I’ve never done this before, but that’s not going to stop me from putting a bid on it and trying to figure it out.
    So my question is, how difficult would it be for me to take a site/theme that isn’t responsive (i.e. https://www.activorenewables.com) and make it responsive using CSS @media queries…

    thanks for any advice in advance
    -Ian

Viewing 7 replies - 1 through 7 (of 7 total)
  • Theme Author ronangelo

    (@ronangelo)

    So my question is, how difficult would it be for me to take a site/theme that isn’t responsive

    It’s quite simple if the theme only has 1 or 2 columns. It would be a matter of adding max-width: 100%; to the divs and some content (images, videos…)

    You can use media queries to indicate when a div goes underneath another to form 1 column in case there are 2 initially. Media queries would also be useful to control when certain elements are shown or hidden. Ex. Some theme have separate navigation menus for certain screen sizes.

    Thread Starter Ian Schoonover

    (@iantskon)

    @ron thanks, I’ll be playing with it tonight so I’m sure I’ll be back with some more questions before long.
    I’ll be more than happy to send some cash your way for your time.

    The site looks simple enough to convert. I would say your biggest hurdles will be making the slideshow resize itself and toggling to a drop-down or hamburger menu at whatever screen width you decide on.

    Thread Starter Ian Schoonover

    (@iantskon)

    So the first issue I’ve run into is that my cell phone is still viewing the site as a “desktop” site. You mentioned some themes having separate navigation menus for certain screen sizes, I think that is the client’s main concern – having menus be readable/navigable on smaller screens.

    I created a test version of the clients site while I try to learn/figure out the media queries, etc.

    I’m beginning to think it may be easier (for me anyways) to take a responsive layout (such as the frontier theme) and style it to look like the client’s current set up (complexity-2), although over all I would like to better understand media queries.

    Theme Author ronangelo

    (@ronangelo)

    my cell phone is still viewing the site as a “desktop”

    You’ve added the max-width: 100%; right? Add this on the <head>

    <meta name="viewport" content="width=device-width" />

    Thread Starter Ian Schoonover

    (@iantskon)

    Thanks for the tip, I put that meta tag into the <head> and it now recognizes my max-width styling.
    This is as far as I’ve gotten…
    https://www.sulu13.net/test/
    Still playing with it, I know the menu is supposed to be displayed as a block and not a table, right? I couldn’t seem to get that to work. No luck with the slider either.
    Going to get back to it tomorrow, signing off for now.
    Any advice is welcome.
    Cheers!

    Thread Starter Ian Schoonover

    (@iantskon)

    *update*

    I was able to make the menu a block, just had to change height to 100% for it to view correctly.

    The menu looks good from my phone, but when I click on any of links other than the home page it becomes distorted.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Making a theme responsive’ is closed to new replies.