Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Montezuma Theme »

responsive grid not behaving as expected


  #1  
Old Aug 22, 2014, 08:30 AM
jms5017's Avatar
jms5017
 
115 posts · Jul 2010
NY/NJ Metro area
I have a page design that is 960px and selected "Responsive 960px margin 0" as the grid system. However, firebug tells me that
#container is 990px with 0 padding and margin
#banner-bg is 990px with 0 padding and margin
#banner is 960px with 0 padding and margin....

1. Why isn't #container 960px with 0 padding and margin? I was expecting that since I set the grid to 960 that #container would be 960px.

2. How does #banner get to be 960px with 0 padding and margin when its contained in #banner-bg which is 990px with 0 padding and margin? How is the 30px difference accounted for?

Thanks!
  #2  
Old Aug 22, 2014, 06:12 PM
CrouchingBruin's Avatar
CrouchingBruin
 
299 posts · Aug 2010
Santa Monica, CA
The responsive grid is implemented by fitting elements with a class of col# inside DIVs with a class of row. In a 960px grid, the row elements will be 960px wide, so #banner and #main are each 960px wide. I assume that #container and #banner-bg are not row elements so they can stretch across the width of the browser window. That is, you'll notice that the widths that you cited are actually the current width of your browser. This would be useful, for example, if you wanted to give the appearance of a header which stretched across the entire width of the page by setting the background-color of #banner-bg (sort of how the footer looks). Or you could set the colors of the margin on each side of the main content area by setting the background-color for #container. But the elements within #banner and #main should act responsively as long as the numbers of the col# elements add up to 12 (see documentation under Montezuma Options > CSS Settings > Editing CSS).
__________________
My Montezuma-themed sites: ESHS Girls Basketball Team, Venice Hongwanji Buddhist Temple
Please consider making a donation to BytesForAll for their great themes!
  #3  
Old Aug 23, 2014, 07:33 AM
jms5017's Avatar
jms5017
 
115 posts · Jul 2010
NY/NJ Metro area
Thanks Crouching Bruin.
"That is, you'll notice that the widths that you cited are actually the current width of your browser. "
I would have thought so too, but that's not what is going on. The browser viewport it >1300px.
#body is the browser viewport, then #container appears to be the structural element that constrains all the other elements into the page where the content goes.
In looking at index.php and header.php, you are correct that the #container and the #banner-bg are not contained in a DIV with a class of ROW.
But its driving me crazy that I can' t figure out where or how the width of #container or banner-bg is coming from/ computed / set?
So far, I've made very limited changes to the css (mostly adding gradients and patterns to the body and replaced the #container border with a box-shadow. However, the first design layout that the
graphics artist gave me was 1067 so I played with the CSS grid settings to see what would happen if I used one of the "responsive 100% 0.8%" or "responsive 100% 2.0%" and decided that since I didn't know what the heck I was doing, I asked the artist to give me a 960px layout. So now I'm scratching my head trying to figure out how to proceed. The design is such that I need to style #container....I can't just ignore it and use the elements that are 960px.
I am wondering if by switching between the various css grid settings I have a remnant of something floating around....but why can't I see it in firebug?
  #4  
Old Aug 23, 2014, 07:59 AM
jms5017's Avatar
jms5017
 
115 posts · Jul 2010
NY/NJ Metro area
If I look at your budhist temple site, the container is 960px - and there is a texture pattern that fills the browser viewport...that is exactly what I am trying to do...I want the container to be 960...what grid are you using on that site?

The other thought I had...(amazing how sometimes just asking the question helps my brain come up with a solution) I should just install a fresh copy of the theme and not fiddle with changing the CSS grid settings. Will let you know how that works out...
thanks!
  #5  
Old Aug 23, 2014, 08:17 AM
jms5017's Avatar
jms5017
 
115 posts · Jul 2010
NY/NJ Metro area
Fresh install of the theme and the #container is still 990 with no hint of where / how that width is set.
I did find a media query in layout.css that sets the max-width of #banner to 960px. Should I change that to set the max-width of #container to 960 and call it a day? or will I cause myself more mental anguish? My hair is starting to hurt over this.
  #6  
