(Squarespace) List Simple: Text - Image side by side on Desktop

To move image on List Simple to left on Desktop, you can follow these.

First, you need to find List Section ID.

In my example, it is: section[data-section-id=“67aaa4d4ea15fa520e6ba88d”]

Next, use this CSS code.
If code doesn’t work, you can comment below, message or email me.

@media screen and (min-width:768px) {
  [data-section-id="67aaa4d4ea15fa520e6ba88d"] {
li.list-item {
    display: flex !important;
    flex-direction: row !important;
}
.list-item-media {
    margin-bottom: 0 !important;
    width: 60% !important;
}
.list-item-content {
    display: flex;
    align-items: center;
    width: 40%;
    justify-content: center;
}
h2.list-item-content__title {
    max-width: unset !important;
}}}

To adjust Image – Text width, you can adjust these lines.

1 Like