Working with adaptive design
For one of my projects, I need assistance with adaptive design. For my mobile devices, I actually want a different layout from what I have on my PC. What course of action should I take?
#css
#conquering-responsive-layout
10 Replies
with the amount of details you've provided, all I can say in answer is "use media queries"
I want a complete different layout for mobile devices compare to layout which i have created for desktop. And sadly with media queries I can't achieve that
then add markup so you can, or else you'll have to use some kind of server-side logic to fetch different markup depending on the user agent
Can u give me some reference i never worked with adaptive designs
sorry, me neither
you can do a lot with media queries, including changing the order elements appear in if you're using grid or flex, so there's very little you'd need actual different markup for
Could u please tell me how can i use media queries to bring the canvas at the centre and the sidebar downwards in mobile devices
I would like to achieve design similar to this
Someone else might be able to, but only if you share your code
I think that your best option is to use grid-template areas as these can be defined however you like with media queries and this allows you to place the elements wherever you want.
Here is an example https://codepen.io/cbolson/pen/gOQNNVr