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:
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 :(
 
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?
 
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.
 
You must log in or register to reply here.
Back
Top Bottom