Issue with responsive portfolio items

[heuder]

Hi,

First of all, I want to say that I'll try to be as specific as I can and give you all the information needed, if anything is missing, just ask me for it. Thank you all in advance.

So, the best way to describe my problem is telling what I did so far. Well, I downloaded a template called multi LIVE DEMO LINK (http://shapebootstrap.net/item/1524960-multi-free-responsive-onepage-html-template/live-demo) and develop my hole site on it, after a lot a days working on it, I noticed that the portfolio items on large screens was pretty good, but on smaller screens the portfolio items were shrinking, making the experience for mobile users not adequate.

So, what I was and still looking for?
I want the portfolio items to display on table format with 3 columns and 2 rows on larger screens and I want ONE column, which means, 1 portfolio item below the other on Mobile devices.

Here is an example of how I want the portfolio items to behave: Krefolio (http://shapebootstrap.net/item/1524919-krefolio-startup-agency-landing-page-template/live-demo)

I did several things to do that, first I deleted a line from the Main.css file:



#portfolio .portfolio-items {
margin: -15px;
}
#portfolio .portfolio-item {
width: 24.9%;
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;
}


I deleted the line in red, which I think was responsible for the portfolio section maintaining it's table format of 4 columns independently the size of the screen.

Next, I changed the coding on my HTML index file. I divided the portfolio items in two rows and added before every portfolio item the code:



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


Here's the full portfolio section code. I added all the rows in red:



<section id="portfolio">
<div class="container">
<div class="section-header">
<h2 class="section-title text-center wow fadeInDown">Our Works</h2>
<p class="text-center wow fadeInDown">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <br> et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>

<div class="text-center">
<ul class="portfolio-filter">
<li><a class="active" href="#" data-filter="*">All Works</a></li>
<li><a href="#" data-filter=".creative">Creative</a></li>
<li><a href="#" data-filter=".corporate">Corporate</a></li>
<li><a href="#" data-filter=".portfolio">Portfolio</a></li>
</ul><!--/#portfolio-filter-->
</div>


<div class="portfolio-items">

<div class="row">

<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="portfolio-item creative">
<div class="portfolio-item-inner">
<img class="img-responsive" src="images/portfolio/01.jpg" alt="">
<div class="portfolio-info">
<h3>Portfolio Item 1</h3>
Lorem Ipsum Dolor Sit
<a class="preview" href="images/portfolio/full.jpg" rel="prettyPhoto"><i class="fa fa-eye"></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 portfolio">
<div class="portfolio-item-inner">
<img class="img-responsive" src="images/portfolio/02.jpg" alt="">
<div class="portfolio-info">
<h3>Portfolio Item 2</h3>
Lorem Ipsum Dolor Sit
<a class="preview" href="images/portfolio/full.jpg" rel="prettyPhoto"><i class="fa fa-eye"></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 creative">
<div class="portfolio-item-inner">
<img class="img-responsive" src="images/portfolio/03.jpg" alt="">
<div class="portfolio-info">
<h3>Portfolio Item 3</h3>
Lorem Ipsum Dolor Sit
<a class="preview" href="images/portfolio/full.jpg" rel="prettyPhoto"><i class="fa fa-eye"></i></a>
</div>
</div>
</div>
</div><!--/.portfolio-item-->

</div>
<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/04.jpg" alt="">
<div class="portfolio-info">
<h3>Portfolio Item 4</h3>
Lorem Ipsum Dolor Sit
<a class="preview" href="images/portfolio/full.jpg" rel="prettyPhoto"><i class="fa fa-eye"></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 creative portfolio">
<div class="portfolio-item-inner">
<img class="img-responsive" src="images/portfolio/05.jpg" alt="">
<div class="portfolio-info">
<h3>Portfolio Item 5</h3>
Lorem Ipsum Dolor Sit
<a class="preview" href="images/portfolio/full.jpg" rel="prettyPhoto"><i class="fa fa-eye"></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/06.jpg" alt="">
<div class="portfolio-info">
<h3>Portfolio Item 5</h3>
Lorem Ipsum Dolor Sit
<a class="preview" href="images/portfolio/full.jpg" rel="prettyPhoto"><i class="fa fa-eye"></i></a>
</div>
</div>
</div>
</div><!--/.portfolio-item-->

