First time asking for help here hopefully someone can give me some expertise.
Please have a look at this 3 column code on codepen:
It behaves almost like i would like it to.
On desktop it will be a 2-2-8 row.
On mobile it will be a 12-12-12 row so scrolling horizontal while each column fits the screen.
But on ipad i would like it to be [4-4]-8.
So that the first two columns will be scrollable horizontal only showing one of them at a time, and the last column always visible, is this possible without breaking the current layout?
Before we get into attempting the logistics of the layout required it may help if you clarify your intentions with regard to the content you are presenting. Is this layout going to hold real content (like text) or is is just for some scrolling images?
I ask this because horizontal scrolling is generally something you never want to do especially on mobile unless you are making ‘swipeable’ cards or images.
Also because you have fixed the height of the elements to 100% that means the elements can never grow and on a small window or if a user resizes the text your content will flow out of the box as in the screenshot below. If you are just displaying resizable images and very little text then you may get away with what you are attempting but 99% of the time I see height:100% it has been written in error without knowing the consequences.
Normally you would use a min-height:100vh so that elements can grow unless as I say you are making some sort of sideways scrolling carousel or similar. Sideways scrolling sites seldom work well unless they are expertly done and to be honest they have so many accessibility issues it is seldom worth the effort. I dislike them anyway.
You need to forget about devices as I believe there are about half a dozen ipads now of different sizes so you can’t really differentiate between them all. Not to mention a myriad of other tablets all at different sizes. What you need to concentrate on is the behaviour of your design through all widths. You can do this on the desktop by just opening and closing the width of the browser window and when your design looks awkward then throw in a media query at that point and make it look better.
Of course as you are using bootstrap you can go with their built in media queries if you want but they won’t differentiate between device as such. Just use the classes from the bootstrap guide which tells you exactly which classes you need for intermediate devices.
Is visible where?
At the top or bottom or the side?
And by visible I assume you mean fixed positioned? Fixing an element on a smaller screen will eat up a lot of real estate and be hard to control. usually fixed positioned elements are best for small headers footers or small sidebars.
As you can see there is a lot to consider before coding can begin
Thanks a lot for your replies, I understand that my question needs to be more detailed.
Erik_J: I guess that is not necessary to use bootstrap I just used it because I thought it would be easier.
Please have a look at this Email layout done with PureCSS
(yes I know I’m using Bootstrap but the layout will be a good example)
I will call the three columns starting from left: Menu, Email-list, Email-content.
These corresponds to my example First, Second, Third.
In small screens like phones I would like as now to display each column fullsize with possibility to swipe left and right between the columns. (thanks PaulOB for the 100% height tip).
And clicking a link on First will show Second and so on.
On large screens all will be visible just as the example.
But on medium I would like Menu and E-mail-list to be horizontal “swipe-able”.
So only one of them and the E-mail content will be visible at all time.
It looks to me as though you are trying to develop the sort of functions you would get in a native app (or dashboard perhaps) and not usually found on the web for desktop sites. The problem with trying to imitate app functions is that apps are usually developed for one platform (or at least only for mobile content) so that you are able to tailor the design to the devices capabilities.
Trying to create a desktop site that behaves as normal but then imitate a mobile app just for mobile devices is extremely complicated. You can’t reliably detect mobile only devices so in the end you probably need to distinguish devices by touch or mouse (although some tablets have both). In the end it is best to design agnostically as I mentioned previously and just adjust the design when it needs to change rather than chasing devices as such.
If indeed you did want to add swiping card effects to the page then you are going to need to a lot of JS to do this properly and would take a large amount of work to get right.
There are some simple things that can be done in CSS only that may give you a start towards your goal but will require a lot of customisation to get near a useful finished article.
Here is a basic layout that I believe addresses your main requirements (you will need to check in a mobile to see the horizontal swipe) but the problem is that you end up requiring scrollbars everywhere in order to get the horizontal effects and to allow elements to become fixed positioned.
hopefully someone can give me some expertise.
