SOLVED Adding body padding
-
-
- Sputnik Web
- Newbie
- Posts: 14
- Thanks: 0
-
How do I add body padding to a Gantry template? Let me elaborate...
I am attempting to work Gantry into a particular design... strictly speaking it's a Hexeris template but it's Gantry that I'm attempting to modify.
The design requires a large background image - in this case it's a slice of bread with a little whitespace around it. The content of the gantry layout should always lie within the image of the bread, regardless of the width of the display (Gantry must be set to responsive mode).
The problem is that at certain widths the modules will approach the sides of the available viewport, thus overhanging the slice of bread ruining the nuance of the design... hence why I need to add some padding to the sides of the layout.
I have had some success using the "force position" Gantry feature, moved visible modules into position 'b', using positions 'a' and 'f' effectively for padding, however there are some situations where I might end up needing 5 equal width module positions (2 outer 'padding' columns and 3 normal columns) and this clearly wouldn't be supported by using this technique.
I have tried adding padding to various elements using a custom css file - for example, body, #rt-mainbody-surround, #rt-transition, #rt-page-surround etc. - but this doesn't work because it does not affect the actual width of the modules - the left padding is good but, because the module width fixed, the right edge of the modules disappear off screen.
Could you give me a pointer as to how this may be best achieved?
Thanks! :cheesy: - Last Edit: 11 years 5 months ago by Sputnik Web.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Could you please post a URL to your site so we can look for you. Without a link to page where the problem is on your site it is quite hard for us to provide the best solution due to so many variables. We try to provide file names and line numbers for code changes and if changes have already been made then our advice may be incorrect.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Sputnik Web
- Newbie
- Posts: 14
- Thanks: 0
-
Hi Mark
Here you go... douglas.footholds.net/~sandwich/
This link is work in progress so I may be working on it as you are looking.
The advice I'm after, though, I believe is quite generic... it's about simply taking Gantry out of the box (or Hexeris in this case) and making the modules never touch the sides, regardless of the width of the viewport.
Since my OP I've had a little more success and may be onto the best way of achieving my goal, however if you can suggest a simpler approach I would appreciate it...
I have been editing libraries/gantry/css/grid-responsive.css and adjusting the responsive breakpoints by editing that very file. So, for example, .rt-container (and corresponding grid widths) will be 960px when the viewport is between 1160px-1399px. This will give a minimum of 100px whitespace on each side of the viewport.
So far this approach is working well so I think I will take the changes I have made to the native Gantry CSS file and add them to my custom CSS file so that they don't ever get overwritten. I may also add extra breakpoints because I think the responsive granularity of Gantry for this project isn't fine enough to keep the design coherent.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Ok well If you want to alter the Gantry responsive widths, please see this thread
http://www.rockettheme.com/forum/index.php?f=661&t=182889&hilit=960%20responsive&rb_v=viewtopic#p901979
That's the correct way of doing it - using a custom CSS file rather than changing our original template files. The more grid sizes that you add the more complicated it's going to get for you to maintain the correct look in the widths (that's why we didn't create more and why we avoided a truly fluid layout).
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Sputnik Web
- Newbie
- Posts: 14
- Thanks: 0
-
That's exactly what I've done now - added the widths to my custom CSS file to avoid the overwriing issue (see the last paragraph of my last post
So far it's pretty successful - I'm running into a block with making it work for RokSprocket though - it retains a three-column layout right down to a narrow width. I might just have to hide that for narrow screens and approach that from a different angle, unless you can suggest another angle of attack for RokSprocket?
-
-
-
- Sputnik Web
- Newbie
- Posts: 14
- Thanks: 0
- Got RokSprocket sorted now - just a few more custom CSS overrides so the blocks go full width at the same moment the modules positions do. I think I'm pretty much there now... thanks for your help.
-
Time to create page: 0.063 seconds