hello world and today guys and we show you guys a a problem that a lot of beginner developers face so go something like this you're happy you made your first website you put the code and everything to it and you go you open it a new monitor I mean and onto your screen it looks perfect and then you go to see on your phone or something and it looks ugly doesn't adjust and you're like scrolling all over YouTube and I have a solution for you And all of Microsoft Edge and Google Chrome, they have the exact same feature where if you click on the expect, it should look like something like this by default. And then you click on this icon. It basically lets you simulate how your website will look like on an iPhone or on whatever you choose. So, for example, my website, this is how it looks like on an iPhone. See, it doesn't readjust.
It looks kind of ugly. And to keep this short into five minutes, what I'm going to be doing is I'm going to be, what's it called? I'm gonna be taking I'm gonna make another file. I'm gonna just name this I don't know And nobody at home HTML I'll just name this CSS you can name this whatever Okay, and let me just put the CSS over here.
You don't have to do it like that, but I choose to so I'm gonna just name this I don't know and I'm gonna link the sheet to CSS okay there you go and first I want to do is I'm going to create a div class text and make a paragraph and say hello there you're on a PC PC and put a smiley face so basically I'm gonna make it so when you're on a PC is gonna show this and if you're on a smaller screen or a certain screen that's gonna be it's gonna say something else like you're on a phone so let's do it like this okay I'm gonna change this to hello you're you're on a phone something like that I know the smiley face okay so when you open it up and the tablet's gonna look something like this oh wait i have to add an o there or else it says hell okay there you go so it looks something like this it's gonna look ugly i'm just gonna put this towards the middle and a little bit bigger and change the font size So I'm just going to do.text I'm just going to put it towards the center first So basically margin left and margin right just basically pushes it towards the middle and then putting the text alignment to the center puts it into the center of that and then the font size i'm going to make it 50 pixels and font family i'm gonna make it you can choose whatever for here but i'm gonna just choose the apple systems and i'm gonna go ahead and copy this because so i could write it over here make sure to close okay phone text text okay so if you see right now you see how both of them are showing i only want one of them to show right now so i'm gonna just i'm gonna just disable this one quickly right over here let's put visibility collapsed and there we go To basically make it work for this to appear on an iPhone screen or something, we want to add this Only and dot this a max dot With Let me see what this thing says let me just inspect it okay i'm gonna just do 400 and uh 414 pixels and let me close it off there you go and so i'm gonna make the visibility of the of the regular text to uh to this to um collapse collapsed and whoops phone text i'm gonna just make that visibility and visible okay there we go and if you go to see it it says hello there you're on an iphone and now it's gonna and then if you get out of here it says you're on a pc okay and the reason why i did it like this is because you can change this and like call it functions make your website look different this is just like a quick way to do it to show you guys an example um you don't So yeah, thank you guys. If any more questions leave it down below. Bye