Forums

[heuder]

Hi, I’m not a web developer but I spent a lot of time changing things on a template and just now I realize the Portfolio Items are not responsive, tried everything I know to fix it but no success.

This is the template: https://shapebootstrap.net/item/1524960-multi-free-responsive-onepage-html-template

The portfolio items on large screens seems ok, but on mobile, it maintain the number of columns and the items shrinks.

I already tried to get help on other forums, no success either. =(

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

Thank you all.

[Paulie_D]

I’m not a web developer but I spent a lot of time changing things on a template.

Then, with respect, perhaps you shouldn’t being trying this in the first place….you might need to hire someone.

Looks to me like you got a lot of help on the other forums but you don’t know enough to apply it.

Not sure what we could add here especially without any code.

You might want to try creating a Codepen Demo with what code you do have.

[heuder]

With respect, I was able to apply everything suggested to me but nothing really worked. And to be honest, anyone seemed to be interest enough to know the problem, apparently they just read the thread and made some superficial suggestion.

And I tried to hire someone, but they’re expensive and this is a Website for an ONG, so, our budget is pretty limited, so I decided to do it myself, since I’m somewhat familiar with HTML and CSS.

I’m just looking for some help really, if someone can help it would be great and I’d be grateful.

[Paulie_D]

Not sure what we could add here especially without any code.

You might want to try creating a Codepen Demo with what code you do have.

If you want simple debugging we’re happy to do that. Major fixes that take time….that’s usually another story…and why web developers do get paid.

[Eva]

Is your site online ? Provide us a link.

[heuder]

Hi EVA,

http://www.solvertab.com

I get that the portfolio items shrinks because I’m using “width: 32%”
But when I remove that and add to my HTML code that bootstrap stuff, it fixes the shrinking and on mobile would show just like I want.

The problem is, when the Bootstrap uses 33.3333% on large screens, it doesn’t show three portfolio items on one row, looks like there is no space for 3 portfolio items.

I tried change the bootstrap code to 32% instead of 33.3333%, since when I set on my CSS width = 32% it works fine, but didn’t work either.

[Eva]

Which resolution are you having problems and which browser? I find it pretty good only on (max-width:480px), the menu of potforlio is a bit messy.

[Paulie_D]

Looks pretty damn responsive to me.

Let’s start small…pick one thing that isn’t responsive…and we’ll try and fix that.

[heuder]

As I said, the portfolio items are not responsive, check:

My website: http://i.imgur.com/DShQrH8.jpg
Live Preview of the Template: http://i.imgur.com/05rMPU5.jpg

Then, I remove from the CSS file the line: “width: 32%;” and add on on my HTML portfolio items the Bootstrap stuff, like: “div class=”col-lg-4 col-md-4 col-sm-12 col-xs-12”

Now my problem on mobile is fixed, even tough is not centered (don’t know how to fix is either), see pic:

My website: http://i.imgur.com/H5KtnTx.jpg

The problem is, when I do that, I get another issue when displaying it on large screens, see pic:

My website: http://i.imgur.com/XTClf7t.jpg

Apparently, there is no space enough for three portfolio items in one row, using the width 33.33333% from the bootstrap, when there is three columns.

Ok, but when I was setting on my CSS code “width: 32%;”, the portfolio items where showing up ok.
So, I went to the Bootstrap code and changed the 33.3333% for 32% for these situations.

And BAM, issue still continues.

Now, why when I set on CSS file width=32% it works and when I’m using 32% on bootstrap doesn’t? I don’t know, I’m just a newbie.

[heuder]

For me, responsive is:
When on large screens, show three columns.
When on mobile, show only one column.

Which means:
On mobile, show one portfolio item above the other.
On large screens, show three portfolio items on each row.

Actually, that is what happens on other templates I’ve seen.
I even tried to download them and compare the codes to see if I could fix it, but I couldn’t do it, probably because I don’t know much.

[Paulie_D]

What part of one thing…?

Seriously, you need to look into how Bootstrap works. All this is laid our for you in their documentation.

Hacking around here and there without some notion of how this is all supposed to come together isn’t really helping you.

Start small, and work up.

[heuder]

Don’t waste your time Paulie, go find another thread.

[Senff]

Don’t waste your time Paulie, go find another thread.

These types of comments are unnecessary and won’t help anyone.

While Paulie can be a bit rough around the edges when it comes to his wording when trying to help people (he does get his fair share of people simply “demanding” help and then complain when he can’t help due to lack of information provided), at least respect his attempts to help and his requests for more information.

Like you’ve said yourself, you’re not a web developer, so it would be smart to take advice from those who are in order to solve your problem, instead of telling them to find another thread.

[Paulie_D]

Don’t waste your time Paulie, go find another thread.

Good advice….I will.

Good luck for the future.

[heuder]

Yeah, there is a lot of lack of information, I just posted everything I tried so far, what the problem is (WITH PICTURES) and the link for the template, which anyone can download and see the code.

So, let’s review all of Paulie posts, from the beginning:

1º: “you shouldn’t being trying this in the first place….you might need to hire someone”

2º: “If you want simple debugging we’re happy to do that. Major fixes that take time….that’s usually another story…and why web developers do get paid.”

3º: “Looks pretty damn responsive to me.”

4º: “Hacking around here and there without some notion of how this is all supposed to come together isn’t really helping you. Start small, and work up.”

All I can say is what I felt, and I felt that Paulie were more occupied pointing fingers, calling be dumb and being rude and in any moment I felt he were trying to help.

But after all these replies from Paulie you think you’re right to lecture me because I posted “Don’t waste your time Paulie, go find another thread”.

But hey, it’s ok, I don’t really mind, but I’m trying to get help and if you guys won’t do that, don’t get in the way and let someone else do. Thank you so much.

[Author]

Posts