I want to make my website responsive. I am trying many ways i.e used media queries but cannot find a best way as It will be very lengthy and complicated if I will use this. I am truly confused that how I can make my website responsive. Please help me in that.
You should be concerned on the following -
- Appropriate Responsive Breakpoints.
- Fluid Grid.
- Take touchscreens into consideration.
- Use Responsive Images and Videos.
- Typography.
- Use a pre-designed theme or layout to save time.
- Test Responsiveness on Real Devices.
- Overall Design
- Site Interactions
If you are able to design a website with the factors mentioned above, your website would be more responsive. Also do you have any draft ideas for how you are planning to design it? Also make sure to add meta tags as well as it is a key element to advertising your site on a search engine.
Have you tried this? (https://www.freecodecamp.org/learn/responsive-web-design/)
Hi @DivyanshuBatta !
Welcome to the forum!
It would be best if you shared some code of what you tried so people can help troubleshoot the issue with you.
Do you have a link to the site you can share?
My suggestion, use a narrow-first approach to styling. Narrow your browser as far in as it will go and style the page so it looks good (no horizontal scroll bars) at that narrow width. This will be the default CSS. Do not use any break points. Use rem units as much as possible for any type of value associated with the width of an element. If you think you need to set an actual width on an element use max-width instead.
After you have the narrow view looking exactly the way you want it then you can gradually widen your browser until you feel you have enough room to start placing things side by side. This is when you will create your first break point. Use min-width for the break point and I suggest you use rem units for the value as that will make your page responsive to changes in font size as well. Add your CSS changes specific to this break point. You may find you have to go back and add helper divs and such to get the changes you want. This is perfectly fine but always go back and test your narrower widths to make sure you haven’t broken anything.
Continue widening the browser and adding more break points as needed. You probably want to keep things from getting too wide (for example, a lot of people find text too hard to read if the line is too long) so use max-width on elements to prevent this (and again, use rem units).
I don’t think you need to worry about testing responsiveness on a variety of real devices. There are very few differences between how the various browsers render CSS. You just need to test at a wide variety of widths, from very narrow to very wide, which you can do by making your browser as narrow as it can go and then gradually widening it. If you have something on your page that is dependent on view port height then you can also test height as well, but this is much less common so I wouldn’t worry about it unless you are doing something that needs to adjust based on view port height.
Most browsers will narrow down between 400-450 px which is pretty dang narrow. But if you want to go even narrower then use your browser’s Responsive Design Mode feature in the dev tools to make it as narrow as you like. But unless you are specifically designing for very narrow devices I wouldn’t stress too much over this.