Bindery Theme: Arranging Spotify Links Neatly

thedarlingadventure · Member · Mar 2, 2017 at 10:12 am
Copy link

Add topic to favorites
Hey again,

Struggling a bit to achieve the functionality I’m looking for…

Looking to embed spotify links on the blindalleycat.com/music page, and hoping to have the page look clean, similar to the front page grid, except with the images that are linked from spotify. Is there an easy way to make this happen?

Many many thanks,
Marina

The blog I need help with is: (visible only to logged in users)
staff-loquaciousloon · Staff · Mar 2, 2017 at 10:33 pm
Copy link
I see three embeds on your music page, try this CSS (targets that page specifically)
```
.page-id-394 iframe {
	float: left;
}
```
That should let them float into a two column grid.

You could also add this to make that page full screen like your homepage:
```
.page-id-394 .layout-entry {
    max-width: 100%;
}
.page-id-394 .entry-main .layout-span {
    padding-left: 0;
    padding-right: 0;
}
```
…but you’ll likely have issues with the embeds being the right size on different screens, so I’d leave that last bit off. Wanted to share it just in case. :)
thedarlingadventure · Member · Mar 3, 2017 at 2:15 am
Copy link
staff-loquaciousloon thank you so much! Any chance they could be in a 4 column grid? There’s going to be heaps more embeds added to it, and I think that might look the best.

You’re great!
staff-loquaciousloon · Staff · Mar 3, 2017 at 3:34 pm
Copy link
You’re welcome!
```
.post-394 .entry-main .layout-entry,
.post-394 .layout-entry-content {
    max-width: 1200px;
}
```
Should make the content area wide enough to allow 4 across – assuming the screen is wide enough, of course.
thedarlingadventure · Member · Mar 8, 2017 at 5:55 am
Copy link
Sweet! Thank you so much!
staff-loquaciousloon · Staff · Mar 8, 2017 at 4:54 pm
Copy link
You’re welcome!
thedarlingadventure · Member · Apr 13, 2017 at 9:43 am
Copy link
Hey again,

I was wondering if it’s possible to add some padding between the spotify albums to make it look a bit cleaner/clearer. Nothing huge, just a tad of white space to break it up a bit.

Many thanks!
otpidusprime · Member · Apr 13, 2017 at 10:44 am
Copy link
Hello @thedarlingadventure,
Try this CSS code to add padding between the spotify albums
```
.entry-content > p > iframe {
    padding: 10px;   //adjust this value according to you need.
}
```
Or this just select the iframe tag:
```
iframe {
    padding: 10px;   //adjust this value according to you need.
}
```
Hope this helps :)
otpidusprime · Member · Apr 13, 2017 at 10:44 am
Copy link
CORRECTION:
Or just select the iframe tag:*
thedarlingadventure · Member · Apr 13, 2017 at 10:33 pm
Copy link
Ah perfect! Thank you :)
otpidusprime · Member · Apr 14, 2017 at 8:08 am
Copy link
@thedarlingadventure, you’re welcome :)

No items found.