</div>
</div><!--/.container-->
</section><!--/#portfolio-->


As result from these changes, now on mobile devices my portfolio items are being displayed the way I wanted, one below the other. See picture below:

http://i.imgur.com/SDqrbo6.jpg

A small issue was that they are not centered aligned. If I make the page a little wider, here's what is looks like:

http://i.imgur.com/WW9G0vd.jpg

Ok, that's a problem I can live with, I would like to fix it though. It seems like a pretty simple fix.

The second and big issue is with the portfolio items on larger devices. When I open up my index.html file, everything seems to be great, it looks like just the way I want. But the page is not yet fully loaded.

http://i.imgur.com/EC4IxNU.jpg

When the page finishes loading, here's how the portfolio items are distributed:

http://i.imgur.com/IXkhdBs.jpg

As you can see, there are some portfolio items missing and I have no idea what is causing this.

Funny thing, on firefox a get something different:

http://i.imgur.com/60sAk5Z.jpg


So, this is the issue guys. I hope u guys have the information u need, if not, please ask me for it.


Ps: I just downloaded the Original Template version and all the changes I did was the ones shared here. So, I don't think it is something I did while editing my website. The issue, whatever it is, probably came with the template.

Ps2: It's a Free Template, so, if anyone want to see the hole code and files here is the link for it: Multi Free Template (https://shapebootstrap.net/item/1524960-multi-free-responsive-onepage-html-template)

Ps3: I don't want to use another template. I would like to fix this one.

[Beverleyh]

It looks like you've been doing the rounds with this one and, having skimmed over the answers, all the advice and pointers given so far has been on the ball - it seems counter-productive to repeat the advice again but I'll give my thoughts later;

http://www.webdeveloper.com/forum/showthread.php?346489-RESOLVED-Help-Responsive-Portfolio

http://community.sitepoint.com/t/issue-with-responsive-portfolio-items/200401

http://www.webdesignforums.net/forum/html-css-help/45120-portfolio-images-shrinking-keeping-number-columns.html

http://www.webdeveloper.com/forum/showthread.php?346493-RESOLVED-Images-on-Portfolio-shrinking-not-responsive

https://css-tricks.com/forums/topic/template-portfolio-items-not-responsive/ <-- comments in this thread have been noted

Much like the other forums, we are not a "do it for you" place either (except for the paid help request forum where you can hire someone for larger or more time-consuming tasks, which layout fixing can easily turn into). Experienced members may become more invested with a help request if it personally interests them but, generally speaking, we would hope that you take our tips and pointers and apply your own research/knowledge/logic.

My thoughts are;

The template uses Bootstrap so maybe first research that in order to work *with* the foundation. Probably not a good idea to change the markup in the template - concentrate on manipulating the CSS instead.

You can of course decide to do your own thing and apply your own CSS overrides in your own stylesheet. Media queries will help you manipulate the layout at different sizes, so look into those to understand what they're doing in the supplied template, and what they're capable of in order to apply your own styles at your own breakpoints (although these are probably already in the stylesheets, so adding to them would seem appropriate - or if you prefer to leave the original template files as supplied, create your own in a custom override stylesheet)

The developer toolbar (F12) will help you investigate elements and their applied styles. You can use it to do "live" edits in the browser before transferring CSS to an active stylesheet (or correcting problems indicated in other stylesheets), which makes it very useful for troubleshooting layout issues. This is a solid weapon in your arsenal so you should learn how to use it. Expect LOTS of trial and error in this environment whether you're an experienced developer or not.

