-1

I have website but I want to make it responsive for Desktop and phones. Its css contains around 200 lines so what are the ways to do that. So it is necessary to use media query cause then I have to write another 200 lines for that any easy solution for this please help.

Rahul Goswami
  • 34
  • 7
  • It's not always necessary to use media queries. – Kosh Jun 07 '20 at 16:38
  • So what can I use other than this – Rahul Goswami Jun 07 '20 at 16:39
  • https://stackoverflow.com/questions/15061520/responsive-css-styles-on-mobile-devices-only <-- This might be helpful (I'm not entirely sure). – SirSpeciam Jun 07 '20 at 16:40
  • you can use display:flex layout + rem unit – 6fa Jun 07 '20 at 16:41
  • @Soban others ways to fix it then like any library or any tool which can do that for me – Rahul Goswami Jun 07 '20 at 16:42
  • @6fa whats thats gonna do for me like it will automatically change something in css anything like this – Rahul Goswami Jun 07 '20 at 16:44
  • @Rahul Goswami this can make box change accordingly as the width of the screen changes. Rem is based on the font-size of html element，and the font-size of html changes when your screen changes. For example: div {display: flex; } div > div {max-width: xxrem; min-width:xxrem} – 6fa Jun 07 '20 at 17:02
  • I have question that if have a table which is created for the desktop so do I need to create it again for the mobile resolution – Rahul Goswami Jun 08 '20 at 15:46

1 Answers1

1

There are other things and frameworks other than media queries you might consider when making websites responsive.

1: Use Flexbox

The CSS3 Flexible Box, or more widely known as Flexbox, is a new and powerful layout mode in CSS3. It provides us with a box model optimized for laying out user interfaces. With Flexbox, vertical centering, same-height columns, reordering and changing direction is a breeze.

Resource: https://flexboxfroggy.com/

2: Use CSS-Media Queries

CSS Grid is the most powerful layout system available in CSS. It brings a two-dimensional layout tool to the web, with the ability to place items in rows and columns. The importance of grids in modern web design is high so this new spec solves a lot of age-old problems with laying out elements in-browser.

Resource: https://flexboxfroggy.com/

3: Use Bootstrap

Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Bootstrap is completely free to download and use! Bootstrap is a framework to help you design websites faster and easier. It includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels, etc. ... Here are some additional reasons to use Bootstrap: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops.

4: Use Foundtation

Foundation is also counted among exceptional front-end frameworks. It is an ultra responsive framework that is used to create seamless designs to create websites, applications for the web and mobile and email templates. Foundation is the easiest framework to learn and thus it can easily be used by a new user. This exceptional framework has got a number of components including layouts, navigation, media, library containers and much more. Foundation has also got an exceptional list of plugins that offers extended choice to the developers to choose one accordingly.

Tip: When making a website, try to make it mobile first. i.e first make the website responsive for mobile views and then make it for desktop. The reason behind it is that if you make it mobile first, then it also looks good on desktop. But if you design desktop first, it won't look good on mobile.

Hope it helps

Soban
  • 436
  • 5
  • 13
  • So if I have a menu bar for desktop so I have to recreate it for the mobile – Rahul Goswami Jun 08 '20 at 15:46
  • 1
    No. Not necessary. You can use any of the above tools like flex box or CSS-GRID (I prefer both of them the most). If you learn some of the commands of flex box, the menu bar will automatically adjust itself according to the screen size. If you want to learn flex box or CSS-Grid, I have edited my answer so now you can see good resources for learning Flexbox and Grid (both which I prefer the most). – Soban Jun 08 '20 at 16:19