Spacing Issues On Page

[MichaelAnthonyMurray]

Hello!
I’ve built out my homepage based on a psd given to me by a designer.
I have several spacing issues.

OUR HERITAGE SECTION: How do I make the three column background colors and length the same? https://pasteboard.co/HYKBygv.png

OUR HERITAGE SECTION: The same section while on mobile blends all three into one column. Is there anything I can do to separate them. At least separate the columns. https://pasteboard.co/HYKCUI5.png

FARM STAND SECTION: I can’t get rid of the space under the headline. Also I tried to find and get rid of space above the text. I can’t seem to eliminate the space. https://pasteboard.co/HYKDRjW.png

THREE FLAGS SECTION: Is there a way to make the rounded edges of the flags straight? https://pasteboard.co/HYKEq8k.png I can make them round, but is there a way to make it look more like this example? https://pasteboard.co/HYKEV2b.png

THREE FLAGS ON MOBILE: When I see the flags on mobile all three flags are stacked. how do I space out all three columns? https://pasteboard.co/HYKFSXJ.png

STATE OF THE ART SECTION: The right column’s headline has space. I can’t remove it and make the headline parallel with the left column’s image. https://pasteboard.co/HYKFijS.png

[basanta]

Hi Michael,

Thanks for writing in!

Please find my answer for each of your questions.

1. I can see you have already set the transparent white background to the columns. I am not sure if you want to change the color if so you can change it in column setting.

Regarding the length, if I get it right you are talking about the height of the column should be the same. For that, you can add a minimum height to each of the columns keeping eye on the column which has maximum content. So that it will keep equal height for all columns.
You can add height through element CSS of each column.

$el {
min-height: 300px; /* you can change the value */
}

If you want to make the height automating equal please check this article.

Use Flex Layout | Themeco Docs

2. To add space between the column in the mobile device you can add custom CSS in element CSS.

@media (max-width: 767px){
$el{
margin-bottom: 20px;
}
}

3. This space is due to the paragraph tag inside the heading element.

Please remove it to fix the spacing.

4. Making this type of column you need custom CSS.
Here is a CSS reference which would help you achieve this.

The Shapes of CSS | CSS-Tricks

5. please refer to point number 2.

6. You have extra h1 tag in the heading, which is not required.
   

You select tag and font size in heading setting.

Hope this clear now!

Thanks