Tribute Page messes up when viewed in portrait


Viewing on my laptop its formatted exactly how i want, however when i view it on my phone in portrait mode the text on the right drags right down the page and messes up the positioning of all the icons.

where as in the example page we are shown at the starthere the formatting stays the same portrait or landscape.

just noticed when viewing it on here the format messes up on my laptop to.

this is how it looks on my laptop normaly


Hello :slight_smile:
It is not the right text messing up your icons, it’s your margin on twitter link (anchor) that pushed the third icon further down. If your goal is to have them distributed < | > you should doing it this way:

If you’re concerned about the difference in height of right and left containers you can stack them on narrow screens, e.g.:
change col-xs-6 to col-xs-12 col-md-6


Thanks that worked great for getting the icons sorted.

the text on the right hand side is still going crazy when i view it on mobile tho.

If you look at the picture i posted in the op , the txt on the right hand side stops a few inches before the picture on the left stops. This is what i want… except when i view it in mobile the text scrolls way down the page like this…



Yes, this is why I suggested to stack them vertically on narrower screens - there is easy way to do it otherwise. You could alternatively set max-height of your right container and add a scrollbar.

But I would highly suggest to change your



col-xs-12 col-md-6

This will push your right container below the image and make both span 100%~ parent container’s width.

I did update your code in this codepen:


Nice one that’s great! I’ve been reading up on the col class on stack overflow makes much more sense now.