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 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
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 {
[COLOR="red"]width: 24.9%;[/COLOR]
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">
[COLOR="red"]<div class="row">[/COLOR]
[COLOR="red"]<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">[/COLOR]
<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>
[COLOR="red"]</div>[/COLOR]
</div><!--/.portfolio-item-->
[COLOR="red"]<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">[/COLOR]
<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>
[COLOR="red"]</div>[/COLOR]
</div><!--/.portfolio-item-->
[COLOR="red"]<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">[/COLOR]
<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>
[COLOR="red"]</div>[/COLOR]
</div><!--/.portfolio-item-->
[COLOR="red"]</div>[/COLOR]
[COLOR="red"]<div class="row"> [/COLOR]
[COLOR="red"]<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">[/COLOR]
<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>
[COLOR="red"]</div>[/COLOR]
</div><!--/.portfolio-item-->
[COLOR="red"]<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">[/COLOR]
<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>
[COLOR="red"]</div>[/COLOR]
</div><!--/.portfolio-item-->
[COLOR="red"]<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">[/COLOR]
<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>
[COLOR="red"]</div>[/COLOR]
</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:
h t t p://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:
h t t p://i.imgur.com/WW9G0vd.jpg
Ok, that’s a problem I can live with, I would like to fix it tough. 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.
h t t p://i.imgur.com/EC4IxNU.jpg
When the page finishes loading, here’s how the portfolio items are distributed:
h t t p://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:
h t t p://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: h t t ps://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.