Support » Theme: Bouquet » How can I reduce the total width of my theme layout?

  • Resolved cooljosh3k

    (@cooljosh3k)


    Due to the scenarios under which my website might be viewed, is it possible to shrink the width of everything down to just 655px wide?

    Right now I have it down to 972px, but this is still too wide. A ton of my viewers will see this from within “Team Fortress 2” and I would guess that around 10% of players would need that 655px limit (1366px wide monitors). For the rest viewing on 1920px wide monitors, it still does trim a little off the side at my current 972px limit.

    Any help or suggestions is much appreciated.

    My child theme files are at https://www.tf2tightrope.com/wp-content/themes/bouquet-child/

Viewing 8 replies - 1 through 8 (of 8 total)
  • If you want to get your content down to 655px wide, you first have to remove the min-width property that you’ve set in this rule of your child theme’s style.css file:

    
    #primary {
       box-shadow: 3px 5px 7px 7px rgba(0, 0, 0, 0.2);
       min-width: 960px;
    }
    

    Then you can try adding this rule to set the content width to 655px:

    
    #branding, #main {
       max-width: 655px;
       margin-left:auto;
       margin-right:auto;
       float: none;
    }
    

    Thanks, but this kinda messed up my site badly.
    I have reverted back to before those changes, but did take a screenshot to point out the issues caused: https://postimg.org/image/tqk06ds2h/

    That’s surprising. I tried it out on both Chrome DevTools & Firebug and it looked like it would work. It looks like the #main element is still floating to the left. You copied & pasted the new rule in its entirety at the end of your child theme’s style.css file, and you removed the min-width property from that other rule?

    OK, if you added the new rule before this one:

    
    #main {
       float: left;
    }
    

    Then the #main element is going to float to the left, which is why it looks like that in your picture. Make sure you paste it at the end of your child theme’s style.css file, or at least after that rule.

    I tried this in FireBug and it fixes the branding, but the content overlaps the widget still. It also leaves a large transparent area below the widget.

    Add these two rules as well:

    
    #primary {
       background-color: #edf6fe;
    }
    #content-wrapper {
       margin-right:160px;
    }
    

    Oh nice. Thank you!

    Oh darn. Seems it doesn’t like portrait layout on iPad. Not a big deal though.

    Oh nevermind, looks like my iPad was just using an old cache for some reason.

    • This reply was modified 2 years, 6 months ago by  cooljosh3k.
    • This reply was modified 2 years, 6 months ago by  cooljosh3k.
Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘How can I reduce the total width of my theme layout?’ is closed to new replies.