Designer flying way too close to the sun and making a mess of things.
I think I understand the concept of breakpoints but after playing with them things are now very funky. I was attempting to edit specific to mobile breakpoint but then realized it did impact my desktop layout as well. (I thought it would not).
After trying to clean things up, something is now happening with my spacing and sizing and any new element I add is overly spaced out. (Example - testimonial section or addition of footer).
To make matters more complicated, I do hope to use the overlap images but when going small on viewport size, they don’t scale at all or align to center?
The main thing to understand about breakpoints is that they all override & inherit outwards from the default ( desktop ) breakpoint.
Desktop → Tablet → Landscape → Portrait
If you have larger breakpoints, those inherit upwards;
Desktop → 1280 → 1440 → 1920
Every style setting you set follows that outwards-inherit progression therefore it’s crucial to design outwards from desktop. If you think the font is too large on mobile portrait, Go to landscape first, then tablet, than desktop to identify where you actually want the size override-change to occur.
The biggest mistake I see in designs is when people skip that step and make changes on the breakpoint they’re on, without checking the next-towards-default. You end up accumulating style overrides that are difficult to manage.
Thank you @memetican – Appreciate the detail here. I was working specifically on the “Our Expertise” section on the mobile breakpoint and running into frustrations that when I went back to ‘baseline’ of the desktop I was surprised to find it was disrupted. My understanding, and what you have described is that shouldn’t have been the case. I have reset or copy & pasted back in the original layout clone and trying to pinpoint why that would happen – or rather where I went off the rails. Ultimately going to try to reset everything and try to further understand the FlexChild process a bit more as well.
@Noah-R had posted a video response to another question regarding responsive so I’m also pilfering all of that goodness within my reset. Thanks @Noah-R !!! (video : A Custom Responsive TutorialGuide)
Not sure why the new added elements such as the Testimonial are inheriting such extreme spacing but maybe in my reset and cleanup it will resolve? Fingers crossed.
Okay everything is flowing much better when scaling up and down in viewport size. I am still really struggling with breakpoints. The items I want to alter on Mobile are somehow altering all screen sizes. What am i missing here.
Just a quick look at things for you, but I reckon if you get rid of the Flex attribute on the column (as shown in screenshot), you’ll have better control off those images. Also check the position - absolute with some of the elements and maybe change them to relative for mobile.
(And to concur with Memetican, remember that css styles flow down; as much as some people think mobile is the starting point, desktop styling rules until it is overwritten by something lower, so, for me, I’d always start a build from the desktop position and work down.)
thank you @grantsenior and @memetican! Working through the recommendations and advice now. Really appreciate the time and consideration in your responses.
@memetican your comparison of all the tools and no specifics on sledge hammers vs details chisels puts words to how I’ve been feeling – so many options I’m digging myself in a hole trying things out! will go back to basics on each element.
Just a quick followup that I think I’m getting real close on the responsive detail of the site. Still some tweaking I see visually but looking at things that are working and need tweaks vs not working at all is much easier.
