SOLVED How to get rid of vertical space in Gantry 5
-
-
- Pinto Buck
- Rocketeer
- Posts: 74
- Thanks: 11
-
There are several posts in this forum about getting rid of vertical space. However, I did not see a post that combined the items that worked for me into a single post.
So, in Gantry 5 particles, by clicking on block variations you will see No Padding and No Margin. What if you select those, and still have unwanted vertical space. For me the solution was to put a class or classes in the custom.scss file that told every Gantry 5 particle in that row to have the same height, and make that height the height that you want.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
That would not be a solution I would recommend in a responsive template. You should not set fixed dimensions in a responsive template at all (at least not without using media queries too). I would need to see your site to see where the vertical space was coming from.
Please do a screenshot of your problem and annotate to make it clear.
Could you please post a URL to your site (this can be done in the secure area tab if you prefer) 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.
-
-
-
- Pinto Buck
- Rocketeer
- Posts: 74
- Thanks: 11
-
I'm new to templates and to Gantry. I'm building up a new template, using Hydrogen as the base. I have not progressed far enough to get into the responsive feature of Gantry 5. It's on my to do list. I posted the suggestion above, because that is what worked for me so far. Once I get into the responsive feature, I may very well take you up on your kind offer to help. Thank you for the insight.
I have refined my method a little in that I only needed to limit the height of the tallest particle in a row that caused a vertical space gap between one row of particles and the next row.
In Gantry 4 Docs, Utility Classes shows: Equal Height - Sets the element's height equal to the adjoining element.
Would that be a method to use in Gantry 5? - Last Edit: 7 years 10 months ago by Pinto Buck.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
Just resize you desktop browser and see how the fixed heights work out for you...
Yes there is a "equal-height" class and "equal height" block variation in Gantry 5.
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.
-
-
-
- Pinto Buck
- Rocketeer
- Posts: 74
- Thanks: 11
-
After I got into responsive template design a little, I removed any height properties from my CSS classes for all items in the same Gantry 5 row/grid. I got rid of unwanted vertical white space by
1) Using block variations of: no margin, no padding; or the CSS Classes: nomarginall, nopaddingall.
2) With an image editor, I cropped all the images in the same row so they would all be the same height, anyway.
3) If I had to, I used the image editor to cut a tall image into parts, put the parts in different rows, and then aligned the parts to reconstruct the whole image.
That way three were no unwanted spaces, and Gantry 5's built responsive features could automatically resize the images as the viewport or browser width narrowed. - Last Edit: 7 years 10 months ago by Pinto Buck.
-
Time to create page: 0.051 seconds