When box-sizing: border-box; is applied to elements, padding is absorbed by the box model (maybe read up on the box model if you don't know what that is), but margin isn't. This may help shed some light on why certain widths are used (e.g. 32% instead of the more obvious 33.333% for thirds) and indicate what you can target to fix layout problems. For example, in the mobile view when you say the single column of images is not centered, try zeroing the margins (margins push/pull things sideways when their horizontal values are mismatched). Likewise, when the images break their grid in wide(r) screen view, the margins will probably be to blame; Element width + horizontal margins + borders must total 100% or less in order to occupy one line (and not shunt elements into other rows). This logic will be further expanded on when/if you read about the box model though.

Another thing that affects centering is floats. Auto horizontal margins will usually center an element, except when a float is applied, so only apply floats inside media queries for larger views when block-level elements (such as your portfolio items) will be sat side-by-side.

Last thought - If you consider this shrinking grid a 'bug' in the UX of the layout, you could also approach the original template provider so that they release an updated (improved?) version of their work. Sometimes it's just better to go to the source - and I'm not saying that this is the case here, but many web-related providers earn money from customisations of their freebie releases, so other developers (although appreciating that they can modify the product themselves) prefer not to touch another person's work out of professional courtesy and potential loss of earnings of a fellow web dev.

Good luck with your research and project.

[heuder]

The template uses Bootstrap so maybe first research that in order to work *with* the foundation. Probably not a good idea to change the markup in the template - concentrate on manipulating the CSS instead.


Thank you for the answer Beverleyh. I'm not sure if I understand you correctly, but I think you're saying the developer didn't use Bootstrap but CSS, if thats what you mean, the developer actually used bootstrap on the rest of the page, just on the portfolio items he didn't, don't know why. Here some part of the original template code using bootstrap:

Code from the Services Section


<div class="row">
<div class="features">
<div class="col-md-4 col-sm-6 wow fadeInUp" data-wow-duration="300ms" data-wow-delay="0ms">
<div class="media service-box">
<div class="pull-left">
<i class="fa fa-line-chart"></i>
</div>
<div class="media-body">
<h4 class="media-heading">UX design</h4>
<p>Backed by some of the biggest names in the industry, Firefox OS is an open platform that fosters greater</p>
</div>
</div>
</div><!--/.col-md-4-->


Code from the Features Section


<div class="row">
<div class="col-sm-6 wow fadeInLeft">
<img class="img-responsive" src="images/main-feature.png" alt="">
</div>
<div class="col-sm-6">
<div class="media service-box wow fadeInRight">
<div class="pull-left">
<i class="fa fa-line-chart"></i>
</div>
<div class="media-body">
<h4 class="media-heading">UX design</h4>
<p>Backed by some of the biggest names in the industry, Firefox OS is an open platform that fosters greater</p>
</div>
</div>


Code from the Process Section


<div class="row text-center">
<div class="col-md-2 col-md-4 col-xs-6">
<div class="wow fadeInUp" data-wow-duration="400ms" data-wow-delay="0ms">
<div class="icon-circle">
<span>1</span>
<i class="fa fa-coffee fa-2x"></i>
</div>
<h3>MEET</h3>
</div>
</div>
<div class="col-md-2 col-md-4 col-xs-6">
<div class="wow fadeInUp" data-wow-duration="400ms" data-wow-delay="100ms">
<div class="icon-circle">
<span>2</span>
<i class="fa fa-bullhorn fa-2x"></i>
</div>
<h3>PLAN</h3>
</div>
</div>


Code from the Pricing Section


<div class="row">
<div class="col-sm-6 col-md-3">
<div class="wow zoomIn" data-wow-duration="400ms" data-wow-delay="0ms">
<ul class="pricing">
<li class="plan-header">
<div class="price-duration">
<span class="price">
$39
</span>
<span class="duration">
per month
</span>
</div>


I'm assuming that when he uses stuff like "col-sm-6 col-md-3", he's using bootstrap. Which is one of the thing I had to search on the internet an learn a little bit in order to make the changes to my website.





When box-sizing: border-box; is applied to elements, padding is absorbed by the box model (maybe read up on the box model if you don't know what that is), but margin isn't. This may help shed some light on why certain widths are used (e.g. 32% instead of the more obvious 33.333% for thirds) and indicate what you can target to fix layout problems. For example, in the mobile view when you say the single column of images is not centered, try zeroing the margins (margins push/pull things sideways when their horizontal values are mismatched). Likewise, when the images break their grid in wide(r) screen view, the margins will probably be to blame; Element width + horizontal margins + borders must total 100% or less in order to occupy one line (and not shunt elements into other rows). This logic will be further expanded on when/if you read about the box model though.

That makes sense, thank you and I'll search on the internet about box model and try to learn about it.




Sometimes it's just better to go to the source

Already did that, don't know if they will do something about though.