I’m frustratingly stuck on my Tribute Page Project! I may have missed something so simple, but I cannot seem to make my page mobile responsive!
Any help/feedback on my work would be hugely appreciated! It would also be great if the feedback does not change the current look/state of the Tribute page.
I don’t particularly want to submit this project until I know it works well with mobile devices.
Here is link to my Tribute Page: https://codepen.io/milz92/pen/qYrmjo
Try to use another type of unit on your CSS. With all the units in px the page will have a absolute size.
Read this article about CSS units https://css-tricks.com/the-lengths-of-css/, that’ll make things more clear.
I have had a read on the link you provided me with, but not too sure what amendments I can make to my CSS in order to make my page mobile responsive.
Is there something I have done incorrectly within my HTML or CSS that might be preventing the page to appear mobile friendly when loading it on my mobile phone?
I’ll keep digging away at my code to see if the units might be the issue.
There’s nothing wrong with your code. The only reason they don’t appear nice on mobile is because they has a fixed size. If you create a element with, p.e. width: 100px; height: 100px;, it’ll always this size, 100 pixels of width and 100 pixels of height, wherever you open it. Others units have different behavior, like width: 50%, occupied an area of 50% of the total area it can occupied.
Hope it’s clear.
Thanks again for responding to me, and confirming that the code is correct for now.
I am going to fiddle around with the units and see if they can be resized so that it appears better on the mobile.
For my images, my height is set as 400px and width as 300px - do you know what percentage I could change this to, to make it look the same but appear more fitted on a mobile device and a larger screen? I have just opened up this page on a wider screen and there seems to be way too much spacing between the images. The rest of the page looks fine, it’s just the area where the 3 images are presented that seems to be the problem.
There’s not a unique way to do, you need to experiment with the values. Another thing is use a media query, flexbox, css grid. All that working together with the units that i talked before will made your page more responsive. Play around with all that and you’ll get a better way to structure all objects in your page in a responsive way.
A video you may find interesting: https://www.youtube.com/watch?v=Wb5xDcUNq48&t=3s
You’re a gem! I will definitely keep playing around with the values and units. For now, I have uploaded my work with slight improvements. Please take a look to see if this has worked. I have tidied up my code and also included Bootstrap in areas where relevant to give the page a more organised and structure look to it, without using an margins or paddings in CSS.
I still cannot seem to figure out how to change the units and values to make it mobile friendly, because when I do this, it messes up the size and structure of my “onmouseover” image, which also moves my text below that out of its place, which messes it up.
Try to use another classes, not only the bootstrap ones, to better styling the page. Divide elements into classes, uses combination of selectors. There’s a video with a bunch of intro tips on how to make a page responsive and organize your CSS files.
There some errors in there. First, in code pen you must put your head declarations on the settings of your HTML. Second, in your CSS you are refereeing to your body as a class, remember that to refereeing elements you don’t put a dot before the name, only to refer classes. Also, don’t put your background image on the body, put on the container. Besides that there something between the background and the width on your body refer on CSS, erase both and rewrite them, i think it’ll work. Try fix those problems and see if it’ll work.
I liked. Just few design tips, nothing with the code, try put more contrast on the links to your projects or put the link to them in the picture because the background is blue and the link too and it’s very difficult to see. Keep make and experimenting new things and you’ll get more secured with your work.
