Hi guys!
My name is Bruna and I’m a newbie and just started my way to coding. I’ve finished the Responsive Web Design Certification and built a website for my uncle’s business, a barbecue foodtruck.
Most people will access the page using a smartphone so I made it with small screens in my mind which I think brought me some trouble as the big version is quite ugly. It is responsive but ugly. I think the mobile version is way better. Or maybe both are ugly, you tell me lol
I will really appreciate any feedback!
It is really big on a browser, but honestly that’s not the end of the world! I can easily read the text, which is more important since that’s the info I would want as a client, and it’s easily navigable.
You could have the menu on one page/section rather than spread over multiple ones and you can do this using tables/columns. Either way, I like it.
I would not make the navbar collapse for the desktop version. It makes it pretty small and far from the content. I only checked with my mobile with desktop view activated. (Might not be exactly the same?).
Hey Bruna, this looks great on desktop too. I don’t know if FCC teaches this, but if you want to change the design for the desktop version you could use a media query which is added at the end of your css file:
@media screen and (min-width: 992px) {
//add classes and styles here just like you would normally, for example:
.logo {
height: 200px;
}
}
min-width:992px could also be min-width:1200px depending on what screen size you want the mobile design to switch to desktop design.
Thanks man! I agree with you, a map would be awesome but I’m not sure how to do it. As I go further on my studies and learn it I come back to update this page.
About the Whatsapp icon, I set the div size in em, it should be proportional isn’t it? I don’t know what might be happening
.whats_icon { /* this is the div*/
width: 3.4em;
height: 3.4em;
position: fixed;
bottom: 2.5em;
right: 1em;
z-index: 2;
}
.whats_icon_link { /*this is the fontawesome icon*/
text-decoration: none;
color: green;
font-size: 4.4em;
}
Thank you! Yeah, the menu is set to stay in the right so if the user has a screen with more than 1800px the menu is gonna be all the way to right far from the content which is set to have a maximum width of 1200px. I will change all breakpoints to em because I’ve learned is better and I for now I will just change the menu position to be on right within this 1200px max-width so it doesn’t go so far from the content in super big screens.
Thanks for the feedback!
Hi there! Yes, FCC teaches that but the problem is not with responsiveness but beauty since I don’t have much information to show on big screens.
And actually I’ve just learned that we should use fewer media queries as possible and when we do that, we should use em instead of px.
Thanks for taking the time to help me! I really appreciate that
I don’t know if you are already familiar with JavaScript,
but I think you are able to add a Google Maps,
it’s literally ~5 lines of JavaScript code and some small additions in your HTML and CSS.
Let us know if you have some questions.
My fault. I meant especially on a small phone I’m having a hard time, because the icon overlays the content:
But this map won’t be interactive right? It seems like it is the same thing as copying the link that maps.google.com provides for users, but instead of iframe the solution you presented uses JS which is a better solution I guess. The thing is, every week (or whenever my uncle wants to be in another place) I will have to manually change code. It would be cool to have a solution where he can set this up himself before going to work. But for now I will follow your suggestion! Thanks!
Well, he doesn’t change location that often so I don’t need a fancy “live location” thing like the one Whatsapp have. That feature is awesome and must be hard as hell to build!
I was thinking in a simple page with a form where he can type an address and press OK and that’s it, the map on the website is updated.
You could build a really simple API that connects to a small database for the location and your webpage fetches the location from this API.
Then your uncle could use a simple form to connect to this API to update the location.
