How to extend content area in certain web pages in wordpress (twenty eleven) (10 posts)

  1. Luka86
    Posted 2 years ago #

    Because i want to put some "iframe" from other web page, i have problem. Their "iframe" is about 960px width and i need all available space in my page.

    When you see it you will know ;


    I find out how to remove widget so i have free space. But i dont know how to extend content area exactly and only for this page.
    So where and how shall i edit CSS code in word press (twenty eleven) to extend content area just in this url ( http://www.sunnysplit.com/split-accomodation/ )

    I need that area to put "iframe" properly.

    Thank you very much. Luka

  2. kjodle
    Posted 2 years ago #

    Add this to child theme CSS:

    #post-106 #content {width: 100%;}

  3. Luka86
    Posted 2 years ago #

    copy paste that code in Twenty Eleven: Stylesheet (style.css) but its not working..


  4. esmi
    Forum Moderator
    Posted 2 years ago #

    Do not edit the Twenty Eleven theme. First create a child theme for your changes. Or install a custom CSS plugin.

  5. kjodle
    Posted 2 years ago #

    1. Create child theme
    2. Add code
    3. Refresh browser and server caches
  6. Luka86
    Posted 2 years ago #

    i empty all caches still not working.. just to repet that empty area was for widgets.. i remove widgets but still cant extend post/page to that area even after copy that code in CSS

  7. ubaidullahbutt
    Posted 2 years ago #

    For applying css to one specific page, use

    <?php if(is_page('42')) { ?>
    //42 is the page id, put your page's id here.
    //Your css goes here between <style type="text/css"></style>
    <?php ?>

  8. kjodle
    Posted 2 years ago #

    You don't need PHP for that. Just append the page's unique ID (found in the <body> tag to the CSS, as in my example above.

  9. Luka86
    Posted 2 years ago #

    problem is there still .
    well i dont know where to put that PhP and CSS code...

    i even installed PC Custom CSS plug in- put code and nothing :/

    i had several css modifications so far, (all solved just by google) but this one that looks easy seems to be hard

  10. Luka86
    Posted 2 years ago #

    I all most succeeded

    i put this code

    <style type="text/css">

    .page-id-106 #content { width: 100%; }


    but as you can see, there is little problem... the iframe is passing over the white area.
    So i need to to just do two things..
    1) extend content area (for example from 1000 to 1200 px just for that page)
    2) or force iframe to be center ..

    Help help help :) :)

Topic Closed

This topic has been closed to new replies.

About this Topic