While I was learning about making a website responsive I thought I would be able to make any website responsive but now I feel stuck. I am not able to make my website responsive .I am typing css code that I have written so far. Somebody please help me make my website responsive.
here’s the link of my code- https://codepen.io/vinayakTrivedi8/pen/rNwbdMW
First, “responsive” generally means using media queries. And you have only one that’s controlling the size of an H1 tag. Usually, media queries do much more than that to affect the layout & appearance of multiple elements.
Second, @media (max-height:800px) is not a valid media query. I’d suggest reading this page to see where you went wrong: A Complete Guide to CSS Media Queries | CSS-Tricks
Thank you so much ,will go through this article. Thanks for your help
Use a good css framework with responsive containers, Better a light framework to load the page fast. They already use @media behind the scenes
Hey opown thanks for your suggestion, but can you please elaborate on your point, like how can make the framework better.
Use a framework which can help you with aligning the content.
Take for example PrettyCSS. You can choose from hundfreads of css frameworks which you prefer. pretty css can handle some coloring and also align in page for you and also has widgets like the image gallery
With few canges you get CodePen Home Varun mayya - Pretty CSS. The page is clean. The code is more clean also
Advantages of using a css framework;
- add css classes on html is simple
- write less code
- it helps with layout of page
- well tested
- include javascript helpers
One suggestion is to always start narrow and then work your way out. Narrow your browser as far in as it will go and style the page so it looks good at that narrow width (no horizontal scrollbars please). This will be your base CSS. Do not use any media queries at this point,
Once you have it looking good at the narrow width then you can gradually widen your browser until you think you have enough horizontal width to rearrange the elements on the page for a wider view port. This is when you will add your media query break points, using min-width and I would highly recommend you use rem instead of px. You may find you need to add some helper divs for styling purposes. Always narrow your browser to make sure you didn’t break anything at the narrow width.
Thanks bbsmooth will try it. Thank you for your suggestion 
Better use a css framework than reinventing the wheel. If the project is large take a framework as bootstrap, otherwise stick with a light css framework.
Frameworks definitely have their advantages, no doubt about that. In my experience though they are almost always based on px units, such as with media break points, and thus are not really scalable to manual font size changes. Using rem units for break points (and other widths) solves this issue and also allows you to base the break points on the needs of the content instead of predefined view port widths. In my opinion this is a much more flexible and accessible method for laying out the page.
But it does require a little more work and I completely understand why people would choose a framework to make responsiveness a little easier. I just like to go the extra mile and be even more responsive 
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.