WordPress.org

Ready to get started?Download WordPress

Forums

Resize website to browser window (11 posts)

  1. kings3jm
    Member
    Posted 8 months ago #

    Hi there!

    This is a question that I've been searching on and have yet to find a clear answer. A friend wanted me to essentially create this website:

    http://statement.sitehousedesigns.com/#/lifestyle/

    This is NOT a wordpress site, obviously. The functionality she's adamant about is to have the website resize whenever the browser is resized. Exactly as it does on this demo. She does not want a "responsive" website that changes the layout, she wants the entire thing to fit the browser window, just as the demo does.

    Question: Is this possible and if so, how the heck do I do this? Nothing I've tried works...

    Thank you!!

  2. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    She does not want a "responsive" website that changes the layout, she wants the entire thing to fit the browser window, just as the demo does.

    That seems to be a bit contradictory, and that IS a responsive site - it just doesn't have any margins/padding or minimum width set in the CSS code (as many sites do).

    The containing element here is set to 100% - which means it resizes to the browser window.

    <div id="pg_body" style="height: 100%; width: 100%;">
  3. kings3jm
    Member
    Posted 8 months ago #

    Hmmm, I've already tried a div with height and width at 100%, but it never works. Where would I put the div? I've tried the top and bottom of the index.php file, the div at the top of the header file, then close it at the bottom of the footer file, is there another place where this should go?

    Thanks!!

  4. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    the div at the top of the header file, then close it at the bottom of the footer file

    Yes, that would generally be the way to do it, though there's no way to really help without seeing the site. Are you using Firebug to look at what's happening with the CSS? Are there other elements inside the 100% width one that are affecting the width?

  5. kings3jm
    Member
    Posted 8 months ago #

    Here's the website:

    http://jillkcreative.com/onesummerday

    Normally I have someone else helping me with websites (I just design content, etc.) so I'm a little unsure of how this all is working together.

    Thanks!

  6. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    These line of code are in the wrong place - you can't put HTML code for the page outside of the body tags

    <div id="pg_body" style="height: 100%; width: 100%;">
    <div id="entirewrapper">

    <body> tags contain everything that shows up on the webpage - they don't mean body as in "header" and "body" and "footer".

    Likewise, all tags have to be inside the closing </body> tags. So this in the footer needs fixing too:

    </body>
    </div><!--entirewrapper-->
    </html>
    </div>

    You may not need to add anything to the HTML - it may just be a matter of changing the CSS. Take that out and I'll look at it...though you should know that these forums generally only support themes downloaded from this site. Also, you should not be modifying the theme files - as your changes will be lost when the theme is updated - instead you should use a Child Theme

    http://codex.wordpress.org/Child_Themes

  7. kings3jm
    Member
    Posted 8 months ago #

    Thanks for the info! I took those tags out (div for entire wrapper and the div I added for pg_body). Thank you so much for your help, any additional info you can give on the resizing would be greatly appreciated!

    I will definitely work on a child theme, thank you! Right now any css edits I'm making are in the "Edit css" from Jetpack, but I definitely understand the php files would get overwritten. Child theme it is! :)

    Thanks!

  8. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    "Edit css" from Jetpack,

    That's cool - just that if you're changing header.php and footer.php files...believe me, you don't want to go there :/ .

    I see you've made a lot of CSS changes...and some of those are wrecking havoc - look what happens when you resize the browser! Yowza :)!

    So that makes it hard for me to test changes on the original - but you have a max-width here which is limiting the width...

    #wrapper {
        background: none repeat scroll 0 0 transparent;
        border: 0 solid #F1EDAA;
        height: 100%;
        max-height: 620px;
        max-width: 1000px;
        padding: 0;
        width: 100%;
        z-index: -1;
    }

    There are likely others - try using Firebug to go through the site and find the width elements...

  9. kings3jm
    Member
    Posted 8 months ago #

    I took out all the max-width and max-height css, so nothing resizes with the browser. I inserted the code you gave me just after the first body tag in the header:

    </head>

    <body <?php body_class(); ?>>
    <div id="pg_body" style="height: 100%; width: 100%;">
    Then closed the div just before the </body>

    Still doesn't resize. This has been my frustration for a week now. :/ Thanks for taking a look, if you have anymore ideas, it would be so GREATLY helpful!

  10. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    You need to have 100% here:

    #wrapper {
        padding: 30px 0;
        width: 100%;
    }

    But as you can see, that's then going to require redoing a bunch of the CSS of the contained elements. This really isn't at all simple to change the CSS of a responsive theme :/ ...

    And IMHO, it doesn't work well at all on a large screen - tell your client to look at how distorted it will be on a 27" monitor!

  11. kings3jm
    Member
    Posted 8 months ago #

    I just want to point out that I think I've come across a quick solution to this problem. Here's what it is, whether it's RIGHT or not, it works across all browsers and seems to transition nicely.

    Using the following css example, you have to add several media queries to get the effect right, but it works so far.

    @media only screen and (min-width : 1200px) and (max-width: 1499px) {
    #wrapper {
    /*General*/
    transform: scale(0.8);
    /*Firefox*/
    -moz-transform: scale(0.8);
    /*Microsoft Internet Explorer*/
    -ms-transform: scale(0.8);
    /*Chrome, Safari*/
    -webkit-transform: scale(0.8);
    /*Opera*/
    -o-transform: scale(0.8);
    }

    And to apply the transition, I simply applied it to everything on my website, which made it look nice and smooth with each transition.

    * {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    }

    So far so good, but we'll see...

Reply

You must log in to post.

About this Topic