Card 6 |   Bg_collapse spoiler – line breaks – spaces issues


bg_collapse_level2 doesn’t handle the acf shortcodes / ok for sc name


[bg_collapse_level2 view=”link-inline” color=”#4a4949″ icon=”eye” expand_text=” Open sc_1″ collapse_text=” Hide sc_1″]



 Line-breaks using (cr) & [ shortcodes] (acf_txt1)    |   card6 Edit post - id:29603
logo
img
img1
img2
img3

  The images are defined in the page's ACF custom fields | Sourced from: "card6" | ID: "29603"

2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.



Edit sc_1


   /restricted-content
   /log-in
   /log-out
   /register
   /edit-profile
   /recover-password
[/bg_collapse_level2]

NEXT



Add a line-break using CSS

h6 style="margin:0px -10px 14px important
Set the content property to “ \a ” (the new-line character).
Set the white-space property to “pre“. This way, the browser will read every white-space, in myClass , as a white-space.


Styling img CSS| .padded img { padding-left: 6em; padding-right: 6em; etc..
HTML| < img class="padded" etc..

Inline-block/white-space issue: Codepenn examples don’t work here. CAUTION /!\ Added ul li CSS in file /!\

No fix

  • one
  • two

Not Fixed by < /li>< li> code formatting here vs Codepen…

  • one
  • two

Totally Not Fixed by adding html comments after < /li>< ! —

    • one
  • two

Not Fixed by CSS margin-right: -4px; needs -5px…

  • one
  • two

Not fixed by omitting the </li>

  • one
  • two

FIXED with font-size: 0 via: https://twitter.com/#!/garand/status/183253526313566208

  • one
  • two




Line-breaks using (cr) & [ shortcodes] (acf_txt1)

For a row of images, carriage returns (cr) in the code after each image prevent the single row alignement. (cr)’s are prohibited since they add a dirty vertical indent line.

On the other hand, ending Shortcodes [ /… ] at the end of a line disregard the break by (cr). An extra character or invisible tag < / > is required. Otherwise set the ending at the beginning of the next. [ Shortcode 1 ] [ /Shortcode 1 ][ Shortcode 2 ]

Images floating in a row. No (cr) after each image!

‹img src=”/wp-content/uploads/PDF.png” alt=”” style=”float:left; width:60px;margin-right:6px;”›‹img src=”/wp-content/uploads/PDF.png” alt=”” style=”float:left; width:60px;margin-right:6px;”›‹img style=”width: 60px; height: auto; margin-right: 6px;” src=”/wp-content/uploads/PDF.png” alt=””›‹img style=”width: 60px; height: auto; margin-right: 6px;” src=”/wp-content/uploads/PDF.png” alt=””›

Images floating in a row.