Answer the question
In order to leave comments, you need to log in
Can this be done WITHOUT Flexbox?
Hello. Here is such a "thing" should turn out as a result ( stretch / narrow the viewport for clarity ):
jsfiddle.net/0na33aea
And here is the video in which I showed how to resize:
vimeo.com/216357461 :)
You need all the same (scrolling at the columns, centering so that it doesn't break when the window is resized).
But WITHOUT Flexbox, if possible.
I tried with blocks, I tried with tables - either one does not scroll, then the other does not center ...
I'm not asking you to lay it out completely. It would be very cool, but there will be enough hints (what, for example, what exactly, etc.).
PS Of course, I understand that Flexbox is a must haveand all that, but... not now, if it's possible to do without it.
PPS Guys, either I don't understand you, or you made me ... also made a video.
Answer the question
In order to leave comments, you need to log in
You can do it on calc(), but it seems that this option will not suit you either?
https://jsfiddle.net/wfL1dq2o/3/
If I understand correctly, we are talking about two strictly centered blocks. This can easily be done using the connected bootstrap and its classes. Because the default columns in the bootstrap are 12, then the classes must be set to a dimension of 6, i.e. .col-lg-6, .col-md-6, .col-sm-6 и .col-xs-6
, for both blocks, respectively. If you need a dimension less than 6, then you can set three each, but for centering in the center, you will have to add the push and pull classes, that is, you need to add classes to the blocks
.col-lg-push-3, .col-md-push-3, .col-sm-push-3, .col-xs-push-3
to the left block with dimension 3 and .col-lg-pull-3, .col-md-pull-3, .col-sm-pull-3, .col-xs-pull-3
to the right block with dimension three. overflow: scroll;
And who canceled media requests? You make a request and assign any css properties to the element at the required resolution. And that's it
@media only screen and (max-width : 480px){
//Стили этого запроса будут применяться только для экранных устройств с шириной области просмотра не более 480px.
}
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question