Vertical lines between columns - Support | Kriesi.at

Hi,
it is possible to have custom vertical lines between columns?

View post on imgur.com

February 24, 2016 at 2:26 pm #588386

Basilis

Hi teotaban!

Yes, you can add a border-left or border-right.
We can help you further with that request, but we need to see the site and where you want to add those lines.

Cheers!
Basilis

February 26, 2016 at 9:02 pm #590004

teotaban

Hi, this is the link

Solutii financiare

Thank you

February 28, 2016 at 3:22 pm #590436

Vinay

Hey!

To add vertical border

1. Enable custom Class Support
http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

add class border-right to the text widget.

2. Add this css in Enfold > General Styling > Quick CSS

/* right botrder */
.border-right {
border-right: 1px solid #000;
padding-right: 20px;
}

Cheers!
Vinay Kashyap

March 1, 2016 at 8:48 am #591405

teotaban

Thank you :)

March 2, 2016 at 6:27 am #591898

Rikard

Keymaster

Hi,

Glad we could help :-)

Thanks,
Rikard

March 13, 2020 at 8:35 pm #1192982

Good afternoon.

My client wants a grid with vertical and horizontal lines then the text boxes would live inside. Here’s the site location: https://californiadataprivacyact.com/

I need to upload the sample for you to see.

Kevin

March 13, 2020 at 9:20 pm #1193005

Victoria

Hi Kevin,

Could you please attach a mockup of what you’re trying to achieve?

Best regards,
Victoria

March 13, 2020 at 10:23 pm #1193013

I used a color box set the color you see on the sample, then imported a sized png of the grid but there should be a way to code it so the margins stay the same. I’ve attached 2 screenshots; What the client wants and the current approach.

You can see it here. https://californiadataprivacyact.com/

How do I attach?

Thank you!

Kevin

March 14, 2020 at 6:52 am #1193064

Rikard

Keymaster

Hi Kevin,

You can upload screenshots to Dropbox or Google Drive for example, then link to them here.

Best regards,
Rikard

March 14, 2020 at 8:01 pm #1193123

Thank you. Here is the link to the 2 screenshots; What the client wants and what I put together that kind of worked on a desktop but was not responsive. I layered an image with the grid in a color box and placed text boxes over it.

Google Drive Link: https://drive.google.com/open?id=1JOKs1PVhoCsVfT7txl54he7ZM1dBbbaa
My clients site: https://californiadataprivacyact.com/
Scroll down to the live version of what my client wants, here: https://www.hubspot.com/

Thank you,
Kevin

March 15, 2020 at 11:33 am #1193193

just create a color-section ( gave a custom-class or unique ID to it f.e.: outlines) – but in all 8 times your 1/4 columns
style them with outline not with borders !
the surrounding container got now the overflow:hidden – so in most cases the outlines at the border are gone – otherwise a negativ margin will to the trick.

#outlines .flex_column {
  outline: 1px solid #fff;
  overflow: visible !important;
  padding: 90px 0 !important;
}

#outlines .entry-content-wrapper {
  overflow: hidden !important;
}

see here: https://webers-testseite.de/griditems/
For the responsive case : do some css to hide – or switch then to borders

Edit : if you want it really perfect – just do it as in your example page and use flexbox modell to rule the outlook

March 15, 2020 at 12:13 pm #1193202

flexbox modell – same example page – see the difference on responsive behavior: https://webers-testseite.de/griditems/
just have individual height here for 1/4th containers and no space between – the ID in this color-section is: outlines-flex

#outlines-flex .entry-content-wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: stretch;
  overflow: hidden;
}

/*** otherwise these "containers" will influence the flexbox ***/
#outlines-flex .entry-content-wrapper::before, 
#outlines-flex .entry-content-wrapper::after {
  display: none;
}

#outlines-flex .entry-content-wrapper .flex_column {
  flex: 1 1 auto;
  outline: 1px solid #fff;
  padding: 90px 0 !important;
  margin: 0 
}

/*** just forgotten to set the colors for the entries ***/
#outlines-flex .avia-animated-number * {
    color: #fff !important;
}

@media only screen and (max-width: 989px) {
  #outlines-flex .entry-content-wrapper .flex_column {
      flex: 0 1 50%;
      outline: 1px solid #fff;
      padding: 90px 0 !important;
      margin: 0  !important
  }
}

@media only screen and (max-width: 549px) {
  #outlines-flex .entry-content-wrapper {
      justify-content: space-around;
  }
  #outlines-flex .entry-content-wrapper .flex_column {
      flex: 0 1 90%;
      outline: none !important;
      padding: 90px 0 !important;
      border: 1px solid #fff;
     margin-bottom: 20px !important
  }
}

Play a bit with your responsive break-points maybe it is necessary to adjust for your settings.

March 15, 2020 at 9:15 pm #1193294

Thank you Guenni007 for the assistance.

I am unable to make this happen with the code you supplied or from the samples at webers. Not being a coder I’m probably not putting code where it belongs.

Kevin

March 15, 2020 at 9:32 pm #1193307

