Hi,
How do I make the banner and menu stay in the same spots across different screen sizes? Currently they are different compared to a laptop screen size and a wider monitor. See below - the first image is on a wider screen (you can see menu it touching coffee lid), the second is on smaller laptop screen (menu is above coffee lid).
Hi Dekiv,
Ensuring consistent sizing across different screen sizes is important for providing a seamless and user-friendly experience to your website visitors. One way to achieve this is by implementing a responsive design, where the layout and sizing of your website adapt to the size of the screen it is being viewed on.
To make the banner and menu stay in the same spot across different screen sizes, you can use CSS media queries to adjust their positioning and size based on the screen size. You can define different styles for different screen sizes using the @media rule in your CSS stylesheet.
For example, you can set the banner and menu to be positioned at a fixed distance from the top of the screen, and adjust the distance based on the screen size using media queries. Similarly, you can adjust the font size of the menu items based on the screen size to ensure they are legible and not too small or too large.
There are also many responsive design frameworks available, such as Bootstrap and Foundation, that can help simplify the process of creating a responsive design for your website.
I hope this helps! Let me know if you have any further questions.
Hi, thanks for your help. Yeah makes sense, only problem is I don’t really know how to code that.
Does anyone have the correct code to be able to achieve this?
