@Ayman-Shakil192
Posted
It sounds like you may be encountering some difficulty in accurately determining the size of elements on your webpage. One possible solution is to use a tool like a browser extension that allows you to measure elements on your page more precisely. Some popular options include Perfect Pixel, and MeasureIt. Additionally, it may be helpful to consult the design specifications or style guide for the project to ensure that you are using the correct dimensions and measurements.
Using viewport units (vw) can be a helpful way to make elements on your page more flexible and responsive to different screen sizes. However, it is important to ensure that your design still looks good at smaller sizes, as you mentioned. One possible solution is to use media queries to adjust the size of the images and other elements at different screen sizes. For example, you might use a media query to reduce the size of the images and adjust their placement on smaller screens.
To ensure that the content within your square containers remains visible and readable at all screen sizes, you may want to consider using responsive typography techniques. This could include using relative units like em or rem instead of fixed pixel sizes for text, as well as using CSS properties like text-overflow and overflow-wrap to ensure that text within containers behaves in a consistent and predictable way. Additionally, you could consider using responsive design frameworks like Bootstrap that include pre-built components and styles for responsive typography.
Marked as helpful