you first have to read carefully – i think all my tuts are good enough to reproduce.
first take the flexbox modell !
This is a mighty way to do this.
Then a lot of participants only put in the code and do not read about custom classes or ID’s

the setting was: all 8 1/4th columns in one colour section; this color-section got the ID : outlines-flex
the 1/4th columns are set to individual height and with no space between!

click to enlarge:

Thats it: then try the code.: Link

March 15, 2020 at 10:36 pm #1193333

Once again… thanks for your help. I believe I’ve don all of your instructions.

See Settings: https://drive.google.com/open?id=1eGC49h9p4pTV4u9Qw4OgvW6URaS7kclR

Live here: https://californiadataprivacyact.com/

Kevin

March 16, 2020 at 2:44 am #1193363

hm – first get rid of that invisible hr – you can manage that in a different way.
Because all elements in a flex container will be handled and that is an additonal container.
This color-section should have only the columns in it.

then – i do not see even the first rule to set the entry-content-wrapper to display:flex – so i guess you have not regenerated the mergied files of css and js.
i see on developer tools none of my code above – these are the old merged files:
This merging of the files behaves similar to caching – so goto your Enfold Child – Performance – and mark delete old css an js files – and save all changes.
After that delete the browser cache too!

See what happens to the page if i (virtually) add the code to your page:
the two images are not set as the others to align: center – that makes a difference because these have other paddings !

i deleted one thing ( all of your content is set to white color – so the one rule is obsolete) and i added only one rule to have more padding left right:

#outlines-flex .entry-content-wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  overflow: hidden;
  align-items:  stretch; 
}

/*** otherwise these "containers" will influence the flexbox ***/
#outlines-flex .entry-content-wrapper::before, 
#outlines-flex .entry-content-wrapper::after {
  display: none;
}

#outlines-flex .entry-content-wrapper .flex_column {
  flex: 1 1 auto;
  outline: 1px solid #fff;
  padding: 90px 30px !important;
  margin: 0 ;
}

#outlines-flex .entry-content-wrapper .flex_column * {
  text-align: center !important;
}

@media only screen and (max-width: 989px) {
  #outlines-flex .entry-content-wrapper .flex_column {
      flex: 0 1 50%;
      outline: 1px solid #fff;
      padding: 90px 30px !important;
      margin: 0  !important
  }
}

@media only screen and (max-width: 549px) {
  #outlines-flex .entry-content-wrapper {
      justify-content: space-around;
  }
  #outlines-flex .entry-content-wrapper .flex_column {
      flex: 0 1 90%;
      outline: none !important;
      padding: 40px 30px !important;
      border: 1px solid #fff;
     margin-bottom: 20px !important
  }
}

think of your merged files !
PS: Avoid uncommon signs in css f.e. that dashed line in your quick css ? – – – – – – – – – – on top – remove this too – if you want to have comments in css just surround it by /***** xyz ****/

March 16, 2020 at 10:20 am #1193417

maybe 90px padding on top/bottom is too much – just do it to your needs

March 16, 2020 at 7:18 pm #1193578

Victoria

Hi bluerhinocreative,

Did you get it working with Guenni007’s help or do you need more help?

Best regards,
Victoria

March 16, 2020 at 7:28 pm #1193585

This reply has been marked as private.

March 16, 2020 at 7:59 pm #1193601

