I am trying to get my page to be responsive for desktop and phone but I just cannot get it to work. I have looked everywhere and still get get my head around it.
I have this meta tag in my html but don’t know what to do next I know I need a media query.
this is the link https://codepen.io/Susan626/pen/bGRNmmx
Thanks for any input!
You should use a narrow-first approach. Narrow your browser as far as it will go and style the page so it looks good at this narrow width. There should be no horizontal scroll bar. This will be your base CSS. Once you get it looking good at the narrow width then you can gradually widen your browser until you have enough room to rearrange for a wider view port. That will be where you place your media query break point. Use min-width and preferably em units to set the break point. And then place any CSS styling changes in the break point.
I just took a brief look at your link. In my experience, it’s best not to use px for sizing. Stick to em or rem. It’s also best to start a layout that is best suited for the smallest device. In general that will be a vertical column of divs. Once you are comfortable with your design, start adding media queries for progressively larger displays. That is where you can start scaling fonts and images.
If you are not familiar with the developer tools in the browser(F12), you may wish to. Within the developer tools, you can set the target device for your page. It basically mimics what you would expect on the device. It will also provide you some insight on your CSS styles are actually behaving. Sometimes, you can be surprised due to lack of specificity of the css selector.
In summary, start building your site for the phone. Having a strong fundamental understanding of html layout is critical. It’s not easy. Using the development tools in the browser can help but learning those can also present a challenge. But again, is necessary to progress. 
Good Luck.
Thank you all. Good information. I am going to start the Landing Page project, it requires a media query. Mine as well move on with the course and learn it at the same time. 
I actually think I need to go over some of the lessons again, I should have started these projects right after I was done to keep the lessons fresh in my mind but unfortunately I put them off.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.