Couple of HTML, CSS or Bootstrap Questions

AndyCr15

AndyCr15

AndyCr15

Soldato
Joined
28 Apr 2011
Posts
15,211
Location
Barnet, London
Hi guys, I'm sure it's quit simple, but I'm struggling to keep text aligned where it should be.

Have a look here - http://androidandy.uk/podcasts.php

It looks okay (maybe) until you start squashing your browser in. (Make it thinner)

This is the code in the page -

Code: 
<div class="col-md-4 col-sm-3">
                        <div id="cardpodcast" class="thumbnail">
                            <div class="caption">
                                <h2>
                                    <?php echo $episode->title ?>
                                </h2>
                                <p>
                                    <div id="poddescription">
                                        <?php echo $episode->description ?>
                                    </div>
                                </p>
                            </div>
                            <div class="podmedia">
                                <p>
                                    <font size="-2"><strong>
                                        <?php echo $episode->pubDate ?>
                                    </strong></font>
                                </p>
                                <audio controls>
                                    <source src="<?php
                                                    $mp3 = $url.'episode'.($x-$i);
                                                    echo $mp3;
                                                 ?>.mp3" type="audio/mpeg">
                                        Your browser does not support the audio element.
                                </audio>
                            </div>
                        </div>
                    </div>

The CSS looks like this -

Code: 
#cardpodcast {

    border: 1px;
    background-color: #eff2f7;
    border-width: 2px;
    border-color: black;
    border-radius: 5em 0em 5em 0em;
    padding: 25px;
    margin-bottom: 25px;
    vertical-align: middle;
    box-shadow: 5px 5px 3px grey;
    height: 350px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.podmedia {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 40px;
}

#poddescription {
    overflow: hidden;
    text-overflow: ellipsis;
}

What do I need to do to stop the description text overlapping the date and media? What have I done wrong with the CSS that the date leaps out to the left as I shrink the page?

Thanks for any help :) (Second question coming in post two)

**EDIT** Actually, I've kind of made the other question the same as the first now (see Android page on my site)
 
Last edited:
I'm sure a front end member will be along shortly to give you a perfect answer but from my time dabbling in the dark art of CSS..........I think this is a breakpoint issue.

Happy Googling :)
 
Since the audio player is a fixed size, plus you have some padding, margin etc. between it and the div, you can only fit a limited number on the page for a given width.

For example, let's say the audio player is 300px and you have 33px of padding/margin to make up the div. With the viewport/page at 1920(x1080)px you could have 5 divs across the page (333 x 5 = 1665). Resize to 1280(x720)px and you can only get 3 divs....you get the idea.

So I would create a couple of extra breakpoints to change the column allocation to maintain the minimum width of each div AND prevent the divs crushing the text.

Code: 
.podmedia {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 40px;
}

^^ This doesn't fix the issue but popping out to the right seems less weird than popping out to the left ;)

Again I'm no expert, it's been a while since I've touched bootstrap so the real answer could be something completely different.
 
Okay, thanks for the pointers :)

Given I can change the media player with -

Code: 
<audio controls style="width: 200px;">

I thought it might adjust with the changing div when I set it to width="100%" but it didn't :(
 
I'll see if I can get some time to have a go at this later, but a couple of things spring to mind on a quick look at the code.

1. You have multiple references to id="cardpodcast" on the page. If you are wanting multiple references - change "id" to "class" and then also change the "#cardpodcast" in the CSS file to ".cardpodcast". Id can only be referenced once per page
2. Same as above, but with id="poddescription" - change to class & update CSS
3. You are using Bootstrap column references, but are not using rows which can cause some problems. Just add a <div class="row"> before your column reference and a closing </div> where you want the row to end
4. In your style sheet - in the updated .cardpodcast section (see point 1), change the height reference to auto
5. You are using an alpha version of Bootstrap 4 - the final release is now out (but it breaks your layout some more - namely the navbar)
 
Last edited:
AndyCr15 said:
I thought it might adjust with the changing div when I set it to width="100%" but it didn't :(
Click to expand...

That's because the audio controls are inside the .podmedia div so will be fitting to 100% of the size of that div (which is positioned absolute so size doesnt change.)

I'd change:
.podmedia {
position: absolute;
bottom: 0;
left: 0;
padding: 40px;
}

to just:

.podmedia {
width:80%;
}
 
Those are some great tips. Thanks guys. It looks more presentable now.

I'm not sure I'm ready to update Bootstrap and break things yet though! Mind you, I want to improve the navbar, like make it drop certain bits based on width, so will attack it at some point.

A small thing, with Bootstrap there's a point it drops it to two items per column, but now I have the row ending after 3 items, it has two items, new row, then the remaining item. Is there anything I can do with that?
 
Dont put them into pre-defined rows.
Have all of them at the same level and the number on each row will be defined by the width of each one.

You have
@media (min-width: 768px)
.col-md-4{
width: 33.333333%;
}
As the largest size. So each one is a third the width of the container so there will be 3 per row.

