Tribute page, can't make images work on mobile

1

Hi all!
I have really struggled with my tribute page, it only looks ok from my computer but not from mobile. I think there is some misstake realted to position of the first small pic in left corner and to the gridsystem. I serached a lot and tried many things but I really have no idea how to fix this. I would be grateful for any tips or help on where to look or move forward from here,

Here is my pen:


Cheers Elin

2

Hi !
I believe you have to write class = “right-block img-responsive”, instead of
class= “right-block” “img-responsive”, to make the images responsive.

For the top small pic, I think your div specifying number of columns in a row is missing.

3

Hi, there are a couple of things you can do first.
You can control your codepen settings by clicking on the gear icon in the upper right hand corner next to your avatar in your pen header.
Place your viewport meta tag inside the html settings for meta tags.
Make your fontawesomes https and manually place them in the CSS Settings.
Go to your JS settings and choose Bootstrap from the dropdown.
Remove your js get element tag and create an h1{ } inside the CSS.
As @Shivam-Miglani said, this code: class=“left-block” “img-responsive” won’t quite work (I think) because you have closed out the class before img-responsive, so it doesn’t know what to do with the image. Also, you may want to have "class=“pull-left/center/right img-responsive” instead of “direction-block”.

I just noticed that you have set a specific size on the images. This means that 3 columns of 400x300 will get squashed when the viewport is less than 1200. If you take out the sizing, then let the column size dictate, you should be ok.

I hope this helps.

4

Hi! Thanks for your comment. And to make me see I didn’t put it in the same place when using to sets of "

5

Hi! Thanks! You been very helpful, I tried to fix things like you said but I’m afraid I done something wrong to mess it upp more. When I removed the size of the images the images becomes very different in size. Can you or any other see what went wrong when I tried apply the code?

6

Of course, let me look again…

7

Uncaught Error: Bootstrap’s JavaScript requires jQuery - you need to add jQuery to your JS setting.

The top and middle look good on 670 and 320 view ports.

However,

8

Thanks so much KoniKodes! I’m very grateful that you took the time to help me and explain. I felt very stuck but now I feel like I would want to keep going:)!
Thanks again and have an amazing day!

9

I’m glad I could help. You can make it look totally awesome! And your next project will be even better
:slight_smile:

10

Thanks for your encouragement! Yes, the only way is to keep practice :slight_smile: