Page elements not fitting on page

Both your "header wrapper" and "pricing section" are offenders on all your breakpoints of 1440 down. If you toggle display on each of your items you'll be able to find where it is and adjust accordingly.

"header menu"

Sort this out. The gap is causing 1 issue.

I'd kill off the extra break points as well. Is there a reason to have both 480 and 479? You'll just confuse yourself and add bloat.

I’m sorry, I didn’t mention that it www on the testimonies page.

But are you looking at the home page?

Yes, I looked at the home page. Didn't look at any others. The home page has a few mobile issues.

Looking at the testimonial page, I see you've added multiple "width" properties on elements. Avoiding the "width" property unless you're using responsive units is best. Typically, I find it easier to set the "max-width: 100%" if you need such a setting at all.

How to find the issue:

1. Toggle off all the eyeball container
2. Enable 1 at a time until you see the horizontal scrollbar
3. There may be multiple offenders, so toggle off first offender and continue checking until you find them all
4. Fix 1 section at a time
5. Remove the defined px widths (remove from base token or set to auto on breakpoint)

When you have gap + width + padding, you can end up with non-desired widths. So it's easiest to avoid exact widths and set containers to gap.

what breakpoints do you recommend me utilizing? i want to be sure my site is compatible with most, if not all sites

i fixed that gap on the homepage. i was unaware it was still there

on the testimony page, i hid the elements one by one to see what was causing it. i found the section(s) that were causing it, but i've sized everything to fit the width of the page or is sized smaller than the width of the breakpoint

For simplicity, I'd recommend using Webstudio's default breakpoints. I wouldn't tweak them unless there's some specific reason.

You can avoid dealing with some breakpoint styles by using attributes like clamp. I've been adding font-sizes as clamp so I only need to set them once and they adapt to different screen sizes.

Then you can use other units or wrap to deal with other super simple things. Often, I'll have my flex containers set to wrap then can you min-max widths on children. I set these only on my main breakpoint. (These tricks don't work for everything, but they get you pretty far). Once CSS vars come out, you could probably do much more with them.

thank you very much for your response.

i did a little digging on clamp and found that it has three values to enter.

for the middle value, i also found that you can shift between a static value (40vw) to a percentage (30%vw).

what do you generally use?

I don't have a general, it depends on what I'm going for, the fonts used and other variables.

There's a ton of information about typography online; from math to psychology. If you want really great-looking text, you'll need to study some of this (or find resources you really like and copy what they do).


Here's a basic calculator for using clamp() on fonts. https://websquadron.co.uk/font-clamp-generator/ It can help get you a little bit along the way.

Thank you for this! I will play around with the measurements and see what works for me.

Thanks for taking the time and patience to provide to this thread.