box around text

Site URL: https://www.muffyjdavis.com/2-weeks-2-destiny

15 hours ago, muffy said:

Site URL: https://www.muffyjdavis.com/2-weeks-2-destiny

Hi friends!

I have created a page for my site that needs a little formatting help. In my ideal world- each section would have a square around it on desktop. The square would be the same thickness on all sides. The squares would have more padding than they do now up top, and the squares would be the same size.

Here's the link:

https://www.muffyjdavis.com/2-weeks-2-destiny

Here's the code:

//box border//

@media only screen and (min-width:641px){

#block-yui_3_17_2_1_1645809882958_2713, #block-yui_3_17_2_1_1645810473216_7919, #block-yui_3_17_2_1_1645810473216_12628 {border-left: 1px solid brown}

#block-yui_3_17_2_1_1645809882958_2713, #block-yui_3_17_2_1_1645810473216_7919, #block-yui_3_17_2_1_1645810473216_12628 {border-right: 1px solid brown}

}

@media only screen and (min-width:641px){

#block-yui_3_17_2_1_1645809882958_2713, #block-yui_3_17_2_1_1645810473216_7919, #block-yui_3_17_2_1_1645810473216_12628{border-top: 1px solid brown}

#block-yui_3_17_2_1_1645809882958_2713, #block-yui_3_17_2_1_1645810473216_7919, #block-yui_3_17_2_1_1645810473216_12628{border-bottom: 1px solid brown}

Hi, try deleting the spacer blocks in between the columns and the css code above. Try this one instead:

15 hours ago, muffy said:

Site URL: https://www.muffyjdavis.com/2-weeks-2-destiny

Hi friends!

I have created a page for my site that needs a little formatting help. In my ideal world- each section would have a square around it on desktop. The square would be the same thickness on all sides. The squares would have more padding than they do now up top, and the squares would be the same size.

Here's the link:

https://www.muffyjdavis.com/2-weeks-2-destiny

Here's the code:

//box border//

@media only screen and (min-width:641px){

#block-yui_3_17_2_1_1645809882958_2713, #block-yui_3_17_2_1_1645810473216_7919, #block-yui_3_17_2_1_1645810473216_12628 {border-left: 1px solid brown}

#block-yui_3_17_2_1_1645809882958_2713, #block-yui_3_17_2_1_1645810473216_7919, #block-yui_3_17_2_1_1645810473216_12628 {border-right: 1px solid brown}

}

@media only screen and (min-width:641px){

#block-yui_3_17_2_1_1645809882958_2713, #block-yui_3_17_2_1_1645810473216_7919, #block-yui_3_17_2_1_1645810473216_12628{border-top: 1px solid brown}

#block-yui_3_17_2_1_1645809882958_2713, #block-yui_3_17_2_1_1645810473216_7919, #block-yui_3_17_2_1_1645810473216_12628{border-bottom: 1px solid brown}

Hi, try removing the spacer blocks in between the columns and the css you added. Try the one below instead. Let me know how it goes 🙂

.sqs-col-12 {
  .sqs-row {
    display:flex;
    align-items: flex-start;
    justify-content: space-evenly;
  }
}

.sqs-col-4 {
  border: 1px solid brown;
  border-radius: 30px;
  padding: 30px 20px;
  max-width: 25%;
}

PERFECT! Thank you 🙂