Soundcloud player doesn't take up full width..

  • Resolved quicknight

    (@quicknight)


    10 years, 10 months ago

    Hi Guys!

    I’ve been working on my site for quite a while now but I’ve run into a problem. I’m hoping you can help me with it, the website is http://www.quicknight.co.nf

    I’ve made the website such that I make the most out of the front page template of this theme. I’ve used the “Title” section as a landing image and the “Page” section for my biography and social media widgets.

    What I want now is to embed a SoundCloud playlist in the “Widgets” section of the front page such that it covers the full width. You’ll see my problem when you scroll down to the “All the awesome music by Quicknight” section. Don’t bother using the Navigation menu, I still have to fix that, just scroll down until you find a rather squashed music player on the left.

    I want it to take up the entire width of the page. Any help will be greatly appreciated.
    Thanks!

Viewing 9 replies - 1 through 9 (of 9 total)
  • Moderator Kathryn Presner

    (@zoonini)

    10 years, 10 months ago

    How about this:

    #slide-4 .widget {
    width: 90%;
}

    Screenshot: https://cloudup.com/c1PJBDiHhXJ

    Don’t edit the theme files directly, otherwise your changes will be overwritten whenever the theme is updated.

    Since you’re already using Jetpack, an easy way to add custom CSS is to activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

    Thread Starter quicknight

    (@quicknight)

    10 years, 10 months ago

    Yes! I want to make exactly as shown in the screenshot. Thanks for the code. I’ll try it when I get home.

    Thread Starter quicknight

    (@quicknight)

    10 years, 10 months ago

    As for Jetpack..that doesn’t work for me. I’m unable to link to my WordPress.com account for some reason. Thanks for warning me about the overwrite, I hadn’t even given it a thought. I’ll try making a child theme if possible.

    Thread Starter quicknight

    (@quicknight)

    10 years, 10 months ago

    Since this is about width too..I’ll post it here as well.

    Is it possible to move my social media widgets a bit to the left so that I can fit another one there?

    Currently it goes Facebook > Twitter > Google+. I want to add my instagram widget as well, but it looks too squashed. That part of the page is built using SiteOrigins Page Builder. Any help?

    Moderator Kathryn Presner

    (@zoonini)

    10 years, 10 months ago

    Thanks for the code. I’ll try it when I get home.

    You’re welcome, let me know how it goes.

    As for Jetpack..that doesn’t work for me. I’m unable to link to my WordPress.com account for some reason.

    Hmm, you don’t need to connect Jetpack to a WordPress.com account in order to use the Custom CSS module (not all modules need a connection) and your site already appears to be running Jetpack, judging from your page source), so that’s why I suggested it.

    But you could also use a a standalone custom CSS plugin, if you prefer. A child theme should work fine too.

    Moderator Kathryn Presner

    (@zoonini)

    10 years, 10 months ago

    Is it possible to move my social media widgets a bit to the left so that I can fit another one there?

    Currently it goes Facebook > Twitter > Google+. I want to add my instagram widget as well, but it looks too squashed. That part of the page is built using SiteOrigins Page Builder. Any help?

    I’m not familiar with that plugin and what mechanisms it provides for adjusting spacing. You might like to ask in the plugin’s forum, so you don’t start mixing custom CSS external to the plugin with the plugin’s own techniques. I think it would be simplest to stick with one method or the other!

    Thread Starter quicknight

    (@quicknight)

    10 years, 10 months ago

    Yay! I fixed the SoundCloud widget problem!

    I’m currently having a look at custom CSS plugins. Seems like I should’ve used them earlier as well..I’ve made quite a few changes to the original theme files.

    Thread Starter quicknight

    (@quicknight)

    10 years, 10 months ago

    I found a work around to fit 4 Social Media widgets there.
    I simply added another row in the PageBuilder plugin.

    LoL, Why didn’t I think of that before?!? Haha.

    Anyways, Thank you so much for your help, Kathryn!

    Moderator Kathryn Presner

    (@zoonini)

    10 years, 10 months ago

    Yay! I fixed the SoundCloud widget problem!

    Awesome!

    I’m currently having a look at custom CSS plugins. Seems like I should’ve used them earlier as well..I’ve made quite a few changes to the original theme files.

    I’d definitely recommend you move out all your CSS changes into the custom CSS plugin’s editor. If you don’t do that, every time you update the theme when a new version is released, you’re going to lose all your tweaks.

    If you made any changes in the theme files other than CSS, then making a child theme is the route to go. A child theme will also protect your theme tweaks from being overwritten on each theme update. Here are some guides in case you haven’t made one before:

    http://codex.wordpress.org/Child_Themes
    http://op111.net/53/
    http://vimeo.com/39023468

    Glad you solved the social media widgets issue too!

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Soundcloud player doesn't take up full width..’ is closed to new replies.