Hi
i’ve been away quite a long time (i’m a curious amateur, not a pro) and now html is in number 5, with these fancy responsive stuff and sites available in small devices too
i was invited to mantain a webpage made in Joomla!, but i decided to make a new one, from scratch.
But as time goes by, i’m learning a new whole world of vibrant stuff, such as responsive images, carousell, and so on
against my son’s advice, i didnt use any worldpress template but my own ideas. Anyway i’m a bit sad in so what my site will not be able to be seen in smartphones, because of the width of some layout i have
in 2013 i bought a book called “Build your own website the right way using html and css” and the author uses a side navbar and a main div for content
i adopted that idea, but it does not fit very narrow screen resolutions
You can still have column layouts on the big screen, you just need to adapt the layout for smaller ones.
There are a few methods to do that. One very notable one is media queries, these can be triggered when the viewing window goes above or below a size set by you, allowing you to have css that is conditional according to screen size.
So for example a sidebar can become another full-width block above or below the main block, or be hidden in a roll-out to be expanded.
With modern layout methods like flex box these things can be achieved to some extent without media queries.
The best solution will depend on your intended design, how you want it to look on big screens and how you want it on small ones.
Here are some simple examples.
This using queries
thank you very much, SamA74, that’s exactly what i had in mind
let me introduce two points: one, is that i was waiting for an email infoming someone had posted an answer, but so far nothing happened
the other is that i will have to study carefully your code, because i’m afraid some selectors will conflict with my current style sheet, but then i’ll came here for help
once again thanks a lot
flex is a shorthand property for flex-grow, flex-shrink and flex-basis (for flex children).
There I am setting flex-grow to 3 and basis to 55%.
The flex-basis is defining the width in this case. You may set widths in the usual way with the width, max-width or min-width properties, but the chances are you will need queries to alter them at some point.
flex-basis along with shrink and grow is a looser way of defining width (or height in a column flex), the element will aim to be that width, but may shrink or grow to best fit the environment.
That particular layout is a bit more complex as it has nested flexes, so may be hard to de-cypher for a beginner, I think it was created to answer a layout question here which had some very specific requirements.
This is a good flex reference:-
