Starting to lay out

Navigation
1

I'm making a website and seeing the changes with Chrome. I have finished designing the web and all the content when changing to a resolution (1366X768) is misplaced and many elements do not occupy 100% of the box. I mean, I get the feeling that the default view of the Chrome "stretches" all the elements but when I change the resolution everything is unset at a higher resolution.

My question is, how can I lay out the page in a specific resolution?

I paste the code: 

.menu-navegacion {
  position: fixed;
  width: 22%;
  height: 400px;

  margin-top: 200px;
  margin-left: 3%;
  z-index: 10;

  font-size: 1rem;
  font-family: 'Monserrat', Arial, sans-serif;
  font-weight: bold;
  line-height: 50px;
  text-transform: uppercase;
  letter-spacing: 2px;
}


@media screen and (max-width: 480px) {
    body {
        background-color: lightgreen;
    }


@media screen and (max-width: 480px) {
  .menu-navegacion  {
  font-size: 2rem;
}

Note: I can not use Bootstrap because it is an end-of-course project and in this case they do not allow it to be used. Yes it is true that the media query explained them well above and I have not been anything clear.

    
asked by Raúl 18.08.2017 в 19:34
source

2 answers

0

You could use a framework that facilitates this task such as BOOSTRAP, which leaves you responsive to your website, so you should not have much more work,

    
answered by 18.08.2017 / 19:52
source
2

For your elements to keep the format in different resolutions you have to play with @media . It is a rule of css3 that allows having different styles for the same element depending on the size of the screen.

Here you have more detailed information about them.

This would be its syntax: 

@media not|only mediatype and (media feature) {
    CSS-Code;
}

For putting a simple example and so you know how it works.

If we put: 

@media screen and (min-width: 480px) {
    body {
        background-color: red;
    }
}

@media screen and (min-width: 1000px) {
    body {
        background-color: green;
    }
}

This will make when the screen occupies at least 480 pixels it will put the color red, but if it occupies 1000 pixels or more it will paint it green.

It's an example of the most absurd and nobody would do this, but I think you understand the concept of media queries.

Now that is what you have to do, using this that I just showed you, you have to indicate in your browser, that when the height is greater than x pixels, it will pack you in a certain way, and when less than another.

As another option I recommend you use the bootstrap library that already has these rules defined and it is easy to learn how to use them.

    
answered by 18.08.2017 в 19:56
JavaFX: Css or Class Warning: session_start (): Setting option 'auto_start' failed