help with responsive design and images.
I have two websites I am currently working on/have completed in the past that I'm trying to move from desktop sites, to mobile friendly design, and I'm struggling on how, and where to start, or where I am doing things wrong with sizing my elements as I've been told multiple different things. (specifically with 'sections/containers' I've been told to use rems, use %s, use vh, vw, for setting heights/widths and frequently run into issues with using those and getting different effects on smaller screens) and its been causing a significant amount of anxiety, and mental turmoil / imposer syndrome and self doubt.
https://limitbreakmma.netlify.app/
https://shaytestingcafe.netlify.app/
Here is the github for the limitbreak site.cod
https://github.com/JoeWebDevelopment/LimitBreak
Here is the github for the resturant site
https://github.com/JoeWebDevelopment/ShayCafe
Any help, or guidance would be greatly appreciated
Level Ground
Your description goes here
Blank Template
Your description goes here
GitHub
GitHub - JoeWebDevelopment/LimitBreak: LevelGround/LimitBreak
LevelGround/LimitBreak. Contribute to JoeWebDevelopment/LimitBreak development by creating an account on GitHub.
GitHub
GitHub - JoeWebDevelopment/ShayCafe
Contribute to JoeWebDevelopment/ShayCafe development by creating an account on GitHub.
1 Reply
All things considered, the first site isn't too bad.
I would make 2 initial suggestions:
- add some padding (nav bar, cards)
- don't make the font-size too small. =.7rem is really too small to read.
However, the second site does have more issues.
These are some of the things I would look at:
- Nav - what to do with this the on smaller screens - it is currently forcing the width. One solution might be to use a "hamburger" menu on smaller screens.
- Several elements have fixed widths (eg search box, "about-container") . These prevent your site from reducing in width.
- padding-left on the "about" element (this really shouldn't be needed even on large screens).
- Fixed heights: a couple of the elements have fixed heights. This is going to make things trickier as the screen gets narrow. If you have to define a height, use min-height so that it can extend if it needs to.
I have taken your second website and made a quick clone on codepen.
I have altered the CSS to make it work with your HTML (I did make the odd change in the HTML, especially in the top bar as you had the logo within the nav items)
https://codepen.io/cbolson/pen/ZEZMJyW
I am not saying that this is contains the best solutions, I just wanted to do something quickly, based on the HTML and CSS that you have, to hopefully help you on your way a little bit.
Note - this uses a single media query breakpoint set at 800px and uses clamp on the larger text blocks to make them responsive.
Note 2 - I didn't provide a solution for the main nav. I cheated and "hid" it on smaller screens. As I mentioned before, you would need to come up with a solution for this. The aforementioned hamburger menu is the most common solution and there are plenty of tutorials, codepens etc. available to show you how this might be done.