Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Aligning images in centre without using spacers (desktop)


Question

  • Answers 10
  • Created
  • Last Reply

Top Posters For This Question

10 answers to this question

Recommended Posts

  • 0
Posted (edited)

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.

Edited by shiDMV
Link to comment
  • 0

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!

spotify height.jpeg

Link to comment
  • 0
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!

spotify height.jpeg

#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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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?image.thumb.png.dd16dfb6f2cbcad115b6db0e12033b14.png

Thanks again!

Tomm

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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?

image.thumb.png.8b6d470f39dbf8980f461df42accc1d6.png

image.thumb.png.2ce8c025828ad8eaa141db852609223f.png

image.thumb.png.448a0ad7b14bf68c5ee286af6c646b20.png

image.png.366070734bc622810652175d76b2b8d3.png

Many thanks!

Tomm

Link to comment
  • 0

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;

image.thumb.png.611dbcbae5a257eee7fc46fa30c5b8e1.png

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;

image.thumb.png.0fcdc7fcdcdc6580795deeb45daa56b9.png

& their solution was this CSS:

image.thumb.png.240907ad378836a4a711786f87d1cc4c.png

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..."

image.thumb.png.5908f51b2b7c6910602edaec0b378248.png

Thanks so much for your patience and help!

Tomm

Link to comment
  • 0
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;

image.thumb.png.611dbcbae5a257eee7fc46fa30c5b8e1.png

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;

image.thumb.png.0fcdc7fcdcdc6580795deeb45daa56b9.png

& their solution was this CSS:

image.thumb.png.240907ad378836a4a711786f87d1cc4c.png

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..."

image.thumb.png.5908f51b2b7c6910602edaec0b378248.png

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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;

image.thumb.png.3300a4680f0d6c037f9065e432997ad9.png

/

image.thumb.png.5672a7fccc8dcb1b3b1024d617495c76.png

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

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...