StudioPress

Forum navigation

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Sixteen Nine – Would like content and sidebar to scale with browser window

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Sixteen Nine – Would like content and sidebar to scale with browser window

This topic is: not resolved

Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • January 16, 2016 at 9:14 pm #176731
    LukeS
    Participant

    I am working with Sixteen Nine and trying to tweak the CSS so the content area and the right sidebar grow with the browser window. I have a coding background but pretty new to CSS and any pointing in the right direction would be a huge help.

    A good example of this is the third party "Journey" Genesis Framework theme:
    https://themes.wpstud.io/journey/in-the-field/ (with right sidebar)
    https://themes.wpstud.io/journey/full-width-layout/ (without right sidebar)

    I have been messing around with setting the .site-inner to a width of a percentage and clearing out the other fixed pixel widths set but I keep running into issues where the content is then rendering under the left nav sidebar.

    http://demo.studiopress.com/sixteen-nine/blog/
    January 17, 2016 at 12:11 pm #176766
    Victor Font
    Moderator

    Sixteen Nine is a responsive theme. This means there is already code to adjust the content areas when the viewport changes. With any Studio Press responsive theme, the responsive CSS is located in the style sheet's media query sections. This page may help you better visualize how the media queries work: http://www.studiopress.com/responsive/

    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    January 17, 2016 at 12:34 pm #176768
    LukeS
    Participant

    Hi Victor, the theme is responsive but that is not the issue, the content area has a max width that is limiting the content area from expanding to full browser window width on larger screens.

    Screen Capture of what I am trying to adjust on theme

    January 17, 2016 at 4:52 pm #176801
    Victor Font
    Moderator

    What is actually happening is that the width of the content and sidebar remains consistent to the width of the parent element, .site-container. The .site-container width is 1280px regardless of the width of the screen display. The visual of the right sidebar expanding is an illusion because of the back stretch image. To change the everything to fit on wide monitors, you have to start with .site-container and change all of the elements within the site-container. It will be a lot of trial and error.

    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    February 3, 2016 at 11:35 am #178248
    bisonbrah
    Participant

    @LukeS if you ever manage to make this work I'd love to see the styles. I attempted to do this several times in the past on a staging server and could never get it right >.<

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.