Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • June 12, 2025 at 4:36 pm #1485373
    Schmidtgrafisk

    Hey Enfold
    I got 3 footer widgets that I like to center.
    I’d like to keep the text left aligned.

    Thanks

    June 12, 2025 at 11:12 pm #1485386
    Mike

    Hey Alan,
    When I check the footer on your site, I see three 1/3 columns which are centered, see image 1 below.
    Since each column is 1/3 and the content is minimal there is a lot of empty space, see image 2 below.
    I assume that you want to make the two columns with text smaller so they are closer together and the center all of them.
    Is the correct?

    Best regards,
    Mike

    June 13, 2025 at 11:26 am #1485419
    Schmidtgrafisk

    Hey Mark

    You’r right, I want the columns with text to be smaller.

    Thanks ;)

    June 13, 2025 at 12:58 pm #1485421
    Guenni007

    try:

    @media only screen and (min-width: 768px) {
  #footer .container {
    display: grid;
    gap: 20px;  
    grid-template-columns: repeat(3, 1fr);
    justify-content: space-between;
  }
  #footer .container .flex_column {
    width: unset;
    padding: 0;
    justify-self:center;
  }
  #footer .container .flex_column:nth-child(1) {
    justify-self: left;
  }
}

    if you like to have the first column to be centered in its container too ( the text preserves align left ) – then erase the last rule for first child column

    June 13, 2025 at 1:13 pm #1485422
    Guenni007

    or if you like to have it for responsive case too ( centered )

    replace with:

    #footer .container {
  display: grid;
  gap: 20px;  
  grid-template-columns: repeat(3, 1fr);
  justify-content: space-between;
}

#footer .container .flex_column {
  width: unset;
  padding: 0;
  justify-self: center;
}

#footer .container .flex_column:nth-child(1) {
  justify-self: left;
}

@media only screen and (max-width: 767px) {
  #footer .container {
    gap: 0;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    justify-items: center;
  }
  #footer .container .flex_column {
    width: unset !important;
    margin: 0;
    padding: 0;
    justify-self: center !important; 
  }
}
    June 13, 2025 at 1:33 pm #1485424
    Schmidtgrafisk

    That’s brilliant, thanks ;)

    June 13, 2025 at 1:36 pm #1485425
    Guenni007

    so it is not your own page? Its for a different page?

    June 13, 2025 at 1:58 pm #1485426
    Schmidtgrafisk

    This is for a client page, I’v made quite a few web designs for Clients using Enfold ;)

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.