Website Coding Issue

Kristo

Kristo

Website & Software Developer
Feb 5, 2015
269
69
Hey guys,
I am looking for some help as I am struggling to get around this. In the below screenshot you see 5 images. 4 of the images are on one line and the 5th image is on the bottom line. This is because when I add the code for the 5th image to the top line it adds it in a weird place and I cannot move it. I am looking for some help in getting all 5 of the images onto the same line. The code can be found below. CSS and HTML seperate pastebins.

0vb6Q


If the image cannot be seen then please use this link -
You must be registered for see links


Paste Bin
HTML (This is all the code associated with the specific area) -
You must be registered for see links

CSS (This is all the code associated with the specific area) -
You must be registered for see links


Thanks again!
 
Sort by date Sort by votes
RastaLulz

RastaLulz

fight teh power
Staff member
May 3, 2010
3,926
3,921
I'd recommend posting a
You must be registered for see links
or
You must be registered for see links
of what you currently have. This will make it much easier for others to see what the issue is, and help you.
 
Upvote 0 Downvote
Kristo

Kristo

Website & Software Developer
Feb 5, 2015
269
69
It does not show up as well as I would need it to... I mean from the code that I have provided you can clearly see the divs and the code associated.. All I need to do is find away of getting all 5 images onto the same line.
 
Upvote 0 Downvote
MayoMayn

MayoMayn

BestDev
Oct 18, 2016
1,423
683
Kristovision said:
It does not show up as well as I would need it to... I mean from the code that I have provided you can clearly see the divs and the code associated.. All I need to do is find away of getting all 5 images onto the same line.
Click to expand...
Have you tried with responsive? Use the @media property, and then make the div and height of the image to whatever fits on the current viewport
 
Upvote 0 Downvote
Weasel

Weasel

👄 I'd intercept me
Nov 25, 2011
4,132
2,456
You're using col-md-3. Bootstrap only has 12 columns. So when you add the fifth one, the total sum of columns would be 15. Change this to col-md-2, and add a offset-1 on the first div in the row to make them aligned in the center.
 
Upvote 0 Downvote
Jaden

Jaden

not so active
Aug 24, 2014
886
263
HTML: 
            <!-- Start Team Member Section -->
    <section id="team-section">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="section-title text-center wow fadeInDown" data-wow-duration="2s" data-wow-delay="50ms">
                        <h2>Timetables</h2>
                        <p>Our Official Routes<br> Click an image below to view our timetables</p>
                    </div>                       
                </div>
            </div>
            <div class="row">
                <div class="col-md-3 wow fadeInLeft" data-wow-duration="2s" data-wow-delay="300ms">
                    <div class="team-member">
                        <img src="asset/images/team/team-1.jpg" class="img-responsive" alt="" style="width:270px;height:270px;">
                        <div class="team-details">
                            <h4>Durness</h4>
                            <p>Every Tuesday</p>
                        </div>
                    </div>
                </div><!-- /.col-md-3 -->
                <div class="col-md-3 wow fadeInLeft" data-wow-duration="2s" data-wow-delay="600ms">
                    <div class="team-member">
                        <img src="asset/images/team/team-2.jpg" class="img-responsive" alt="" style="width:270px;height:270px;">
                        <div class="team-details">
                            <h4>Lairg</h4>
                            <p>Every Wednesday</p>
                        </div>
                    </div>
                </div><!-- /.col-md-3 -->
                <div class="col-md-3 wow fadeInLeft" data-wow-duration="2s" data-wow-delay="900ms">
                    <div class="team-member">
                        <img src="asset/images/team/team-3.jpg" class="img-responsive" alt="" style="width:270px;height:270px;">
                        <div class="team-details">
                            <h4>Skerray</h4>
                            <p>Every Thursday</p>
                        </div>
                    </div>
                </div><!-- /.col-md-3 -->
                <div class="col-md-3 wow fadeInLeft" data-wow-duration="2s" data-wow-delay="1200ms">
                    <div class="team-member">
                        <img src="asset/images/team/team-4.jpg" class="img-responsive" alt="" style="width:270px;height:270px;">
                        <div class="team-details">
                            <h4>Melness</h4>
                            <p>Every Friday</p>
                        </div>
                    </div>
                </div><!-- /.col-md-3 -->
                <div class="col-md-3 wow fadeInLeft" data-wow-duration="2s" data-wow-delay="300ms">
                    <div class="team-member">
                        <img src="asset/images/team/team-1.jpg" class="img-responsive" alt="" style="width:270px;height:270px;">
                        <div class="team-details">
                            <h4>Inverness</h4>
                            <p>Last Saturday</p>
                        </div>
                    </div>
                </div><!-- /.col-md-3 -->
            </div>
            <br>
        </div>
    </section>
    <!-- End Team Member Section -->
 