Old Aug 23, 2014, 08:20 PM
CrouchingBruin's Avatar
CrouchingBruin
 
299 posts · Aug 2010
Santa Monica, CA
It looks like the #container element actually sizes to fit its content because it has a display property of table instead of block. So I'm not sure why your container element is at 990px. Can you provide a link to your site? Could there be an element that is 990px wide that is stretching the width of #container?

The background of the temple site is created by setting the background property of the body element:
Code:
body {
background: url(http://vhbt.org/images/background_nami.jpg) repeat top left;
}
If you have a large image that you are trying to set as the background, you should probably use no-repeat and maybe fixed as part of the background property attributes.
__________________
My Montezuma-themed sites: ESHS Girls Basketball Team, Venice Hongwanji Buddhist Temple
Please consider making a donation to BytesForAll for their great themes!
  #7  
Old Aug 24, 2014, 01:26 PM
jms5017's Avatar
jms5017
 
115 posts · Jul 2010
NY/NJ Metro area
The site is in the early stages, and the client has an existing site, so I haven't updated the DNS. The only way I know that you can see it is by updating your hosts file by running notepad as admin (right click notepad and select run as admin). Then navigate to
Windows->System32->Drivers-> etc and select all files in the drop-down dialogue.
Add this line to the hosts file (end of the existing list is fine, or near the top, doesn't matter)
192.185.99.185 www.thestrapsaver.com the strapsaver.com
save the file and close it.
This tells your browser not to bother to look up the DNS, but just use this IP address for this site.
If you add a # in col 1 of the file, it "comments out" the directive.

I actually already have the body tag set up so that I have both a repeating pattern and a gradient covering the body and then the white #container on top. so that part is fine, its just the width of the #container that is wrong. Funny, when I play with the display: table on the #container, I lose the repeating pattern and the gradient that's applied to the body tag I have added so little to this site thusfar I think this behavior is a big clue as to what is happening. ....but I can't see where.

here is all that is in container....the white background and I removed the border in favor of a box shadow.
#container {
background: none repeat scroll 0 0 #fff;
box-shadow: 0 0 3px 2px #333;
box-sizing: content-box;
display: table;
margin: 0 auto;
min-height: 870px;

Any insight appreciated...
Thanks!
  #8  
Old Aug 25, 2014, 02:22 AM
CrouchingBruin's Avatar
CrouchingBruin
 
299 posts · Aug 2010
Santa Monica, CA
OK, what's pushing out the width of your container to 990px is this rule for the breadcrumbs bar:
Code:
#breadcrumbs1 {
padding: 5px 0 5px 30px;
}
Go into the breadcrumbs.css virtual file and change the padding left value from 30px to 0px.
__________________
My Montezuma-themed sites: ESHS Girls Basketball Team, Venice Hongwanji Buddhist Temple
Please consider making a donation to BytesForAll for their great themes!
  #9  
Old Aug 25, 2014, 06:17 AM
jms5017's Avatar
jms5017
 
115 posts · Jul 2010
NY/NJ Metro area
Thanks! I can't find a donate button tied to your profile....should I donate to the general forum or can you send me a link to your donate button?
  #10  
Old Aug 25, 2014, 07:55 AM
CrouchingBruin's Avatar
CrouchingBruin
 
299 posts · Aug 2010
Santa Monica, CA
Please donate to the general forum. Thank you for your generosity!
__________________
My Montezuma-themed sites: ESHS Girls Basketball Team, Venice Hongwanji Buddhist Temple
Please consider making a donation to BytesForAll for their great themes!

Bookmarks

Tags
960 grid, responsive grid

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Side bars will not go away for pages as I expected them to do. bsprowl Sidebars & Widgets 4 Sep 26, 2014 12:34 PM
Text content not behaving as I would like to Innocent Center area post/pages 3 Jan 16, 2011 10:14 AM
Audio Plugin Not What I Expected SCLove Forum How-To 0 May 31, 2009 11:03 AM


All times are GMT -6. The time now is 03:51 AM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.