Getting SO CLOSE! Have boxes and not just the specific grid. ( https://drive.google.com/open?id=1w6OjBU2JZHmCIGagmZ9my1cPRfkRZpl- )

But getting much closer. https://californiadataprivacyact.com/

Kevin

March 16, 2020 at 8:44 pm #1193621

You’re so counseling-resistant.
please individual height – no equal heights – no gap –
if you don’t make it now, then my support for you ends here with my 6000th post.
Hope you can let a mod login to your backend – I’m desperate here!

See with your images and text: https://webers-testseite.de/griditems/

here is the shortcode: Edit with link to your images:

[av_section min_height='' min_height_pc='25' min_height_px='500px' padding='default' custom_margin='0px' custom_margin_sync='true' color='main_color' background='bg_color' custom_bg='#78b2b6' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' attach='scroll' position='top left' repeat='no-repeat' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' shadow='no-border-styling' bottom_border='no-border-styling' bottom_border_diagonal_color='#333333' bottom_border_diagonal_direction='' bottom_border_style='' custom_arrow_bg='' id='outlines-flex' custom_class='' aria_label='' av_element_hidden_in_editor='0' av_uid='av-zqkdpc']
[av_one_fourth first min_height='' vertical_alignment='av-align-middle' space='no_margin' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' border='' border_color='' radius='0px' radius_sync='true' padding='25px' padding_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' aria_label='' av_uid='av-k7stpf2d']

[av_textblock size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='custom' color='#ffffff' id='' custom_class='' av_uid='av-k7utm0tl' admin_preview_bg='']
<img class="aligncenter size-full wp-image-37087" src="https://californiadataprivacyact.com/wp-content/uploads/2020/03/Number-1-WHT-80x80.png" alt="" width="80" height="80" />
<h4 style="text-align: center;">California Based Professionals</h4>
[/av_textblock]

[/av_one_fourth][av_one_fourth min_height='' vertical_alignment='av-align-middle' space='no_margin' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' border='' border_color='' radius='0px' radius_sync='true' padding='25px' padding_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' aria_label='' av_uid='av-k7stpf2d']

[av_textblock size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='custom' color='#ffffff' id='' custom_class='' av_uid='av-k7utm0tl' admin_preview_bg='']
<img class="aligncenter wp-image-37088 size-full" src="https://californiadataprivacyact.com/wp-content/uploads/2020/03/Number-2-WHT-80x80.png" alt="" width="80" height="80" />
<h4 style="text-align: center;">Trusted by Multi-Billion Dollar Customers</h4>
[/av_textblock]

[/av_one_fourth][av_one_fourth min_height='' vertical_alignment='av-align-middle' space='no_margin' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' border='' border_color='' radius='0px' radius_sync='true' padding='25px' padding_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' aria_label='' av_uid='av-k7stpf2d']

[av_textblock size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='custom' color='#ffffff' id='' custom_class='' av_uid='av-k7utm0tl' admin_preview_bg='']
<img class="aligncenter wp-image-37089 size-full" src="https://californiadataprivacyact.com/wp-content/uploads/2020/03/Number-3-WHT-80x80.png" alt="" width="80" height="80" />
<h4 style="text-align: center;">Customized and Secure Intake of Consumer Requests</h4>
[/av_textblock]

[/av_one_fourth][av_one_fourth min_height='' vertical_alignment='av-align-middle' space='no_margin' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' border='' border_color='' radius='0px' radius_sync='true' padding='25px' padding_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' aria_label='' av_uid='av-k7stpf2d']

[av_textblock size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='custom' color='#ffffff' id='' custom_class='' av_uid='av-k7utm0tl' admin_preview_bg='']
<img class="aligncenter wp-image-37091 size-full" src="https://californiadataprivacyact.com/wp-content/uploads/2020/03/Number-4-WHT-80x80.png" alt="" width="80" height="80" />
<h4 style="text-align: center;">Responsive Customer Service</h4>
[/av_textblock]

[/av_one_fourth][av_one_fourth first min_height='' vertical_alignment='av-align-middle' space='no_margin' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' border='' border_color='' radius='0px' radius_sync='true' padding='25px' padding_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' aria_label='' av_uid='av-k7stpf2d']

[av_textblock size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='custom' color='#ffffff' id='' custom_class='' av_uid='av-k7utm0tl' admin_preview_bg='']
<img class="aligncenter wp-image-37091 size-full" src="https://californiadataprivacyact.com/wp-content/uploads/2020/03/Number-5-WHT-80x80.png" alt="" width="80" height="80" />
<h4 style="text-align: center;">Privacy Law Knowledge Base</h4>
[/av_textblock]

[/av_one_fourth][av_one_fourth min_height='' vertical_alignment='av-align-middle' space='no_margin' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' border='' border_color='' radius='0px' radius_sync='true' padding='25px' padding_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' aria_label='' av_uid='av-k7stpf2d']

[av_textblock size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='custom' color='#ffffff' id='' custom_class='' av_uid='av-k7utm0tl' admin_preview_bg='']
<img class="aligncenter wp-image-37092 size-full" src="https://californiadataprivacyact.com/wp-content/uploads/2020/03/Number-6-WHT-80x80.png" alt="" width="80" height="80" />
<h4 style="text-align: center;">Licensed in California</h4>
[/av_textblock]

[/av_one_fourth][av_one_fourth min_height='' vertical_alignment='av-align-middle' space='no_margin' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' border='' border_color='' radius='0px' radius_sync='true' padding='25px' padding_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' aria_label='' av_uid='av-k7stpf2d']

[av_textblock size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='custom' color='#ffffff' id='' custom_class='' av_uid='av-k7utm0tl' admin_preview_bg='']
<img class="aligncenter wp-image-37093 size-full" src="https://californiadataprivacyact.com/wp-content/uploads/2020/03/Number-7-WHT-80x80.png" alt="" width="80" height="80" />
<h4 style="text-align: center;">Trusted Privacy Partner</h4>
[/av_textblock]

[/av_one_fourth][av_one_fourth min_height='' vertical_alignment='av-align-middle' space='no_margin' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' border='' border_color='' radius='0px' radius_sync='true' padding='25px' padding_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' aria_label='' av_uid='av-k7stpf2d']

[av_textblock size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='custom' color='#ffffff' id='' custom_class='' av_uid='av-k7utm0tl' admin_preview_bg='']
<img class="aligncenter wp-image-37094 size-full" src="https://californiadataprivacyact.com/wp-content/uploads/2020/03/Number-8-WHT-80x80.png" alt="" width="80" height="80" />
<h4 style="text-align: center;">Ongoing New Data Privacy Law Support</h4>
[/av_textblock]

[/av_one_fourth]
[/av_section]

March 16, 2020 at 9:13 pm #1193639

This reply has been marked as private.

March 16, 2020 at 9:26 pm #1193651

Victoria

Hi Kevin,

Glad you got it working with Guenni007’s help.

If you need further assistance please let us know.
Best regards,
Victoria

March 16, 2020 at 9:38 pm #1193658