control over 'breakpoints' / margins

[tallhat]

hi there, i’ve been using ikebana for a while on a site, and have recently noticed that on a macbook pro retina screen the page layout becomes unnecessarily narrow (with very wide margins to left and right of the content). is it related to global margins, or the responsive breakpoints? i’d love to be able to stop this happening on a retina screen, any suggestions as to where to look to tweak this and get a bit more width on retina/macbook pro? thanks

example from the site http://kevingaskell.com/leader/ it’s giving me a breakpoint/layout sort of equivalent to 1,300 pixels viewport width on a non retina…

thanks

[satori]

Hey Chris,

there’s a setting called “Maximum content width” in the “Page Elements” tab of the Theme Options panel – you can use it to indicate the maximum width the content can take; if you input something large there, the content will keep expanding indefinitely to fill the width of the screen.

Sincerely,
Andrii / Satori Studio

[tallhat]

thanks, but that’s not really what the problem is – the problem seems to be specific to page margins around the 1280-1300 pixel viewport width (or double that on retina). i’m getting a narrower content area on at 1280px viewport (or full viewport on macbook pro retina for instance) than should be necessary. it feels that if the overall page margins were reduced then the wider content would fit (are they % margins? i’m not sure where to adjust these in CSS).

if you look at http://kevingaskell.com/leader/ for instance at 1280px or full width on a retina macbook pro there are big margins left and right and quite a narrow content area, and the top menu ‘wraps’. there’s definitely room to expand the content area/container an reduce the margins and eliminate the nav menu ‘break’, but i don’t know how to adjust the content area/global container width or page margins. have been looking at the CSS but i don’t know if it’s a responsive/media query thing, margin settings, overall container etc. – and where i should be looking. thanks

[satori]

Hey Chris,

the content width in Ikebana is determined by two parameters:

1. The “width” CSS statement which is generated by the code on lines 806-850 of the “header-functions.php” template file, depending on the width of the single portfolio masonry tile, so that a non-fractional number of tiles always fits exactly into the content width. The generated code contains content widths for all breakpoints from very wide to mobile.

2. The “max-width” statement which is generated on lines 100-106 of the “custom-styles.php” theme file, this is the one that limits the maximum width the content can have. It’s calculating its value from the Theme Options setting I mentioned in the above post, and based on what you described I still suspect this is what you’re after.

Sincerely,
Andrii / Satori Studio

[tallhat]

ah, got it. the culprit is actually the “$minmargin = 90;” in header-functions.php – i reduced this a bit and now get a much better fit on macbook pro/retina screens.
thanks for the pointer.

[Author]

Posts