My portfolio page - with some device & alignment issues

Hi

Well, that’s my first post on the group, so be kind.

I have finished my portfolio page and it’s available here.
I would be happy to get some feedback.

I do have some issues with alignment.
I’d like the text next to the portfolio logos to be vertically aligned
I’d like the social buttons to be horizontally centered on their column

In addition it seems my navbar behaves differently on ios than on osx.

What do you think?
Do you have any insight?

Eyal

I want to be kind as its your first post … but being kind wont help so here goes … starts off nice i just felt the need for some more padding or margin on left of image and that the width of the text was too wide so more margin there as well.
then i scrolled down and sorry didn’t like what i saw … first thing that hit me was the long long lines of text plus also the font size had shrunk plus everything looked squashed together (i realized there was what was meant to be 3 separate sections) then i noticed the word Portfolio … and this really looked out of place over the big logo. plus the portfolio was pressed up against the side of the page and the logos looked gigantic compared to the text

when i made the screen smaller things didnt improve … the logos got smaller but left a large empty column under them and the text was squeezed to take up rest of the screen. Also realized this also happens for the top section .

Ok so how to improve … my suggestions and these are only suggestions … as you are using bootstrap on small screens text should have full width of screen with logos and images over them. On large screens dont feel the need to use the whole width maybe set a max width followed by margin auto. This should be easy enough to do with bootstrap grid system …

while looking at your page and before i commented i decided to try recreating part of your page to see if i could do what i was talking about … no point me giving advice if i cant do it but as i dont use bootstrap i did it with flex and one media query.
so here is what i did https://repl.it/Dr04/0
it just has you top section with your image and one of your next sections … didnt add the header as your header seems fine and seems to work fine … only problem i see is on mobiles it over hangs your top section a bit.

Hope my thoughts on your page are taken as help and not negative.

1 Like

@eyalliebermann It’s a great concept and I like your I’m Hiring button. It just needs a little tweaking.

If you don’t mind some constructive criticism…

First, add a viewport meta tag in the html stuff for head settings. This will work with bootstrap for your responsive sizing.

I would move the social icons into a footer. You will have more control over them. Take the sections out of the nav bar and just call it Contact - then link to the footer.

I think you may want to add some hard code styling. Bootstrap is a great framework, but the real beauty comes from enhancing it with css.

I’m not a fan of jumbotron. I prefer heroes because I have more control over them.

Your image was at col-4 and img-responsive is good, but you attached the socials to it and I think it confused it.
Your original image is almost 800px. If you can, I use photoshop, shrink your image to half that - 400px and call it profile-sm.jpeg . This will fit with your summary more and make it easier to resize.

You didn’t need Portfolio to be in a row until you make your columns.
Then I would do the same thing with the logos, make them about half the current size. I don’t see font sizing. Sometimes it can make a difference. You can also pull the Portfolio in with the class of “pull-center text-left.” In css, make your #portfolio{ width:90%; }

And then style your footer with columns in a row. They should be a little bigger than what you have right now.

1 Like

Hi John

Wow, Thanks a lot for your elaborate feedback and for the time you took to actually try it yourself.

I would fix the font sizing and I would put some margins to make the lines of text shorter and the make the items on the portfolio section clearly distinguishable from one another.

You suggestion for small displays is really constructive and the @media rule you’ve used on your css is, well, cool.

I would look into it and improve.

Thanks again,

Eyal

Hi Koni

Thanks for the time you took to look into my page, and thanks for the compliment and for your suggestions.

Shrinking the main photo is a good point and I would rethink the size of the other photos.

I was trying to use vanilla bootstrap and avoid hand made css, but I think you’re right here.
Some css enhancements are needed.

And the social links should find the right place, yea.

Thanks again.

I’ll do some improvements and repost :slight_smile:

Eyal

I’m glad to hear :slight_smile:

The great thing about bootstrap is that it controls many of the main style issues. Of course, this could be a problem too, especially if you want to have something unique happening that goes against what bootstrap is offering.

I think the great thing about css is that you can style it to your satisfaction after bootstrap has set up the first stage. Have fun with it.

I can’t wait to see what you do next.