WordPress.org

Ready to get started?Download WordPress

Forums

The Bootstrap
changing the width of page.php single.php and sidebar.php (4 posts)

  1. alixdsgn
    Member
    Posted 1 year ago #

    Howdy!
    I am working on a child theme and I need (^__^) to set a different width for two template pages that I am using. One template is a full width page and the other one has a sidebar with a text widget on the side. The width that I need to change is the one defined by the primary id.
    On the full width page I managed to do this by changing the span12 class to span10.
    On the other template I left the same span4 in the sidebar.php and I changed only the span in the single.php file from span8 to span6 so to obtain again a width of 10 (6+4).
    My problem is that all these elements are floating left and I cannot find a way to center them maintaining a full responsiveness.
    Is anyone trying to achieve the same result as I am doing?
    Any idea?
    Thankssss

  2. Brad Davis
    Member
    Posted 1 year ago #

    I used The Bootstrap to make a full width child theme, I add a div that was full width, then added the container inside to keep everything in the centre.
    Check the html on my site here: http://www.bradley-davis.com/

  3. alixdsgn
    Member
    Posted 1 year ago #

    That is a good idea. I am gonna try right now.
    Another way I found is to add an extra empty div with the correct span according with the bootstrap grid.
    For instance, a full width page with sidebar is by default:
    <div=.. class="span8" (primary content)><div=.. class="span4" (secondary content)>
    If I want a narrow centered content it will become:
    <div=.. class="span1" (empty space one the left)>
    <div=.. class="span6" (primary content)>
    class="span4" (secondary content)>
    don't need to set another div span1 cause the elements are floating left

  4. Brad Davis
    Member
    Posted 1 year ago #

    Thanks allxdsgn.
    Also if you are after a narrow template, check out - http://twitter.github.io/bootstrap/examples/marketing-narrow.html

    You can set a max-width to the container if you don't want the 1170px width, or make your own theme using the customize options to set your width - http://twitter.github.io/bootstrap/customize.html (rebuilding one of mu sites this way at the moment.)

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic