Talk:Prayers: Difference between revisions

From Rejoice in the Catholic Faith
No edit summary
Line 5: Line 5:
** note: on mobile the right border extends to width of the screen : how to fix?
** note: on mobile the right border extends to width of the screen : how to fix?
* took out the <div><pre><div style="margin-bottom:15px"></pre> and replaced it with bottom margin on both tables, which seems to separate them from each other okay on small screens
* took out the <div><pre><div style="margin-bottom:15px"></pre> and replaced it with bottom margin on both tables, which seems to separate them from each other okay on small screens
 
*& using <nowiki><poem></nowiki> bc on mobile on the 2nd table, the font gets small on lines after the first, and can't figure out why; using poem cleared the problem,
** although it makes for 1.5 space not 2, and double spacing under poem meaks for spacing of 3, which is too much
=== prayer table code ===
=== prayer table code ===




{|style="vertical-align:top; float:left; margin-right:25px; margin-bottom:15px; border:solid 1px; background-color:#eaecf0;"  
{|style="vertical-align:top; float:left; margin-right:25px; margin-bottom:15px; border:solid 1px; background-color:#eaecf0;"  
!style="padding:15px;"|>>Prayer start here<<
!style="padding:15px;"|
<poem>
>>Prayer start here<<
Amen
Amen
</poem>
|-
|-
|style=font-size:75%;|<center>"From >>SOURCE</center>
|style=font-size:75%;|<center>"From >>SOURCE</center>
Line 17: Line 21:
|}
|}
{|style="vertical-align:top; border:solid 1px; background-color:#eaecf0;"  
{|style="vertical-align:top; border:solid 1px; background-color:#eaecf0;"  
!style="padding:15px;"|''>>Prayer start here w/ italics for Latin''
!style="padding:15px;"|
 
<poem>''>>Prayer start here w/ italics for Latin''
''Amen.''
''Amen.''
</poem>
|-
|-
|style="font-size:75%;"|<center>From the >>SOURCE</center>
|style="font-size:75%;"|<center>From the >>SOURCE</center>
Line 28: Line 33:
{|style="vertical-align:top; float:left; margin-right:25px; margin-bottom:15px; border:solid 1px; background-color:#eaecf0;"  
{|style="vertical-align:top; float:left; margin-right:25px; margin-bottom:15px; border:solid 1px; background-color:#eaecf0;"  


!style="padding:15px;"|>>Prayer start here<<
!style="padding:15px;"|
<poem>>>Prayer start here<<
Amen
Amen
</poem>
|-
|-
|style=font-size:75%;|<center>"From >>SOURCE</center>
|style=font-size:75%;|<center>"From >>SOURCE</center>
Line 36: Line 43:


{|style="vertical-align:top; float:none; border:solid 1px;"  
{|style="vertical-align:top; float:none; border:solid 1px;"  
!style="padding:15px;"|''>>Prayer start here w/ italics for Latin''
!style="padding:15px;"|''>>
 
<poem>Prayer start here w/ italics for Latin''
''Amen.''
''Amen.''
</poem>
|-
|-
|style="font-size:75%;"|<center>From the >>SOURCE</center>
|style="font-size:75%;"|<center>From the >>SOURCE</center>

Revision as of 13:07, 12 April 2024

Table structures

  • using separate one-column tables so they collapse on mobile
  • using font 85% so it reduces on mobile
    • note: on mobile the right border extends to width of the screen : how to fix?
  • took out the
    <div style="margin-bottom:15px">
    and replaced it with bottom margin on both tables, which seems to separate them from each other okay on small screens
  • & using <poem> bc on mobile on the 2nd table, the font gets small on lines after the first, and can't figure out why; using poem cleared the problem,
    • although it makes for 1.5 space not 2, and double spacing under poem meaks for spacing of 3, which is too much

prayer table code

>>Prayer start here<<
Amen

"From >>SOURCE

>>Prayer start here w/ italics for Latin
Amen.

From the >>SOURCE
{|style="vertical-align:top; float:left; margin-right:25px; margin-bottom:15px; border:solid 1px; background-color:#eaecf0;" 

!style="padding:15px;"|
<poem>>>Prayer start here<<
Amen
</poem>
|-
|style=font-size:75%;|<center>"From >>SOURCE</center>
|-
|}

{|style="vertical-align:top; float:none; border:solid 1px;" 
!style="padding:15px;"|''>>
<poem>Prayer start here w/ italics for Latin''
''Amen.''
</poem>
|-
|style="font-size:75%;"|<center>From the >>SOURCE</center>
|-
|}
<br>

notes

  • >> needs a <br> to separate Notes from prayer tables
  • 1st table has float:right; 2nd does not
  • div provides margin at bottom of prayer tables to avoid floating right


notes table code

{|style="font-size:85%; width:65%; margin-left:35px; border:solid 1px; border-color:#c4ccd4; background-color:#f0f2f4;"
|Notes:
* note 1
* note 2
|-
|}

Notes:
  • note 1
  • note 2