Landing Page Head markup using flex - extra margin

SOLVE
mkarsten
Top Contributor

At some point last year I followed instructions I found somewhere to add fluid rows to my landing page template modules and head mark-up in the template is using flex. Essentially it keeps all the modules in a row the same height. Because of time constraints, we left the extra margin on the right-side of the module that throws spacing off.

 

I cloned the original archived page (https://info.pitsco.com/2020-christmas-card-contest?hs_preview=uZMqfpgT-36526387845), and am trying to make some improvements, but I can't seem to get rid of the extra margin, which is more obvious because I added rounded corners. I've tried several things, but no matter if I adjust coding in the head mark-up, inline on the module, or inline in the landing page editor, I can't figure out where the extra margin is coming from.

 

I'm attaching a couple screen shots, following is the mark-up, and the work in progress page is https://info.pitsco.com/2020-christmas-card-contest-0?hs_preview=MewDnTtI-56294298662.Purple block on bottom-right shows the extra margin the best.Purple block on bottom-right shows the extra margin the best.Here's how the template is currently setup for these two rows.Here's how the template is currently setup for these two rows.

 

.equal-heights > .row-fluid-wrapper > .row-fluid {
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
justify-content; center;
}

 

Any ideas? I greatly appreciate anything anyone can throw my way!

1 Accepted solution

Accepted Solutions
erod
Solution
Contributor

Not sure if this is what you're asking but take a look here: https://www.screencast.com/t/sVfriPQeMcAA

 

Once you remove the Margin: 0!important; from the inline style it should fix it: https://www.screencast.com/t/JObM6IoL3 

 

What happened is you have 2 spans  lined up side-by-side called "Span6." Each span6 is set to a width of 48.7%. If you multiply that by two you get 97.4%. This means there's an extra 2.6% of extra space (100%-97.4%). This extra space was being used as a margin between the two spans. When you set the margin to "0px!important;" you got rid of that margin, which pushed the span to the left and that's show you got the extra margin on the right.

View solution in original post

3 Replies 3
erod
Solution
Contributor

Not sure if this is what you're asking but take a look here: https://www.screencast.com/t/sVfriPQeMcAA

 

Once you remove the Margin: 0!important; from the inline style it should fix it: https://www.screencast.com/t/JObM6IoL3 

 

What happened is you have 2 spans  lined up side-by-side called "Span6." Each span6 is set to a width of 48.7%. If you multiply that by two you get 97.4%. This means there's an extra 2.6% of extra space (100%-97.4%). This extra space was being used as a margin between the two spans. When you set the margin to "0px!important;" you got rid of that margin, which pushed the span to the left and that's show you got the extra margin on the right.

View solution in original post

mkarsten
Top Contributor

@erod  - Thanks for the insight, and that would work, if the design called for a margin between the two modules. I'm still tweaking the original design, but for the first row I'm applying this to, I have a lavendar color block on the left, and a whitecolor block on the right with a background (paper texture) for the whole page. So, the color blocks need to butt up against each other.

 

Side note: I did something that's thrown the row height off on the white side of both rows now (not equal to lavendar side), working on correcting that too, but I only have a few minutes here and there to work on this page.

mkarsten
Top Contributor

I had a thought after I submitting the reply. These two modules are in a group, because originally I had a stroke around them. I added margin: 0px 1.3%; to the group, which gained the space I needed to get this centered. I'm ok with the indent, but am thinking I could adjust the other modules/groups above and below to match, since it's a relatively small adjustment, if I needed it to be flush with everything. Thanks for the help!

 

Now, just to figure out what I did that the row height isn't equal anymore.:(