WordPress.org

Ready to get started?Download WordPress

Forums

Custom Community
[resolved] How to extend page content to full (or nearly) browser width? (5 posts)

  1. cpekid
    Member
    Posted 1 year ago #

    Hello,
    I have a client who insists on a responsive website where the content on each page width fills up the entire browser window so you don't see any background on the sides and no more than a 5px margin on each side. I failed to talk her out of it, so this is what I've tried in the Custom Community css area, but it's sloppy. link to site

    .container-fluid {
        width: 133%;
    }

    I then adjusted the left margin to center everything, but the problem is, it creates a scroll bar that scrolls right to excess blank space.
    I know that it's not correct to have any width over 100%, but I couldn't figure out how extend the content otherwise.
    When I set the container fluid width to 100%, the theme shrinks my content area width and crops my slider. (not using the theme slider).

    My screen has high resolution so I was creating extra wide header, footer & slider images to try to fill the width, but only the text & menu are resizing.

    Is there an easier css fix with this theme that I am missing?

    Thanks a million!

  2. cpekid
    Member
    Posted 1 year ago #


  3. konradS
    Member
    Posted 1 year ago #

    Hi cpekid,

    setting the container fluid to 133% works only in your resolution, as the wrap around is not set to 100% width of a display generally, but maybe to 1200px. so the container will only be 133% of 1200px then, the size you have added for this wrap around.

    Remove the old CSS and try to start out with this CSS:

    #outerrim #innerrim { width: 100%; }

    that should make your site setup to 100% first. then work more and more inside.

    hope this helps and point to the right direction!

    p.s. never change theme files - use the CSS tab in the theme settings page and the options as far as possible. or, if you like coding, make a child theme.

    read more here:

    Changing Theme Files
    http://support.themekraft.com/entries/21638203-Changing-Theme-Files

    Creating Child Themes
    http://support.themekraft.com/entries/20916508-Create-Child-Themes

    Knowledge Base Custom Community
    http://support.themekraft.com/categories/20053996-Custom-Community

    Custom Community Support
    http://themekraft.com/support/

    hope this helps - konrad

  4. cpekid
    Member
    Posted 1 year ago #

    @ konrad THANK YOU!!!! This has been driving me crazy for the past 3 days! Your code worked, and now I can fiddle to get things aligned properly. I was already working with the child theme, so your advice was perfect.
    Grateful! - Mel

  5. konradS
    Member
    Posted 1 year ago #

    Awesome!

    Enjoy it and show off your finished site in the Custom Community Showcase:

    http://themekraft.com/custom-community/showcase

    :) konrad

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic