Or is it normal to be like that
what happens if you click the breakpoint buttons at the top?
It looked like you were scaling out (making your screen dimensions larger).
I'm trying to scale down. I have no problem with scaling up, it stays in the middle. But scaling down it just does this weird thing although I did the CSS trick which make margin on "auto" on both sides.
The designs is made on 1366 px in the base (star breakpoint)
You can see in the video I tried to make it responsive on 991 breakpoint at 768px for the YT embed container, but it's not staying in the middle as I increase the resolution above 768px.
From 768px to 991 it doesn't stay in the middle maybe because I put the max width to 767px for the YT embed container.
But that was the only way I was able to make it in the middle of canva at the 991 breakpoint at 767px.
Because I was playing with width of element, I had to change margin in each breakpoint to make it center because I didn't find another way to make it center. I know it's the wrong way, but I was desperate ๐
Oooooooh maybe the solution to make the sizes of all elements fit the canva of max width under 991px for 991 breakpoint in order for the auto adjust to center of the canva perfectly ๐คฏ
This is the expected behavior.
Cause I created a project and everything worked perfectly with sizing. Everything stayed in center of canva perfectly in all breakpoints after I adjusted the sizes of course.
However when I added an element bigger than breakpoint. It made the center in another place...
Can you state simply what is the issue you are having that you want fixed? The resizing acts as it should. That's what I thought your issue was.
My issue was even though I made the margins for elements on auto, the center wasn't the middle of the breakpoint.
Then I realized if there's an element bigger than the breakpoint, then the center is not in the middle of breakpoint.
So by extension, the auto I put on margins of the element to make them center works but not in the middle of breakpoint, however the middle of the max size of the widest element on the page
So I think,
the solution in this case would be resizing all elements to max width of breakpoint so the "auto" on margin make the elements in the center of breakpoint width
๐ค
I know sometimes I make a problem out of nothing. I don't mean to I just freak out when things work out different than I expect. Sorry for wasting your time Jeremy, I really appreciate your hospitality โค๏ธ
which part in specific isn't centered? I see this one at your default breakpoint.
Different topic: having this js/css twice can cause issues.
Oh alright, I'll remove the second one
I'd delete the 1367 breakpoint as well.
cool. Now where are you seeing the non-centered item?
Uhm can you wait just a minute I will record what I see in the preview. Thank you in advance! โค๏ธ
ฤฐs it because there are still elements that are not resized yet in this one
....and that's why it's not like this one? ๐ค
ok... there's a lot going on here.
- Your "centering" won't be consistent until you fix items that flow outside of the breakpoints. Turn off all elements except your video iframe and work on that first.
- You have 3 iframes for that video. Delete 2 of them and change the height/width of the leftover one to 100%, control the sizing with it's parent element.
- You can remove styles from smaller breakpoints and set a max-width of 100% on the embed parent at the base breakpoint size.
I'm figuring out the last issue still to have this proper.
Do you think I made a mistake when I Designed everything on desktop first? Should I have finished responsiveness after I finish each section?
Ok got it.
- Select the "box" that's the direct parent of the iframe.
- Remove all breakpoint extra styles on it that are below the main breakpoint.
- Define these settings for your main breakpoint (image)
It will now remain centered and handle responsiveness without extra breakpoint nonsense.
Wow how did you figure this out. I have to read that again to understand
No, desiging at desktop isn't necessarly a bad thing... it's easier and faster.
I would however make each section and make it responsive before moving onto a next section. Personally I copy/paste them all over the place so it's a pain to go back and fix if I didn't setup proper tokens.
Noted sir. I really appreciate your amazing knowledge. Man you're right I should've done that sir
Thank you so much Jeremy. Now I will try to apply what you instructed me now
So all I have to do is to follow these instructions and it will just work like that
In theory, yes. I made those changes in the shared link and they work.
Can I apply these instructions on all elements too ๐ค
Um... maybe, but it depends. If you follow some of John's videos, you will see that he teaches some good practices. He works similar to how I do.
My sites often follow the same structure.
<heading></heading>
<main>
<section></section>
<section></section>
<section></section>
</main>
<footer></footer>
The <sections> can be different styles, but you want a certain structure for SEO, accessibility, and user experience. I create a section at a time and reuse tokens where I can for performance. I make them responsive before I move onto the next section, otherwise you'll have more confusion when trying to track down and overflow issue.
100% I totally agree with both of your teachings. I always noticed how John build sections in tutorials. I never seen him build a section without making it responsive first in every tutorial I have seen
I maybe have done a mistake with not doing that. It's the first website i built and I learned everything from John's Tutorials and your advices as well!!!
Naw, it's not a mistake. When you build more of them, you'll learn things that are a pain to fix and compensate later.
You're so right I'm so glad to be in this supportive community and excited to learn more in the future!! Thank you Jeremy!
