Need some help with formatting a portfolio page

Need some help with formatting a portfolio page
0

#1

I’m having some trouble getting this page to respond how I want it to. Here’s what I’m aiming for:

-The page to have a set resolution: The positions of images, text, and buttons won’t change based on screen resolution. Right now if the resolution changes drastically, everything just stacks on top of each other and it looks awful.
-Text beside the images of “projects.” As of now the images seem to eat a little into the space provided for the text description of the product. I can’t seem to scoot the placeholder image over any.
-Social Media buttons: I’d like them a bit bigger and spaced closer together, but I’m having difficulty spacing anything out with any accuracy using the
tags. Also the buttons are as big as they’ll go using what I am. Can you turn small images into buttons?

I know this is asking a lot, but I’d greatly appreciate any input, suggestions, or criticism. This is my first major programming project, and I feel like I’m fumbling around through this. Thanks in advance!


#2

This is quite a lot to tackle in one lump. Might be easier to break it down a little. Would also make it easier for forum users to address one problem per thread (maybe not all at the same time though lol)

First issue you will face is “responsive design” you are using bootstrap, which is pretty much purely for responsive design. So using bootstrap things will stack when the screen gets smaller.

Using br tags to space things is a little hacky and very restrictive, you might want to try using margins.

For example I added

to the text next to the project images in your projects section.
Then:
p{ margin:10px; } to the CSS and it has positioned the text next to the image rather than it over lapping at the edge.

It would be better to use a class as you might find formatting

might interfere with other elements later on.

The social button are preset sizes, Best bet would be to use images and them if you want more control over the size.

Hope this helps a little. Feel free to give me a shout if you want. I’m a noob too so not promising to be much help.


#3

Lol
*
The social button are preset sizes, Best bet would be to use images and then <a href - if you want more control over the size.


#4

Here this shows, how to format the text next to the images - https://codepen.io/Andy-Roberts/pen/PJprej


#5

Wow, what an simple fix. Thanks a bunch!


#6

You’ve been a big help, don’t worry. I’ll try implementing some of these changes and let you know how it works out.