Tribute page: Problem with my columns (responsive grid)

Tribute page: Problem with my columns (responsive grid)
0.0 0

#1

Hello, I’m currently working on my tribute page and I’m almost finish but I have a few issues. https://codepen.io/tititarab/pen/LLRdJX
The major problem is when I change the view on full page, suddenly the titles of my paragraphs are not aligned anymore. I really don’t know why it does it. At one point, I already had somme issues with the responsive grid, only to realized I forgot a “closure”. But now I just don’t know.

I also have a small issue with my anchor links, the first one (Wikipedia) works just fine but the 2 others only open themselves when I do a click right and then open it in a new tab/page.

And finally, should I add some color, background to my page ? I though about it but I’m not sure it’d be really pretty considering my skills.

Thank you in advance for your answers ! :slight_smile:


#2

Hi. Think you’ve done a great job here.
I have viewed your pen, full page, in both chrome & firefox browsers and I am not seeing a problem with your paragraph title alignment. They appear that they are centered over each paragraph.

As for the links, I see only 2 links. When I right click them, they behave as expected.
What browser are you using? Have you tried this in annother browser?

Finally, as for your background, looks clean and neat as is. Don’t be afraid to experiment. Try using CSS to add different background colors or images. Maybe experiment with gradients and different levels of transparency. Make a copy of this pen and think of as a toy you can play with and be creative with. What ever you can imagine, chances are most of it has already been done, so google search your ideas and there will be some for of guidence to show you how to do it.

Happy coding: :slightly_smiling_face:


#3

To start, that layout of the page looks great.

I have a couple of ideas for you to consider.
1- In looking at your code, I see 3 links for Gloria Steinem’s page. I would remove the last 2 as they “may” be causing some issues.
2- In the remaining link, add this to the link so it opens in a new page --> target="_blank"
i.e. a rel=“nofollow” href=“http://www.gloriasteinem.com” target="_blank"> her website</a
(I removed some tags so your link element will display)

What issues are you seeing with the titles? They look fine to me, even when I shrink the page they look centered.
The white background looks fine but you may want to experiment with some soft background colors.

Bill Q


#4

Thank you both for you answers, I really appreciate your comments, it motivates me for what’s next :slight_smile:
I changed browser and don’t have problems any more.
And I’m going to follow the advice about making a copy and experiment different things.


#5

May I ask what browser was giving you the problems?
I am guessing it was Internet Explorer.
Usually there are ways to adapt to make cross browser compatability.
Not important right now that you learn that, but we as future developers will have to consider if we want to code to support as wide an audience as possible.
Hope you have fun experimenting.
Note: I do most of my coding on my machine and test locally before uploading to codepen. A good text editor like “Atom” or “Notepadd++” can be a great help.