Upvote 0 Downvote
Kristo

Kristo

Website & Software Developer
Feb 5, 2015
269
69
@The_Unholy Like so?
HTML: 
                       <!-- Start Team Member Section -->
    <section id="team-section">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="section-title text-center wow fadeInDown" data-wow-duration="2s" data-wow-delay="50ms">
                        <h2>Timetables</h2>
                        <p>Our Official Routes<br> Click an image below to view our timetables</p>
                    </div>                       
                </div>
            </div>
            <div class="row">
                <div class="col-md-2 wow fadeInLeft" data-wow-duration="2s" data-wow-delay="300ms">
                    <div class="team-member">
                        <img src="asset/images/team/team-1.jpg" class="img-responsive" alt="" style="width:270px;height:270px;">
                        <div class="team-details">
                            <h4>Durness</h4>
                            <p>Every Tuesday</p>
                        </div>
                    </div>
                </div><!-- /.col-md-3 -->
                <div class="col-md-2  col-md-offset-1 wow fadeInLeft" data-wow-duration="2s" data-wow-delay="600ms">
                    <div class="team-member">
                        <img src="asset/images/team/team-2.jpg" class="img-responsive" alt="" style="width:270px;height:270px;">
                        <div class="team-details">
                            <h4>Lairg</h4>
                            <p>Every Wednesday</p>
                        </div>
                    </div>
                </div><!-- /.col-md-3 -->
                <div class="col-md-2 col-md-offset-1 wow fadeInLeft" data-wow-duration="2s" data-wow-delay="900ms">
                    <div class="team-member">
                        <img src="asset/images/team/team-3.jpg" class="img-responsive" alt="" style="width:270px;height:270px;">
                        <div class="team-details">
                            <h4>Skerray</h4>
                            <p>Every Thursday</p>
                        </div>
                    </div>
                </div><!-- /.col-md-3 -->
                <div class="col-md-2 col-md-offset-1 wow fadeInLeft" data-wow-duration="2s" data-wow-delay="1200ms">
                    <div class="team-member">
                        <img src="asset/images/team/team-4.jpg" class="img-responsive" alt="" style="width:270px;height:270px;">
                        <div class="team-details">
                            <h4>Melness</h4>
                            <p>Every Friday</p>
                        </div>
                    </div>
                </div><!-- /.col-md-3 -->
                <div class="col-md-2 col-md-offset-1 wow fadeInLeft" data-wow-duration="2s" data-wow-delay="300ms">
                    <div class="team-member">
                        <img src="asset/images/team/team-1.jpg" class="img-responsive" alt="" style="width:270px;height:270px;">
                        <div class="team-details">
                            <h4>Inverness</h4>
                            <p>Last Saturday</p>
                        </div>
                    </div>
                </div><!-- /.col-md-3 -->
            </div>
            <br>
        </div>
    </section>
    <!-- End Team Member Section -->
 
Upvote 0 Downvote
Weasel

Weasel

