I am trying to design a landing page for the 1920px breakpoint and 1440px breakpoint. It says that the changes cascade up unless defined otherwise on bigger breakpoints. So when I change sizes of fonts or images on the 1920px break point it should not change the 1440px break view but it is changing simultaneously. I need help to make my site responsive for both screens. Any help is appreciated. Thank you.
Please watch this video to grasp the issue I am facing. I feel like i could not explain it well enough.
You seem to be confusing the margin settings with the absolute settings at the 1440 breakpoint.
ON the video, set height to 100vh, position static. Keep that setting at all breakpoints.
On image 5 - I set the width to 28%, height auto, position static. Max and min height = none
then… the margin top = desktop =6%, 1440 = 4% and 1920 = 2% (no quite perfect)
could I not set different absolute settings for different screens? Or is it just possible with margin setting. (My CSS isn’t great sadly)
I need the text and the images to justify themselves and resize themselves according to the breakpoint without changing the size much. Should I resize the containers according to the breakpoint or should I put in individual styles on the texts and images? Thank you for taking out the time to help me.
I have figured out the issue. It was switching to 1680px screen (my laptop screen size) when i was toggling it. I would like to know if there is any was to design for a 1680px scrren as there is no breakpoint yet of that dimension? Thank you