SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    May 2010
    Posts
    229
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    removing responsiveness from wordpress theme

    any idea how i would go about removing the responsiveness from a wordpress theme so that it always looks like the full monitor version?

    just looking for some direction here. please advise. thanks in advance.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by sixrfan View Post
    any idea how i would go about removing the responsiveness from a wordpress theme
    It's probably die to the CSS, so remove the styles you don't want. At a guess, they are likely to be served as @media rules, so you might just be able to remove those. A link would be needed for more accurate advice.

  3. #3
    SitePoint Addict
    Join Date
    May 2010
    Posts
    229
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    so here's where it gets a little tricky. i'm using a child theme setup. the CSS from the parent theme that contains the @media stuff is located at:
    /wp-content/themes/parenttheme/library/css/style.css.

    here's a look at that code: http://pastebin.com/1ai53MRi

    I don't want to touch any code in my parent theme because it would obviously defeat the purpose of using a parent theme. to OVERRIDE all parent theme styles that I dont like, I've been entering my CSS at:
    /wp-content/themes/childtheme/style.css.

    so is there a way i can write styles into my childtheme css that will override and cancel the responsiveness? for instance, would something like this work?
    @media only screen and (min-width: 481px) {something here???;}

    please advise. thanks.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by sixrfan View Post
    would something like this work?
    @media only screen and (min-width: 481px) {something here???;}
    If you are trying to modify the styles for small screens, it might need to be like this:

    Code:
    @media only screen and (max-width: 480px) {something here;}
    It sounds like you are trying to style the child theme for mobiles, so I'd think this is what you need to do. If these styles don't override the parent styles, you could make your override styles more specific ... or, at a pinch, just use the !important sledgehammer.

  5. #5
    SitePoint Addict
    Join Date
    May 2010
    Posts
    229
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I'm not try to modify the style for mobile sites, I'm trying to eliminate it. I want them to looks just like it does on a big monitor.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by sixrfan View Post
    I'm not try to modify the style for mobile sites, I'm trying to eliminate it. I want them to looks just like it does on a big monitor.
    The only way to eliminate it is to remove the styles in the parent style sheet. If you can't do that, then you are stuck with having to modify it. In other words, change the styles back to what you want them to be.

    Mind you, this whole setup sounds pretty dreadful to me.

    Maybe another option would be to modify the styles in the parent style sheet so that they only apply to the parent site. For example, you could add a class to the body tag on each page of the parent site like .parent and then change the media rule to

    Code:
    @media only screen and (max-width: 480px) {.parent something here;}

  7. #7
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,228
    Mentioned
    194 Post(s)
    Tagged
    2 Thread(s)
    I have to wonder why this is a problem.

    If someone is viewing in a small monitor, it won't look like a big monitor no matter what. Unless they can zoom in or have superior eyesight the site will be pretty useless at worst and troublesome at best no?

    Or maybe the mobile styles are getting inappropriately used and messing up the desktop view?

  8. #8
    SitePoint Addict
    Join Date
    May 2010
    Posts
    229
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    if you must know, the company will be doing a PPC campaign with an advertising platform that overlays the phone number in order to track the success of the program. so if the sections are moving around the site when adjusting to different widths, the phone number overlays are going to get all screwed up.

  9. #9
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,228
    Mentioned
    194 Post(s)
    Tagged
    2 Thread(s)
    Ah, that makes sense, thanks.

    I guess ideally the solution would be to fix the overlay code to work with the responsiveness rather than take away the responsiveness. But I can understand how that might not be so easy, if even possible.

    If it's just for the duration of the campaign, maybe you could use javascript to take out / replace the troublesome CSS so you won't need to mess with the parent theme's files?

  10. #10
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,378
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    Without looking @ the code it would be hard to say how this could be done. Depending on how the theme was set-up will depend on how easy is it to make it non-responsive. The easier solution was one suggested by @ralph.m ;, I recommend this solution, however, personally, I like easy solutions, which for me would be a similar theme of non-responsive nature.

    @sixrfan ;
    Your solution also works fine, but I much prefer @ralph.m ; solution. You're right, for edits use the child theme, and never the parent. I am not too sure how child themes are setup from a developers point of view, as I've not created one, I soon will however. =)
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •