I used to have the default font style of Myriad Pro Light and a padding setting for my main menu on my website as follows:
.menu > li > a { padding: 17px 15px 15px 15px; }
Recently, I changed the default font style to Montserrat. However, this change caused an issue with the display of the main menu on my laptop screen. The combination of the right padding of 15px and the Montserrat font made the menu too wide, causing it to extend beyond the container's width and pushing the last menu item onto a new line. Here it was shown that my screen width is 1366px.
To address this problem, I adjusted the padding to:
.menu > li > a { padding: 17px 7px 15px 15px; }
This solution worked on my screen, but it posed a challenge on larger screens with widths like 1538px and 1600px where a padding of 7px was insufficient, resulting in the menu only extending halfway across the container. For such bigger screens, the ideal padding should be:
.menu > li > a { padding: 17px 35px 15px 15px; }
Although this corrected the issue on larger screens, simply using a fixed padding value could potentially disrupt the layout on other screen sizes.
The best approach here would be to utilize CSS media queries by stipulating:
@media only screen and (min-width: X) and (max-width: Y) {
.menu > li > a {padding: 17px 7px 15px 20px}
}
@media only screen and (min-width: Z) {
.menu > li > a {padding: 17px 35px 15px 20px}
}
While this method effectively solves the issue, determining the correct values for X, Y, and Z can be challenging.
For reference, the responsive stylesheet being used can be found at this link, which contains style rules for various screen sizes including the Base (1180 Grid) and Desktop (960 Grid) layouts primarily geared towards computer screens. After analyzing these styles, I settled on X as 960px (minimum width for computers), Y as 1366px (my screen width), and Z as 1367px (minimum width requiring a padding adjustment).
Despite feeling comfortable with X, I am uncertain about whether Y and Z are correctly designated. Concerns arise regarding potential issues on slightly wider screens like 1380px, where a padding of 7px may be more appropriate, indicating errors in my chosen Y and Z values.
If you have any suggestions on what values to assign to Y and Z to ensure optimal display across all computer screen sizes, please feel free to share your insights.