As the screen size reduces, the next breakpoint is:
@media (min-width: 544px)
.col-md-4{
width: 50%;
}
So you'll have 2 items per row.

And finally, under that size they default to full width so 1 per row.

If it was me, I'd add a 4-colums-per-row size on larger screens:
@media (min-width: 1024px)
.col-md-4{
width: 25%;
}
 
Using the Bootstrap card feature might work better for you - got it working here using the following code. (Works with the version you are currently using as well).

(This is the code for the first line of 3 podcasts - duplicate everything except for the opening <div class="container" line and it's closing tag to add a second row....)

Code: 
        <div class="container" style="margin-top:70px">
            <div class="row">
                <div class="col">
                    <div class="card-deck">
                        <div class="card">
                            <div class="card-body">
                                <h2 class="card-title">6 - One Month On</h2>
                                <p class="card-text">
                                    The new Samsung Galaxy S9 is on it's way and it's phone plan upgrade time for me. Broken tech can't be reviewed. Altered
                                    Carbon is my TV of the month and I went to see Black Panther last night!
                                </p>

                                <audio controls class="audiocontrols">
                                    <source src="http://podcast.androidandy.uk/episode6.mp3" type="audio/mpeg"> Your browser does not support the audio element.
                                </audio>

                                <p class="card-text">
                                    <small class="text-muted">Thu, 18 Feb 2018 12:30:00 GMT</small>
                                </p>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-body">
                                <h2 class="card-title">5 - It's my Birthday!!!</h2>
                                <p class="card-text">
                                    I got a new keyboard for my birthday, set up the Raspberry Pi3 and am still playing PUBG. YouTube also brought in new rules
                                    removing monetisation from many channels.
                                </p>

                                <audio controls class="audiocontrols">
                                    <source src="http://podcast.androidandy.uk/episode5.mp3" type="audio/mpeg"> Your browser does not support the audio element.
                                </audio>

                                <p class="card-text">
                                    <small class="text-muted">Thu, 18 Jan 2018 12:30:00 GMT</small>
                                </p>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-body">
                                <h2 class="card-title">4 - Happy New Year!</h2>
                                <p class="card-text">
                                    I take a look back at my YouTube channel over the past year and talk through my experience in learning to code in 2017.
                                </p>

                                <audio controls class="audiocontrols">
                                    <source src="http://podcast.androidandy.uk/episode4.mp3" type="audio/mpeg"> Your browser does not support the audio element.
                                </audio>

                                <p class="card-text">
                                    <small class="text-muted">Mon, 1 Jan 2018 11:30:00 GMT</small>
                                </p>
                            </div>
                        </div>
                    </div> <!-- /carddeck -->
                </div> <!-- /col -->
            </div> <!-- /row -->
        </div> <!-- /container -->

And then just add these styles to your CSS....

Code: 
/* Styles for Bootrap cards & audio controls */
.card {
    background-color: #eff2f7;
    box-shadow: 5px 5px 3px grey;
    border-radius: 5em 0em 5em 0em;
}

.card-body {
    padding: 25px;
}

.audiocontrols {
    width: 100%;
}

The advantage to this (apart from simplifying the code), is that all the cards maintain the same height.
 
Last edited:
touch said:
...
So you'll have 2 items per row
...
Click to expand...

This works giving me the two wide columns when I get to a thin enough screen, but now I have to go back to fixed height, otherwise I get a bit of a jumbled mess, which is kind of back to where I started...

H4xaXS5h.png.jpg

When the text is too much, it pushes the media controls of the bottom.
 
touch said:
Dont put them into pre-defined rows.
Have all of them at the same level and the number on each row will be defined by the width of each one.

You have
@media (min-width: 768px)
.col-md-4{
width: 33.333333%;
}
As the largest size. So each one is a third the width of the container so there will be 3 per row.

As the screen size reduces, the next breakpoint is:
@media (min-width: 544px)
.col-md-4{
width: 50%;
}
So you'll have 2 items per row.

And finally, under that size they default to full width so 1 per row.

If it was me, I'd add a 4-colums-per-row size on larger screens:
@media (min-width: 1024px)
.col-md-4{
width: 25%;
}
Click to expand...

AAAA NONONO DON'T OVERWRITE BOOTSTRAP'S CLASS - (logic is sound, just please do this by adding a new class rather than overriding the framework's default - otherwise you'll break bits elsewhere on the site too).

An alternative way of doing this is to use flexbox, keeping the HTML purely semantic. Has a couple of advantages (flex-wrap and flex-grow just to name a few). Really good tutorial on display: flex; here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 
Varwen said:
AAAA NONONO DON'T OVERWRITE BOOTSTRAP'S CLASS - (logic is sound, just please do this by adding a new class rather than overriding the framework's default - otherwise you'll break bits elsewhere on the site too).
Click to expand...

I just followed the same format because it's already been hacked about with. You're right though, better to add another class than use the code I suggested.
 
You must log in or register to reply here.
Back
Top Bottom