I just completed my tribute page, here when it is on a small screen, some of the dates are instead to the right but all shows fine on a larger screen. Please what might be the cause of this behavior?
It works good on both my phone and laptop. I think the problem is that your page isn’t responsive. Can you try adding this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
in the head of your html page code and then try again and see if it works?
Hey there: some observations:
On a mobile device “Summar 1960” (Summer =) squishes over into the next column somewhat.
This is solved by making the date col-xs-3 instead of x2. (Adjusting the other side to col-xs-10).
I copied the code to my editor locally and your right, when I load the file without codepen everything appears great.
I even tried to find mismatched columns but couldnt find any.
Not quite sure what the problem is.
However I would be very interested in the answer.
If this happened to me id take 3 events from each block and rewrite it from scratch paying careful attention to my rows and columns.
If everything is ok, id add the missing ones.
Im by no means a pro but questions I asked myself were:
1.) Why would I declare a col-xs-12 column in a row?
2.) Why not just make the 1st set of <div> a <div class="container jumbotron"> instead of multiple nested divs?
3.) Why is each row not enclosed in a row tag? Is it ok to stack columns on top of each other without nesting them in their respective rows?
You can take a look at my much simpler tribute page, And look at how I organized my rows and columns. Maybe that will help?
1 Like
div{
border: .1em solid red;
}
Add this to your CSS, resize around, and you’ll see what’s happening.
Basically, each line doesn’t have the same height. When the date is taller than the description, it creates an uneven line.
The next date, instead of starting on the next line, thinks that it still has space, so it tries to fit itself in the same line as the description above it.
It basically looks like this.
OldDate Description Description Description
OldDate NewDate
OldDate NewDate
NewDate
To solve this issue, wrap each col-xs-2 col-xs-10 divs into a div with class=row.
3 Likes
Thats what I suspected. Thanks for making it clear to both myself and the op
1 Like
Wow thank you @jx2bandito. First, a very cool debugging technique. After adding the piece of CSS, the problem immediately presented itself.
1 Like
Thank you, @kizmat. That was so helpful. I guess I am over using <div>s Your feedback has really helped me rethink my portfolio project
Glad I could help =)