Portfolio images shrinking and keeping the number of columns

[heuder]

Hi,

I'm very noob and this is a problem that came with the template.
The template is responsive, except for the portfolio part.

On bigger screens it's ok:
port-01.jpg

On mobile, the images shrinks:
port-02.jpg

Well, I guess what I want to do here is obvious. I want the portfolio to display only one columns on mobile.
The thing is, when I put the code "col-xs-12", the page displays only one column, but the images shrinks anyway. I guess "col-xs-12" was suppose to display only one column on small devices, not entirely sure.


Here some of the code, I'm not sure that's the part that u guys need to find the problem, I cant paste whatever u guys want tough.

HTML:

<div class="portfolio-item corporate">
<div class="portfolio-item-inner">
<img class="img-responsive" src="images/portfolio/monitoria.jpg" alt="">
<div class="portfolio-info">
<h3>CEMAT</h3>
Monitoria
<a href="#portfolioModal1" class="preview" data-toggle="modal"><i class="fa fa-arrows-alt"></i></a>
</div>
</div>
</div> <!--/.portfolio-item-->

CSS:

#portfolio .portfolio-items {
margin: -10px;
}
#portfolio .portfolio-item {
float: left;
padding: 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
margin: 0 1% 1% 0;
overflow: hidden;
position: relative;
width: 32%;
}
#portfolio .portfolio-item .portfolio-item-inner {
position: relative;
}
#portfolio .portfolio-item .portfolio-item-inner .portfolio-info {
opacity: 0;
transition: opacity 400ms;
-webkit-transition: opacity 400ms;
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
}

Thakz a lot.

[sasha_bolcina]

#portfolio .portfolio-item width is set to 32%. This is why you always have three pics in row.

[heuder]

I removed that line and added this before every portfolio item: <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">

[heuder]

So... not solved.

As I said I deleted the line "width: 32%;" and changed the html code:

<div class="row">

<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="portfolio-item corporate">
<div class="portfolio-item-inner">
<img class="img-responsive" src="images/portfolio/monitoria.jpg" alt="">
<div class="portfolio-info">
<h3>CEMAT</h3>
Monitoria
<a href="#portfolioModal1" class="preview" data-toggle="modal"><i class="fa fa-arrows-alt"></i></a>
</div>
</div>
</div>
</div><!--/.portfolio-item-->

And closed the "row" after three portfolio items and opened another other for the other three.
On mobile it's OK, aligning to the LEFT, don't know why, but acceptable.

But on large devices, I get this:

l8JWBpBl.jpg

[sasha_bolcina]

This should work well:

<div class="portfolio-item corporate container-fluid">
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <div class="portfolio-item corporate">
                        <div class="portfolio-item-inner">
                            <img class="img-responsive" src="images/portfolio/monitoria.jpg" alt="">
                            <div class="portfolio-info">
                                <h3>CEMAT</h3>
                                Monitoria
                                <a href="#portfolioModal1" class="preview" data-toggle="modal">
                                    <i class="fa fa-arrows-alt"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div><!--/.portfolio-item-->
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <div class="portfolio-item corporate">
                        <div class="portfolio-item-inner">
                            <img class="img-responsive" src="images/portfolio/monitoria.jpg" alt="">
                            <div class="portfolio-info">
                                <h3>CEMAT</h3>
                                Monitoria
                                <a href="#portfolioModal1" class="preview" data-toggle="modal">
                                    <i class="fa fa-arrows-alt"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div><!--/.portfolio-item-->
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <div class="portfolio-item corporate">
                        <div class="portfolio-item-inner">
                            <img class="img-responsive" src="images/portfolio/monitoria.jpg" alt="">
                            <div class="portfolio-info">
                                <h3>CEMAT</h3>
                                Monitoria
                                <a href="#portfolioModal1" class="preview" data-toggle="modal">
                                    <i class="fa fa-arrows-alt"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div><!--/.portfolio-item-->
            </div>
        </div>

[heuder]

Thank you for the help.

I tried ur code but the items don't even show.

I guess the problem is with the "width = 33.3333%" from the Boostrap.

When I use width = 32% works fine, but if a set width 33.333% I get the same problem.

It seems to me that with 33.333% for the items, they don't have enough space to fit in one row.

Sure, I don't think the 33.333% is the problem, maybe there is something on the portfolio items that are making it wider, maybe, I don't know. I'm just a newbie.

[sasha_bolcina]

If you use bootstrap styles you will avoid such problems. Check your custom styles for padding and margin.
Or, you can just overwrite bootstrap classes in your css, like:

col-lg-4, col-md-4 {
width: 32%;
}

Don't forget to load your css after bootstrap...

[heuder]

I tried to change the bootstrap, but it doesn't work, it change something but it show just two columns.

body {
padding-top: 25px; /*Not sure what it is, changing it to 0 didn't fixed*/
background: #fff;
font-family: 'Roboto Slab', sans-serif;
font-weight: 400;
color: #64686d;
line-height: 28px;
margin: 0;
padding: 0;
display: block;
overflow-x: hidden;
}

I've tried to change everything to zero, and didn't fixed, I put a comment on everything i tried to change:

#portfolio .portfolio-items {
margin: -15px; /*Vertical space before and after the portfolio items*/
}
#portfolio .portfolio-item {
float: left;
padding: 15px; /*Margin between portfolio items*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
margin: 0 1% 1% 0; /*Don't know but changing to 0% didn't fixed*/
overflow: hidden;
position: relative;
}
#portfolio .portfolio-item .portfolio-item-inner {
position: relative;
}
#portfolio .portfolio-item .portfolio-item-inner .portfolio-info {
opacity: 0;
transition: opacity 400ms;
-webkit-transition: opacity 400ms;
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 10px; /*Margin of the text inside the picture of the portfolio item*/
background: rgba(0, 0, 0, 0.5);
color: #fff;
}

How do I know the css is loading after bootstrap, just the order??

<title>Solvertab</title>
<!-- core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/owl.carousel.css" rel="stylesheet">
<link href="css/owl.transitions.css" rel="stylesheet">
<link href="css/prettyPhoto.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">

And here is the thing, when I press F12 to preview the page, the portfolio looks fine, but when the page finish loading, the portfolio items change places...


Thank you very much for ur help Sasha, I posted this in many forums u are the only one helping me.
I'm already stressed with this problem, almost giving up, maybe I should just let the mobile users be unable to see the portfolio.

[sasha_bolcina]

Yes, order matters.

You may not give up. Job of designer and programmer is to solve problems. So, do your job. With every new bug you will learn something new and improve yourself.

Your problem is simple. Images haven't enough space to display in one row. Simplify your code until find problematic element, class, id or property.
If you cannot solve it, upload it somewhere. People will help you if they can see your code in action. Me too.

p.s.
Switch off all of the css files other than bootstrap. If layout works, switch on one by one of the other css files until you find problematic one. Then focus on this file and switch on one by one class to find the problematic one.
It is much simpler with firebug plugin for firefox browser.

[heuder]

Tried that, no matter what css I disable, I always get the error.

Another guy said to me this:

Because they're still taking up only 32% of the available screen width.
You need to learn media queries. When the screen gets below a certain pixel width (determined by your design) your image width goes to 100%, or another "screen-filling" percentage. Something like this:

@media only screen and (max-width: 700px) {
img {max-width: 95%;}
}

I'll study about media queries tomorrow.

If u want to, u can download my website files here http://ge.tt/api/1/files/9bTiUZM2/0/blob?download

Thank you.