Aligning images in centre without using spacers (desktop)

Site URL: https://accordion-jaguar-tztz.squarespace.com/config/

Hey!

How do you put images in the centre of a page, on the desktop version? Mobile version automatically fits to screen, but desktop seems to only place the uploaded image to the left (see screenshot below).

Many thanks for your help!

Tomm

Here are the steps to achieve what you want:

Remove any spacers on the left & right side of the image. 

Add this to Design > Custom CSS:

#block-id{
  margin-left: auto;
  margin-right: auto;
  width: 25%;
}

Replace "#block-id" with the image's block-id and adjust the width command to get the size that you want.

If you'd like further help, we'd need you to set up a password for the site and share it here so we could help you better.

Hi, thanks for your help instructions!

My password is: ost

1. I tried out the coding you suggested, it looks ok on desktop, and also played with the left and right margins successfully, but on cellphone layout it doesn't work because it pushes the logo too far to the right of the screen.

Is there any reason it does this?

2. Another question I would like to ask; I have a Spotify playlist embedded, as there are only 4 tracks, the playlist box has a lot of empty space at the bottom - is there anyway to use custom css to reduce its height?

Below is a picture of that playlist.

It's located in PROJECTS > TV DRAMAS > scroll down to bottom of page to "KILL FOR JOY" section...

Many thanks again!

On 5/4/2022 at 8:03 AM, tommmmusic said:

Hi, thanks for your help instructions!

My password is: ost

1. I tried out the coding you suggested, it looks ok on desktop, and also played with the left and right margins successfully, but on cellphone layout it doesn't work because it pushes the logo too far to the right of the screen.

Is there any reason it does this?

2. Another question I would like to ask; I have a Spotify playlist embedded, as there are only 4 tracks, the playlist box has a lot of empty space at the bottom - is there anyway to use custom css to reduce its height?

Below is a picture of that playlist.

It's located in PROJECTS > TV DRAMAS > scroll down to bottom of page to "KILL FOR JOY" section...

Many thanks again!

#1. Add to Design > Custom CSS

@media screen and (min-width:992px) {
div#block-yui_3_17_2_1_1651494198189_7055+.row>.span-6:first-child {
    margin-left: 25%;
}
}

#2. It looks like you solved?

Hi! #2 I didn't manage to solve, I couldn't find a way to reduce the height of the Spotify playlist above, is there anyway to do this?

Thanks again!

Tomm

On 5/11/2022 at 7:32 PM, tommmmusic said:

Hi! #2 I didn't manage to solve, I couldn't find a way to reduce the height of the Spotify playlist above, is there anyway to do this?

Thanks again!

Tomm

Actually it is fine on my end. Windows/Chrome. Which device/browser/screen size do you use?

Hey, I'm using both Chrome on Macbook pro, 13"

- When you look at the "TV drama" page, do all the Spotify playlists appear, no gaps or anything missing on the page? 

Could you take a screenshot of what you see?

I zoomed out in the browser and took screenshots of what it looks like on mine, is it the same for you?

Many thanks!

Tomm

I use Windows/Chrome

You mean gap at the end of playlist?

Hey Tuanphan,

Just wondering how to fix this empty gap at the bottom of Spotify playlists...

I'm not sure whether the problem is on Spotify's end or Squarespace:

Problem 1: Even if you try embedding a "compact" playlist using Spotify's custom code, when you put that into Squarespace, it doesn't work. This is the screen from Spotify;

Problem 2: Unless the playlist has a lot of tracks, and has scrolling function, the playlist seems to have a default minimum height, so even if you have two tracks, it will have a huge gap at the bottom.

Problem 3: I googled this, although this is on a Wordpress forum, someone had the same problem;

& their solution was this CSS:

However, I tried copying that custom CSS into my Squarespace, it doesn't seem to change anything. Can you suggest any similar coding workaround, but for Squarespace - a max-height custom coding? How about something like this... "change height of spotify embed..."

Thanks so much for your patience and help!

Tomm

On 5/19/2022 at 7:10 AM, tommmmusic said:

Hey Tuanphan,

Just wondering how to fix this empty gap at the bottom of Spotify playlists...

I'm not sure whether the problem is on Spotify's end or Squarespace:

Problem 1: Even if you try embedding a "compact" playlist using Spotify's custom code, when you put that into Squarespace, it doesn't work. This is the screen from Spotify;

Problem 2: Unless the playlist has a lot of tracks, and has scrolling function, the playlist seems to have a default minimum height, so even if you have two tracks, it will have a huge gap at the bottom.

Problem 3: I googled this, although this is on a Wordpress forum, someone had the same problem;

& their solution was this CSS:

However, I tried copying that custom CSS into my Squarespace, it doesn't seem to change anything. Can you suggest any similar coding workaround, but for Squarespace - a max-height custom coding? How about something like this... "change height of spotify embed..."

Thanks so much for your patience and help!

Tomm

Use this CSS

.embed-block-wrapper.embed-block-provider-Spotify iframe {
    max-height: 300px !important;
    overflow: auto !important;
}

2 hours ago, tuanphan said:

Use this CSS

.embed-block-wrapper.embed-block-provider-Spotify iframe {
    max-height: 300px !important;
    overflow: auto !important;
}

 

Hey, I tried the code, but it's the same problem - it reduces the size of the Spotify player, but then the block forces it to have a big gap between it and the text block below. Here are two examples;

/

Do you have any ideas how to get rid of the block? 

This is the code I used for Bandcamp player, and it worked, anything like this?

Quote

<iframe style="border: 0; width: 100%; height: 340px;" src="https://bandcamp.com/EmbeddedPlayer/album=519839169/size=large/bgcol=ffffff/linkcol=0687f5/artwork=none/transparent=true/" seamless><a href="https://tommmatthews.bandcamp.com/album/speedy-recovery-soundtrack-2019">Speedy Recovery Soundtrack (2019) by Tomm Matthews</a></iframe>

Many thanks again!

Tomm