Flex columns Spacing

[KCMiller401]

I just had a really fun time creating a site using your new x-plus flex columns and the great tutorial you put out. Thank you. I have 2 spacing issues that I am wondering if you can help me with.  The Site is LisaForD39.com. Near the top of the first green box the Blue title word EXPERIENCED seems to be indented one character, but I can not move it left. What am I missing? Also, the very bottom row before the footer is set up as 2 columns in a row, the left column is very small and solid blue to make the whole row look like 1 box. However, I can not make that row as wide as all of the others. Any ideas?

Thanks for your help here and the fun new way to build sites (or parts of sites).

[scrambler]

1- The space before EXPERIENCED  is a weird one, I see nothing in the styling explaining it, but  I believe it is the result of the facebook icon being floated right.

I can fix the problem by doing one of two things:

a- Inserting a break after the <h1> Lisa Schneider… and before the <span> of the EXPERIENCED text
<h1..>Lisa Schneider…</h1>
<br/>
<span….>EXPERIENCED</span>

b- Adding a display:block to the <span> tag making it
<span style=”color: rgb(39, 103, 191); display: block; “><strong>EXPERIENCED </strong></span>

2- I do not understand what you are saying for the last row why would you set it up as two columns if it is only meant to show one?

Right now there is only one element in there set for 99% so not sure what you did with the settings.
Do you by any chance have an empty box?

3- I am also not sure why you use several flex-columns widgets instead of one with everything in it

4- First and second row break down when the browser gets smaller. See my follow up post below on why that is

 

 

[scrambler]

Regarding 4- In the first row, The problem appears to be that you set up margins on the box manually using pixel.
You cannot do that at it breaks responsiveness. Separation margin (right/left) must be done using the provided option in the widget, so the plugin can properly calculate the width of each box.

If you add manual left and right margins, then as the browser changes size, the total width of the boxes and the margin space no longer amount to 100%, causing them to stack. So NO manual left and right margin on the boxes!

[Weaver]

The white text on light gray block in the center is not very readable, by the way.

[scrambler]

Regarding 4- On the second row, the problem appears that the icons below donate are not responsive, as a result when I shrink the browser, they extend past the box width and makes it larger, forcing them to stack.

Solution is either to:

• Get a responsive PayPal code
• or add the rule below in the Theme Global CSS rule box, to make it scale with the box
  #wvrx_columns-3 .wvrx-fb-col-1 form input[name=”submit”] {width:100%;}
• or set the boxes to overflow:hidden, to that when the content extend past the edge it is clipped.
  You can do that by adding the rule below in the box labeled “Custom CSS for all Text Boxes”
  overflow:hidden;

[KCMiller401]

Wow. Thank you both for all the help and input.

1-Unfortunately, neither the <br/> nor the display: block; fixed the EXPERIENCE Indentation. I even temporarily removed the facebook icon and link and nothing changed.

2-We did want the last box to be 100% width and 1 Column was not a choice, so I thought to set up a very small left hand box with content of “–” in the background color to get to 100%. Clearly not a great work around on my part. I think now I should have just made it regular content under the widgets on a full width front page. Anyway, I have now given the page that box’s background color, so the edges do not show any more, and I like having the color between boxes on medium screen sizes where there is space.

3-Good point. I am not sure why I used so many flex column widgets either – except my head was in a mode of thinking by row!

4- Thank you for the catch and explanation on the margins for the picture. That was a mistake on my part – I meant to put a bit of padding around the image and have now corrected it.

As for the paypal image extending out of the box; I had not seen that on any of the screens I tested, so I was not aware. I did install the code you gave me in the theme global CSS area, but since I had never seen the issue I can not know for sure if it is working! Would you look at it where you had seen the issue and let me know?

Weaver, I completely agree on the light gray and have changed it.

Again – thanks so much to both of you. I always learn so much from this Forum.

 

[scrambler]

1- Can you put the display:block in the span inline style and post back

2- Given you used one flex-column widget per row, if you only want one box, there is no point in using the flex-column widget. Either make the last row part of the previous flex-column widget, or use a simple text widget for the past row.

4- to see the problem,. reduce the width of your browser. Right now with the solution you chose, the widget wont stack, but the Donate block will extend into the next block.

The cleanest solution is to use the rule below in the Theme Global CSS rule box, to make it scale with the box
#wvrx_columns-3 .wvrx-fb-col-1 form input[name=”submit”] {width:100%;}

[KCMiller401]

1-EXPERIENCED

is now live, but because it causes EXPERIENCED to appear differently from the other topic words I do not wan to leave it there long.

2- I understand and thank you. My thinking was too convoluted – simpler is very frequently better!

4- I had reduced the width of my browser and checked on a tablet (vertical and horizontal) and on my phone before I ever posted the question and have not seen the issue. However, I did install your recommended code before I responded last time. So I thank you for helping with an issue I did not know was there!

 

Thanks again.

[scrambler]

1- Well it is now working, and the space on the left is gone. You can remove the break (<br/> ) to remove the vertical space above it.

4- Sorry it looks like I had a typo in the rule I gave you so it is not working. Remove the quotes and make it look like the revised one below

#wvrx_columns-3 .wvrx-fb-col-1 form input[name=submit] {width:100%;}

[KCMiller401]

I removed the <br/> and the EXPERIENCED stayed above the sentence in its own line. I then removed the display:block and EXPERIENCED went back down to the beginning of the sentence, but with the slight indentation, no surprise since that is where we were when this started. Anyway, it appears that the display:block is causing the EXPERIENCED to sit on its own line. Any other thoughts on how to get it to cooperate?

Thanks again!

[scrambler]

Use float:left instead

<span style=”color: rgb(39, 103, 191); float:left;”> <strong>EXPERIENCED </strong></span>

 

[KCMiller401]

YES! That did it. I still don’t understand why it was needed (why it floated right by 1 character?) but really appreciate the solution, your time and all that I learn from you. I am sorry that my gravitar is so grumpy – I am not!

Best.

[scrambler]

I looked into everything, and I could not figure out why the text is indented, VERY weird

[Author]

Posts