WordPress.org

Ready to get started?Download WordPress

Forums

Frontier
Making a theme responsive (8 posts)

  1. Ian Schoonover
    Member
    Posted 7 months ago #

    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. http://www.activorenewables.com) and make it responsive using CSS @media queries...

    thanks for any advice in advance
    -Ian

  2. ronangelo
    Member
    Theme Author

    Posted 7 months ago #

    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.

  3. Ian Schoonover
    Member
    Posted 7 months ago #

    @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.

  4. CrouchingBruin
    Member
    Posted 7 months ago #

    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.

  5. Ian Schoonover
    Member
    Posted 7 months ago #

    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.

  6. ronangelo
    Member
    Theme Author

    Posted 7 months ago #

    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" />
  7. Ian Schoonover
    Member
    Posted 7 months ago #

    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...
    http://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!

  8. Ian Schoonover
    Member
    Posted 7 months ago #

    *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.

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.