Making my site responsive
Hello everyone,
I made a website and tried to see it on my phone.
But i was terrible.
I don't really know how to make my website responsive.
Could you guys help me?
Here is my code: https://jsfiddle.net/uz1b5ge6/1
I set index.html and my css. But if you need something else ask me.
Thanks in advance
Noé
FitTrack - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
7 Replies
if you're looking for tips or help with a specific aspect of making it responsive, that's fine, but no one here is going to make your site responsive for you...
If you don't have anything specific to ask, I'd recommend following the free Conquering Responsive Layouts course first. It'll give you a good base knowledge of making responsive sites
Thank you I will do that
I took a moment to look over your code. Here are a few notes.
1) Remove the 100% on the body, this is causing the width to be shifted 20px off of the browser. The reason why is due to how box model works when you set width AND padding they are added together. So 100% + 10px padding of the left and + 10px padding of the right is 100% + 20px or wider than the actual browser page.
By default your body should be 100% of the browser, so you dont need to add this. You can also use box-sizing: border-box, which would change how the browser calculates width to not include padding and border.
2) The same goes for your .container tag for the same reason as the body. You are adding 10px padding to the sides of the .container ON TOP of the 100%. Once again, I suggest not using width: 100% since this is the default anyway or using box-sizing: border-box.
3) remove the max-width on the .container this allows your content to grow for large sizes. I would also recommend setting up @media queries to change the layout for different widths.
4) Remove the width of 410px on the h3, this will cause issues if the width of the browser is less than 410px because the h3 HAS to be 410px causes weird issues on placement.
5) I recommend uses rems instead of pixels for font size. This allows text to scale in ratio relater than being a finite size that can not change. This works better for browsers that may have a different default text size.
Hope this helps. Out of curosity, did you write this code or generate from a program like Framer or Figma?
By default your body should be 100% of the browser,This is incorrect (for height at least, I didn't realize you're talking about width, mb) Also REMs can be good to scale with fontsize but has nothing to do with screen responsiveness. Often the best width is no set width or a max-width. Let your content determine size almost always. I'm a big believer in just using REM blindly for everything is WORSE than px as always #depends
Thank you it helps me a lot. I write this code myself but sometimes I asked a little bit help to copilot.
But how can I set then that my container has that width because I dont want that my container is the whole page. Do i need to use em, % or vw?
Use REM but test it by increasing your root/browser fontsize. Make sure it behaves how you expect. Depends on the container and it's contents you can just use px too.
Rem or ch will change it's size based on the font size
My opinion is to set
max-width: 60ch;. ch is the width of the 0 character in the current font family so bigger font size will have a wider ch value, and takes into account italics, bold, etc.
60 is a solid starting point. The "optimal" line length is between 50–75 characters—though some sources say you can go as wide as 90, but that's silly IMO. Most sources agree 60–70 is the Goldilocks Zone. So start there.
Of course, you can go really crazy and use some maths inside a width property to make it very responsive:
This makes the width of the container element the smaller of 60ch or 2rem less of 100% and centers it horizontally. This means that there's going to be at least 1rem of padding on the left and right but once 60ch is smaller than the 100% - 2rem it'll cap at 60ch.