+ 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?
12 Answers
+ 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.
+ 14
Thank you 😃 Calviղ and Lito Delcid!
I'll try play around for a while 😉
+ 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>
<!-- two h1 and h2 tags -->
</header>
</div>
<div class="container navbar">
<nav>
</nav>
</div>
<!-- TODO: Add more content :) -->
</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;
}
+ 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 🤔
+ 12
Thank you Lito Delcid, I'll try it 😃
+ 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.
+ 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
+ 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?
+ 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>
+ 2
Use bootstrap
+ 2
Use jquery Mobile
0
I'm not sure I know how or what to do to secure my server or my phone information?
Often have questions like this?
Learn more efficiently, for free:
Hot today
Help please?
3 Votes
Ejercicio Pytho
0 Votes
Online voting system
2 Votes
What is that z for
0 Votes
Suggestions needed
4 Votes
SQL practice
2 Votes
Game development
0 Votes