2
I’m making my first website for a client, missing only make the site responsive. I was wondering how I could do that? most tutorials out there are with bootstrap, but I started and finished the site without bootstrap, have to start using so by the end anyway, or I would have to redo everything?
2
Use Media Queries. Media Queries sets conditions for CSS to be used in specific scenarios. If these conditions are approved, that is, if the device fits all the conditions set out in your Media Querie, the CSS will be applied.
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
2
With or without bootstrap you need to understand about the grid concept
What is a Grid System?
In case you’re new to CSS grid systems, let’s start with a quick definition. In basic terms, a grid system is a structure that allows content to be stacked vertically and horizontally in a consistent and easily manageable way. In addition, the code of a grid system is a "project-Agnostic", giving it a high degree of portability, so that it can be adopted in new projects.
Basic Components
Grid systems include two main components: rows and columns. Rows are used to accommodate columns. Columns make up the final structure and involve the actual content. Some grid systems will include containers, which serve to wrap the layout.
read more on: https://tableless.com.br/entendendo-sistemas-de-grid-css-do-zero/
Browser other questions tagged html css
You are not signed in. Login or sign up in order to post.
With Bootstrap, if you already knew, you could implement it to the site, but without knowledge, I suggest redoing the whole structure of the site and adding it. Without Bootstrap, you can make yourself resposive using CSS techniques such as flexbox and media queries. I advise you to learn these CSS techniques first and then use CSS frameworks like Bootstrap, Bulma, Materialize, etc... to know what they do behind the scenes. There’s plenty of this kind of stuff on Google and Youtube.
– LeAndrade
Completing the answer of Leandrade. Imagine that you are a tailor, then you draw, cut and sew a whole suit, then the client wears the suit and says that it was small... Look at the size of the M... Now imagine that each page you made is a different suit and you made 5 or 6! Something you will be able to enjoy, but it would probably be better to start again from 0 because the responsiveness involves the structural part of HTML, vc needs a Grid etc. A thorough study before starting to redo. Study a lot Flexbox or Grid Layout. Then you can think about using a framework...
– hugocsl