Portfolio Project - I have a problem

Hi all!

I really enjoyed making this project!
I have a problem and spent a lot of time trying to figure it out and I couldn’t… When I see it locally the size of all the elements are exactly like I want, but when I publish with GitHub all appear very small.
Can anyone help?

Here is the link:
https://thedeveloperqueen.github.io/Portfolio/index.html

Thank you
Rita

Hi Rita,
it is a little difficult to understand what’s wrong since we don’t know what you want your site to look like. So the best thing would be to post screenshots of how you want it to look like and screenshots of what it actually looks like where you marked the elements in question.

Thank you!


The one with bigger elements it’s the one I’m aiming for and the other screenshoot is what I see…

I’m pretty new to forums, still have to get my way around it :wink:

You set fixed widths and heights for the boxes:

    width: 250px;
    height: 275px;

That means that on large screens/viewports the elements appear very small in comparison to the page and on small screens they appear just right. A relative width would be more useful here.
The parent element (pages) is already set to display: flex which makes sense. With the fixed width you lose the benefit of the flex property.
Remove the fixed width from all boxes and add the property flex-grow: 1 to the children of .pages:

.pages > * {
  flex-grow: 1;
}

That should fix the problem and be more generic than styling every child element (.about, .developer) separately.

Great suggestion! Although the problem is not only the boxes, if you see the size of the text and footer is also different. Even with a fixed width/height it should look the same for the exact same size of screen/viewport. I’ve made a print screen of the exact same screen size and still get everything smaller with GitHub than with my local deployment.


It’s driving me crazy… hahahaha

Set the img tags inside the a tags to width: 100%;
Then it depends on what you want: If you want the links to be responsive widths, set the a tags to a width with a percentage value. Otherwise use flex-base property.