👄 I'd intercept me
Nov 25, 2011
4,132
2,456
Kristovision said:
@The_Unholy Like so?
HTML: 
                       <!-- Start Team Member Section -->
    <section id="team-section">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="section-title text-center wow fadeInDown" data-wow-duration="2s" data-wow-delay="50ms">
                        <h2>Timetables</h2>
                        <p>Our Official Routes<br> Click an image below to view our timetables</p>
                    </div>                      
                </div>
            </div>
            <div class="row">
                <div class="col-md-2 wow fadeInLeft" data-wow-duration="2s" data-wow-delay="300ms">
                    <div class="team-member">
                        <img src="asset/images/team/team-1.jpg" class="img-responsive" alt="" style="width:270px;height:270px;">
                        <div class="team-details">
                            <h4>Durness</h4>
                            <p>Every Tuesday</p>
                        </div>
                    </div>
                </div><!-- /.col-md-3 -->
                <div class="col-md-2  col-md-offset-1 wow fadeInLeft" data-wow-duration="2s" data-wow-delay="600ms">
                    <div class="team-member">
                        <img src="asset/images/team/team-2.jpg" class="img-responsive" alt="" style="width:270px;height:270px;">
                        <div class="team-details">
                            <h4>Lairg</h4>
                            <p>Every Wednesday</p>
                        </div>
                    </div>
                </div><!-- /.col-md-3 -->
                <div class="col-md-2 col-md-offset-1 wow fadeInLeft" data-wow-duration="2s" data-wow-delay="900ms">
                    <div class="team-member">
                        <img src="asset/images/team/team-3.jpg" class="img-responsive" alt="" style="width:270px;height:270px;">
                        <div class="team-details">
                            <h4>Skerray</h4>
                            <p>Every Thursday</p>
                        </div>
                    </div>
                </div><!-- /.col-md-3 -->
                <div class="col-md-2 col-md-offset-1 wow fadeInLeft" data-wow-duration="2s" data-wow-delay="1200ms">
                    <div class="team-member">
                        <img src="asset/images/team/team-4.jpg" class="img-responsive" alt="" style="width:270px;height:270px;">
                        <div class="team-details">
                            <h4>Melness</h4>
                            <p>Every Friday</p>
                        </div>
                    </div>
                </div><!-- /.col-md-3 -->
                <div class="col-md-2 col-md-offset-1 wow fadeInLeft" data-wow-duration="2s" data-wow-delay="300ms">
                    <div class="team-member">
                        <img src="asset/images/team/team-1.jpg" class="img-responsive" alt="" style="width:270px;height:270px;">
                        <div class="team-details">
                            <h4>Inverness</h4>
                            <p>Last Saturday</p>
                        </div>
                    </div>
                </div><!-- /.col-md-3 -->
            </div>
            <br>
        </div>
    </section>
    <!-- End Team Member Section -->
Click to expand...
Yes.
 
Upvote 0 Downvote
Weasel

Weasel

👄 I'd intercept me
Nov 25, 2011
4,132
2,456
Please do what @bigdawg told you to do. Embed your full HTML and CSS in a
You must be registered for see links
. This way we can actually test it and see what's wrong. Currently you are providing only parts of the template.
 
Upvote 0 Downvote
griimnak

griimnak

You're a slave to the money then you die
Jul 20, 2013
956
797
Yeah, what @The_Unholy said.

The_Unholy said:
You're using col-md-3. Bootstrap only has 12 columns. So when you add the fifth one, the total sum of columns would be 15. Change this to col-md-2, and add a offset-1 on the first div in the row to make them aligned in the center.
Click to expand...
Looks like your col width is too small or the div holding it has a certain width, you'd need to post a jsfiddle/codepen so they can analyze the code. I don't think it matters if it's broken or not.
 
Upvote 0 Downvote
MayoMayn

MayoMayn

BestDev
Oct 18, 2016
1,423
683
The_Unholy said:
Adding a new row would result in the fifth image getting on a new row. He wants all 5 images on the same row.
Click to expand...
He should just use damn @media properties and adjust the width and height of the image depending on the users viewport so it's responsive, which then will make the columns fit on the same row.

That's how I had to do it with my React Carousel Slider
 
Upvote 0 Downvote
Weasel

Weasel

👄 I'd intercept me
Nov 25, 2011
4,132
2,456
Sentinel said:
He should just use damn @media properties and adjust the width and height of the image depending on the users viewport so it's responsive, which then will make the columns fit on the same row.

That's how I had to do it with my React Carousel Slider
Click to expand...
Or he just uses build in bootstrap functions.
 
Upvote 0 Downvote

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)
☀️  Switch to Light Theme

Latest posts

Top