Jump to content

Too much dead space on Blog Post

Recommended Posts

Site URL: https://www.at17c.com/playground/concrete-floor-vol-1

Hi. 
I am currently creating a blog post in which I am embedding a spotify code to display a playlist. I want this placed on top of an image. Since Fluid Engine is not yet implemented for Blog Posts I have had to use CSS to do this. I have managed to (on desktop) to place the embedding on top of the image, but now I have way too much dead space underneath the image (because the embedding is still technically placed there, so that doesn't work. 
How do I get the Playlist on top without creating dead space?
I have attached a screenshot of how I would like it to be (here the embedding also has some padding). Currently I have just placed the playlist above the image. 
Password is "basement". 
TIA. 

Screenshot 2022-10-14 at 15.24.42.png

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

On 10/14/2022 at 8:30 PM, at17c said:

Site URL: https://www.at17c.com/playground/concrete-floor-vol-1

Hi. 
I am currently creating a blog post in which I am embedding a spotify code to display a playlist. I want this placed on top of an image. Since Fluid Engine is not yet implemented for Blog Posts I have had to use CSS to do this. I have managed to (on desktop) to place the embedding on top of the image, but now I have way too much dead space underneath the image (because the embedding is still technically placed there, so that doesn't work. 
How do I get the Playlist on top without creating dead space?
I have attached a screenshot of how I would like it to be (here the embedding also has some padding). Currently I have just placed the playlist above the image. 
Password is "basement". 
TIA. 

Screenshot 2022-10-14 at 15.24.42.png

My idea is using Css code to set the background:

#block-yui_3_17_2_1_1665739214059_9551 + .row {
  background-image: url('https://images.squarespace-cdn.com/content/v1/60af8b51412c937275f95f40/1665744963961-EQVUGV3WIZSR8I9VMLSB/IMG_4424-min.jpeg?format=1000w');
  padding-top: 20px;
  background-repeat: no-repeat;
  background-size: cover;
}

What do you think about it?

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing

image.thumb.png.f098a1c0d9d04e9f34f08d8b75d78c3f.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
20 hours ago, bangank36 said:

My idea is using Css code to set the background:

#block-yui_3_17_2_1_1665739214059_9551 + .row {
  background-image: url('https://images.squarespace-cdn.com/content/v1/60af8b51412c937275f95f40/1665744963961-EQVUGV3WIZSR8I9VMLSB/IMG_4424-min.jpeg?format=1000w');
  padding-top: 20px;
  background-repeat: no-repeat;
  background-size: cover;;
}

What do you think about it?

Thanks a lot! 
It's close to being the way I wont it, but what happens now is that the (background)image is getting cropped. 
The image should be 1:1 aspect, and the Spotify Embed center on top. 
Also now it messes up mobile view (mobile view) doesnt need the the background image - it could just be Spotify Embed above image. 
Any solution?
TIA
Screenshot is the result the code makes. 

Screenshot 2022-10-15 at 12.25.50.png

Link to comment
  • 2 weeks later...

You can use the media query to set my customized code on desktop only

@media only screen and (min-width: 768px) {
  /*style for desktop and table display*/
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.