Responsive Website at different breakpoints

[Pablo]

I think whatsmyviewport.com is reported the wrong information.
Your breakpoints work correct.

[lpug]

Pablo can you please clear up my question......if an object(s) are invisible (hidden) at break points i.e. 320px & 480px does it mean that any viewports between 320px-480px they will also be invisible (hidden)? if so then I'm not sure whats wrong because this is not the case.

[crispy68]

@Ipug

What Samsung phone are you using? I downloaded your project and uploaded it here and checked it on my Samsung Galaxy 7. It looks correct for me.

In your project, if the viewport width is 480px or below, the shopping bag is hidden. So anyone viewing your site on a device where the viewport width is 480px or below will not see the shopping bag. If you are seeing the shopping bag, then your viewport width is 480px or greater.

I personally like to use the option: Activate breakpoints when browser window is larger than the device width. This will add min-width and max-width to the breakpoints. I find this much better to design with. I would also suggest getting rid of the 640 bp as it is not really needed and would set the layout grids to use flexbox over css grid as it is more acceptable as you will have similar control.

If confused, reach out to me via email at ron@wizbangwebdesign.com and I can send over an updated version of your demo.

[lpug]

@Crispy I have sent you an email, if you could have a sneak look that would be great.

Thanks

[Pablo]

If an object(s) are invisible (hidden) at break points i.e. 320px & 480px does it mean that any viewports between 320px-480px they will also be invisible (hidden)?

Correct. That is how it works, also with your project.