Latest solutions
Latest comments
- @Shvayne@huanfs
i've looked at your code, i realized that you divide the code in much, much pieces unnescessary. first, to build this layout using flex-box, keep in mind, the body is already an element, that being the case, it's an element with other elements inside him. divide the code only if necessary pieces, like boxes inside other boxes, visualy, the body is one box, you can resize then using "width:100vw; height:100vh" and set it to "display:grid", now use "place-items:center" and all other pieces inside body will be in the center. after that, create another "box" using and "div","section" or "article" tag, set it to a "display:flex" and, inside him you can finally build other two boxes, and set then to "width:50%" and they will have half width of parent element created before
- @coding-stock@huanfs
to solve this problem you can do like me, i've created and variable called "wid", she's contain the width of the screen, i've used "let wid = window.availWidth", and then, in javascript i've switched the layout of menu (in mobile and desktop), according the value of wid, using an if/else conditional, is more easy controls some pieces of layout using javascript, like the menu and they background color, so you can do this think: build the desktop layout and, using javascript you can hide the menu items and create others with a different layout (for mobile) in javascript. if you have any trouble, check my solution or reply
- P@emmecee@huanfs
in smaller components like this, you can use flexbox to build the layout, its more easy
Marked as helpful - @AymaneOnline@huanfs
to solve the problem, you can turn ".error-text" in a positioned element, using "position:relative" and fixing it in a fixed position under the form, and finaly turns it invisible in two ways, or using "display:none" and making it a "display:inline", or making it invisible using "opacity:0" and turning it visible using "opacity:1". in that way, the error message will exists invisible fixed in a position declared and the layout not change while they apears
Marked as helpful - @kayswat@huanfs
try to change the color of label elements to grey, reading the readme-style-guide you can see, the size of elements "--years, ---days, --months" is 35px. try to increase the border-radius to 10px or more. you don't need a ".container" element if you have a ".hero" to house the contents. the input type can be text type too, and in the javascript you turn the value to number using something like "Number(input.value)". and finaly, instead use static values like "px" , try to use "%" or "rem/em" to make all elements responsible, Thus eliminating the need to use media queries
- @nermeennasim@huanfs
In de code above i show you my easiest solution to turn layouts responsive, first i recommend you to separate your code in small pieces like this:
<div id="container"> <--! Here comes all pieces of your code--!> <div id="top"><--!1st piece--!></div><"middle"><<--!2nd piece--!>/div>
<div id="bottom"><--!3th piece--!></div> </div> Now, use "display:flex" property of CSS to turn this small pieces responsive. This is one method to turn layouts responsive. You can use "Bootstrap" framework to turn you code mobile-first layout for all screen size responsiveness. I recommend bootstrap because its easiest!Marked as helpful