How to make responsive

Asked

Viewed 1,005 times

1

I have this more advanced project , but I left it flat to facilitate the visualization and for you to help me =D , I tried everything possible using the media queries but nothing, I want the window to fit on any screen and the biggest problem being in the pdf reader that does not drag with anything, my css is not there that things there complicates.

If I put all the code here it will be huge, so I made it available on github, thanks since.

https://github.com/rodrigoscsx/PROJETO?

javascript html css media-queries
  • 2

    Dude. Telling you that responsiveness isn’t much of a thing that you take at the end like that and throw it on top. Your project seems to be working in a very locked way already. The best way to do something responsive is to think about it from the beginning. No wonder the term "mobile first".

  • 1

    I agree with everything Leon Freire said. Mobile first!!! The good part is you can use frameworks who do the work: Bootstrap, Foudation, Cardinal, Pure, etc. In addition, your layout should be fluid (use proportions - %, vw, vh, etc. - more than absolute measures - px, pt, etc.

  • yes yes true @Leonfreire but I joined the project then I got the cucumber to solve the responsive, and the layout would have to be like this. is able to change yet?

  • There would have to be a strong CSS there. First thing I realized when I opened index.html is that it’s full of position: fixed. This is horrible for responsiveness. If you want to keep it that way, you’ll have to take them out at least in the media queries and work more with float and with the measures cited above. Example: You spoke of the iframe that does not move. But yours #contentMeioiFrame is with position: fixed; and left: 250px;

1 answer

2


Well, my comment got too big, so I’ll leave it here.

It is possible. But start with mobile, then bigger and bigger screens, until the desktop (which already exists in your case apparently). Set the layout you want and pay attention to the range of settings (320 240 to 640 960).

Use the media queries appropriately. I won’t write any here, but know that the CSS Tricks (more than recommended) already has all the snippets most used.

!!! Pay attention !!!

  1. Some elements of its website simply will not exist in the mobile version, you have to remove them, either for lack of space or for another factor, and this is okay!

1.1 Think about how the menu will be shown. See this example from CSS Tricks

  1. The version mobile is always the one that offers a touch of button, nothing more (figurative), does not let the customer think (don’t make me think principle) E.g.: If the site features are in an area that needs login, show the login right away, you don’t need to show the slider, for example.

  2. Search for plugins to facilitate your service. There are many such as the Isotope

Tip: Write the CSS for each type of screen you want to support in separate CSS files. This will help in maintaining.

Browser other questions tagged javascript html css media-queries

You are not signed in. Login or sign up in order to post.