CODEWITHSUNDEEP
htmlcsstwitter-bootstrapmedia-queries
kristofferandreasen
kristofferandreasen

Reputation: 897

My images stay right on mobile and don't align in the center

I have a section that includes three images. It looks perfectly fine on every display except mobile, where the images float right. They seem to align with a starting point at the center. Every other section on my site aligns perfectly as the boostrap rows tell them to.

<section id="press" class="parralax-window img-responsive" data-   parallax="scroll" data-image-src="img/dawn.jpg">
        <div class="row text-center">
            <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
                    <h2><strong>Omtale</strong></h2>
            </div>
                <div class="companies">
                    <div class="col-md-4 col-lg-4 col-sm-4 col-xs-12">
                        <a href="http://iphoneguide.dk/apps/svampeguide-til-svampejaegerne/"><img src="http://i.imgur.com/0ETpuAx.png" class="img-responsive" alt="Iphoneguide - SvampeGuide"></a>
                    </div>
                    <div class="col-md-4 col-lg-4 col-sm-4 col-xs-12">
                        <a href="http://politiken.dk/forbrugogliv/digitalt/ECE2412664/her-er-3-gode-apps-til-efteraaret/"><img src="http://i.imgur.com/8W49tLt.png" class="img-responsive" alt="Politiken - SvampeGuide"></a>   
                    </div>
                    <div class="col-md-4 col-lg-4 col-sm-4 col-xs-12">
                        <a href="http://spisesvampe.webbyen.dk/"><img src="http://i.imgur.com/pax4KwJ.png" class="img-responsive" alt="Spisesvampe - SvampeGuide"></a>
                    </div>
                </div>
        </div>
    </section>

I'm using a parralax plugin but I tried it without it and it doesn't seem to be causing anything.

My css:

#press {
    color: white;
    padding: 8em;
}
#press h2 {
    padding-bottom: 5%;
    font-size: 5vmax;
}

#press img {
    min-height: 30px;
    min-width: 150px;
    display: inline !important;
}

I also tried removing the img-responsive class but that didn't help.

Do you any idea what's causing this?

Upvotes: 0

Views: 126

Answers (2)

Rence
Rence

Reputation: 2950

http://jsfiddle.net/wyLqa8w5/1/ 

#press {
    padding: 15%;
}

I think you should look into bootstrap a bit more.

For example, 

<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">

can be shortened to just 

<div class="col-xs-12">

Also, remember to self-close your image tags:

<img src="" />

Upvotes: 2

Madvillain
Madvillain

Reputation: 86

<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
                    <h2><strong>Omtale</strong></h2>
</div>

Hej,

I am pretty sure above code is incorrect and you should wrap the div for the col-md-12 around all 3 cols containing the img's - try it. Furthermore can you supply me with the .img-responsive class?

I'd like to see it.

Upvotes: 0

Related Questions