Space between blocks
Permalink
Hi,
Perhaps a very simple question: How do I get space between two blocks when the blocks are moved above each other on a mobile device?
I tried to set margins or padding but that doesn't give the good result.
I use a white background in the columns of the layout.
Any one who can help me ?
Perhaps a very simple question: How do I get space between two blocks when the blocks are moved above each other on a mobile device?
I tried to set margins or padding but that doesn't give the good result.
I use a white background in the columns of the layout.
Any one who can help me ?
Hi,
That should be helpful, but I gave the layout area a white background colour and when I add the spacer block the area becomes longer and between this layout area and the next block comes no space.
What to do ??
If I take away the background colour the problem is solved.
I hope I can make clear what the problem actually is ...
As an alternative I can give all blocks in the layout the same background colour but that is much more work ...
I hope someone can help me ?
That should be helpful, but I gave the layout area a white background colour and when I add the spacer block the area becomes longer and between this layout area and the next block comes no space.
What to do ??
If I take away the background colour the problem is solved.
I hope I can make clear what the problem actually is ...
As an alternative I can give all blocks in the layout the same background colour but that is much more work ...
I hope someone can help me ?
Sounds complicated. You got a link or a screenshot to help illustrate your problem?
I solved it in the way I described it. Bit more work but it is working out.
So what I do is giving every block the background colour I wish (white) and then put the 'spacer' beneath. Look to my test website front page. There you see several news items and they are 3 in a row. Beneath every item I putted a spacer. So now there comes space when one wants to see it on a mobile device.
My first idea was to give the whole layout area a white colour, but the spacer became part of that white colour area, so that was not working.
http://test.stefanvandesande.nl...
Thanks!!
So what I do is giving every block the background colour I wish (white) and then put the 'spacer' beneath. Look to my test website front page. There you see several news items and they are 3 in a row. Beneath every item I putted a spacer. So now there comes space when one wants to see it on a mobile device.
My first idea was to give the whole layout area a white colour, but the spacer became part of that white colour area, so that was not working.
http://test.stefanvandesande.nl...
Thanks!!
Perhaps you have also an idea how to solve a problem with the HTML5 Audio Player Block.
If you look on my front page of my test websitehttp://test.stefanvandesande.nl... you will see under the picture of the ON THE ROAD album the player .... it keeps always the same form and width. So not responsive. I have no idea how to fix that.
On the top I use Wimpy player, but actually I would like to use the C5 HTML5 player because then I can directly work from my file system in C5. The wimpy player needs extra html and specific mp3 pointing on my server. It works but a C5 block is nicer.
Any way, any idea ??
Thanks.
If you look on my front page of my test websitehttp://test.stefanvandesande.nl... you will see under the picture of the ON THE ROAD album the player .... it keeps always the same form and width. So not responsive. I have no idea how to fix that.
On the top I use Wimpy player, but actually I would like to use the C5 HTML5 player because then I can directly work from my file system in C5. The wimpy player needs extra html and specific mp3 pointing on my server. It works but a C5 block is nicer.
Any way, any idea ??
Thanks.
Hi, you could use some css to fix that:
There are some issues with the progress bar overlapping, so you can fix that using media query's for different screen sizes:
Hope this helps!
Grafoman
.bootstrap-player .jp-audio { width: 100% !important; }
There are some issues with the progress bar overlapping, so you can fix that using media query's for different screen sizes:
@media screen and (min-width: ...px) { .bootstrap-player .jp-audio .jp-type-single .jp-interface .jp-progress { width: x !important; }
Hope this helps!
Grafoman
Hi,
Actually I am an end front user, so you have to help me where I should bring in the CSS.
Do I have to put it down in my theme ?/
:-)
I mean, I am not a programmer
Thanks anyway
Actually I am an end front user, so you have to help me where I should bring in the CSS.
Do I have to put it down in my theme ?/
:-)
I mean, I am not a programmer
Thanks anyway
Ow okay, so you could use a HTML Block for this. Just add a html block somewhere on the page. Then paste this code in the html block.
Let me know if it works.
Grafoman
<style> .bootstrap-player .jp-audio { width: 100% !important; } .bootstrap-player .jp-audio .jp-type-single .jp-interface .jp-progress { width: 120px !important; } @media screen and (min-width: 400px) { .bootstrap-player .jp-audio .jp-type-single .jp-interface .jp-progress { width: 200px !important; } } @media screen and (min-width: 550px) { .bootstrap-player .jp-audio .jp-type-single .jp-interface .jp-progress { width: 300px !important;
Viewing 15 lines of 33 lines. View entire code block.
Let me know if it works.
Grafoman
Hi
Yes it is doing something , but not really satisfying.
The player block is now responding on the width which is standing in the html codes you gave me. But the player itself is not showing good . The bar which shows the length of the song is floating over the loudness bar .....
So I think the HTML5Player itself is not responsive.
By the way, my Wimpy player is now not visible any more :-)
Greetings,
I saw you come from Belgium, so we could write in our own language but for the forum we should keep it English.
anyway ...
Nice to meet you
Stefan
Yes it is doing something , but not really satisfying.
The player block is now responding on the width which is standing in the html codes you gave me. But the player itself is not showing good . The bar which shows the length of the song is floating over the loudness bar .....
So I think the HTML5Player itself is not responsive.
By the way, my Wimpy player is now not visible any more :-)
Greetings,
I saw you come from Belgium, so we could write in our own language but for the forum we should keep it English.
anyway ...
Nice to meet you
Stefan
Add this code to the html block (within the <style> tags)
I noticed you fiddled with the settings for the volume bar, its invisible, you can make that visible again.
We should keep writing in english :)
Grafoman
.bootstrap-player .jp-audio .jp-interface { width: 100% !important; }
I noticed you fiddled with the settings for the volume bar, its invisible, you can make that visible again.
We should keep writing in english :)
Grafoman
Hi,
Yes this is working good. Fantastic.
A little tiny thing is that when I use it on a mobile device in case of where there is only one block (by a lot of song texts will this happen) it stretch 100% from the left to the right side , no matter how broad the screen is.
Is there something like a maximum width possible
And now we talk about a player.
I can't find a C5 5.7 player which can play a play list.
I bought an add on player (audio library) but it was not for 5.7 and it is not functioning. So pity money ...
I bought another add on player but it is only for one song and I have to use always a picture
That's why I tried the wimpy player.
But I am very happy with this now.
I hope there comes a player for play lists, otherwise I switch perhaps in the future to wimpy.
Thanks !!
Yes this is working good. Fantastic.
A little tiny thing is that when I use it on a mobile device in case of where there is only one block (by a lot of song texts will this happen) it stretch 100% from the left to the right side , no matter how broad the screen is.
Is there something like a maximum width possible
And now we talk about a player.
I can't find a C5 5.7 player which can play a play list.
I bought an add on player (audio library) but it was not for 5.7 and it is not functioning. So pity money ...
I bought another add on player but it is only for one song and I have to use always a picture
That's why I tried the wimpy player.
But I am very happy with this now.
I hope there comes a player for play lists, otherwise I switch perhaps in the future to wimpy.
Thanks !!
Hi,
yes a max width is possible:
You can change the amount of pixels, i don't know how much it has to be max.
You can always ask for a refund on the support page for the add-on.
For the player:
Maybe you can check some external services? Like soundcloud? You can embed those players by simply pasting the code (in a html block).
https://soundcloud.com/pages/embed...
Hope this helps,
Grafoman
yes a max width is possible:
.bootstrap-player .jp-audio { max-width: 350px; }
You can change the amount of pixels, i don't know how much it has to be max.
You can always ask for a refund on the support page for the add-on.
For the player:
Maybe you can check some external services? Like soundcloud? You can embed those players by simply pasting the code (in a html block).
https://soundcloud.com/pages/embed...
Hope this helps,
Grafoman
I recommend this addon: it's a block that let's you create some vertical space between blocks. You can specify the number of pixels.
https://www.concrete5.org/marketplace/addons/spacer1...
Hope this helps,
Grafoman