+ 16

How can I develop an HTML page on my laptop then transfer it to the playground while making sure it works on small screens?

I have been working on a small HTML page on my laptop. It works perfectly on my laptop, however, when I pasted the code in the code playground, all of my styles got mixed up. I know that this is because I was using viewport width and height, and flexbox. I would like to know, is there a way to stop this issue?

html css css3 flexbox

11th May 2019, 1:16 AM

Edwin Pratt

14 odpowiedzi

+ 8

To ensure responsive across different screen, use em instead of px. Only set a primary font size on body in px, use different primary font px for different screen sizes, with @media, all the dimensions and lengths would be adjusted accordingly based on your primary font size.

11th May 2019, 3:00 AM

Calviղ

+ 14

Thank you 😃 Calviղ and Lito Delcid! I'll try play around for a while 😉

11th May 2019, 3:06 AM

Edwin Pratt

+ 13

@Sonic I was actually doing that using vh and vw, however, it seems as the flexbox is centering everything towards the middle. Here is a snippet of my HTML code: <div class="container"> <div class="container header"> <header>  </header> </div> <div class="container navbar"> <nav> </nav> </div>  </div> I know that it looks like a waste to repeat the container class over and over again, but the container class has some flexbox styles that every element needs to have in order to align them (well, at least that is what I think :) ) Here is the CSS: body { width: 100vw; height: 100vh; margin: 0; padding; 0; } .container { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .header, .nav { width: 80%; height: 30px; } Added to the CSS, each individual tag has some padding... .nav > ul > li { padding: 5px; } .header h1 { margin-bottom: 20px; }

11th May 2019, 1:52 AM

Edwin Pratt

+ 13

Lito Delcid I just tried it, and there seem to be a little issue though 😅 The items in the header has shrunken in size, which is sufficient as it fits the window. However the navbar just shifted so that it is on top of the header 🤔

11th May 2019, 3:02 AM

Edwin Pratt

+ 12

Thank you Lito Delcid, I'll try it 😃

11th May 2019, 2:47 AM

Edwin Pratt

+ 11

I've found a way by using a modified version of Calviղ's suggestion. First, I will create a boilerplate for the code with basic styles and text on SoloLearn's web editor. Once I'm done, I can add media queries that follows a mobile-first approach.

13th May 2019, 2:03 AM

Edwin Pratt

+ 11

Troy Cooper Hey there, Please may you ask a new question regarding your problem. This is a question that I with a code. Please read the following: https://www.sololearn.com/discuss/1316935/?ref=app

13th May 2019, 4:49 PM

Edwin Pratt

+ 7

I don't know the answer but do you want to adaptively determine the dimensions of the browser display and adjust the style width/height accordingly?

11th May 2019, 1:34 AM

Sonic

+ 5

Just set the meta viewport for it to automatically fit to the device width : <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>

11th May 2019, 5:06 PM

David Holmes Ng'andu