https://codepen.io/Mosesibb/pen/mdrKGVd
Please can someone view this my landing page on mobile and tell me what is it that am doing wrong that is making it not to be mobile friendly please?
Thanks in advance
The simple, first step to check I do is to open Developer Tools in Chrome (Ctrl+Shift+I) then click Toggle Device Toolbar at the top left of the Developer Tools (Ctrl+Shit+M).
If you use the Responsive setting then you can drag and shrink your viewport. When you web page starts to look wrong then you know you need to put a media query in your CSS to fix that part.
For example, when I get to 576px on your page I see that the video is now too big, so you would need to add a media query to shrink the size of your video.
I see you have a media query at 800px which moves your header to the left. The header needs a little adjustment in this because it is going behind your logo.
The smallest size I work to on mobile is 320px, so ensure it works at that width when you are testing it.
I hope this points you in the right direction.
Also css is read from top to bottom. Its probably best to put your media query at the bottom of your css.
Add more styles inside it. For example you may need the flex direction of your orders to be column at max-width 800px.
Thanks a lot let me go back to work
Ok thanks let me do that now
The best method to ensure that your page is mobile friendly is to use a narrow-first approach when creating your page. At the very beginning of the process, narrow your browser as far as it will go and style the page so it looks good at that narrow width (no horizontal scroll bars). You are not using any CSS break points at this time. You will most likely not need a bunch of fancy layout code (using flexbox or grid) because for the most part you’ll want everything to naturally stack on top of each other in a single column (such as the three bag boxes at the bottom). Your CSS will be rather simple at this point, and that’s OK. This will be your base CSS.
After you have your page looking perfect in this narrow view then you can gradually widen your browser until you feel you have enough horizontal room to move things around for the wider view port. This is when you will set your first CSS break point (place it after the base CSS). Use min-width and em units for the break point. Add any styling changes for the wider layout inside the break point (e.g. adding flexbox/grid to move things around). Repeat this widening/adding break points process as needed.
It is almost always easier to start narrow and work your way wider. Your CSS will be simpler and easier to understand. For wider views you may find that you need to add extra wrapper <div>s and such to help with styling. That is perfectly fine. But always remember to go back and check your narrow view to make sure you didn’t break anything and adjust the base CSS as needed. For simple layouts like this you will find that you will actually need very little CSS for your wider view break point.
Wow nice , thanks a lot
Hi,
Here is a recommended break-points list.
I usually create break-points from bigger to smaller.
Example in this css I created two break-points. First bigger, than smaller. But sometimes necessary to create 3-4. And the above list only a recommendation. Check your code, and if you find any critics break-point where your layout collapse (eg. at 942px) than create a break-point at that size too…
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.