CSS Mobile menu needs resizing

[intcon]

Hello....I keep getting dinged by Google that my mobile menu is too small and the items too close together. I created the website in Nicepage, and either have to rebuild the site and fix the menu or see if some kind person would tell me which part of the CSS here needs changing. Normally I would just change the font size and padding, but I'm worried if I do that it won't fit in the mobile menu container. I'd greatly appreciate any help!!

[CODE lang="css" title="Mobile Menu"].site-header-menu {
display: none;
-webkit-flex: 0 1 100%;
-ms-flex: 0 1 100%;
flex: 0 1 100%;
margin: 0.875em 0;
}

.site-header-menu.toggled-on,
.no-js .site-header-menu {
display: block;
}

.dropdown-toggle {
background-color: transparent;
border: 0;
border-radius: 0;
color: #1a1a1a;
content: "";
height: 48px;
padding: 0;
position: absolute;
right: 0;
text-transform: none;
top: 0;
width: 48px;
}

.dropdown-toggle:after {
border: 0 solid #d1d1d1;
border-left-width: 1px;
content: "\f431";
font-size: 24px;
left: 1px;
position: relative;
width: 48px;
}

.dropdown-toggle:hover,
.dropdown-toggle:focus {
background-color: transparent;
color: #007acc;
}

.dropdown-toggle:focus {
outline: thin dotted;
outline-offset: -1px;
}

.dropdown-toggle:focus:after {
border-color: transparent;
}

.dropdown-toggle.toggled-on:after {
content: "\f432";
}

.pagination {
border-top: 4px solid #1a1a1a;
font-family: Montserrat, "Helvetica Neue", sans-serif;
font-size: 19px;
font-size: 1.1875rem;
margin: 0 7.6923% 2.947368421em;
min-height: 56px;
position: relative;
}

.pagination:before,
.pagination:after {
background-color: #1a1a1a;
content: "";
height: 52px;
position: absolute;
top:0;
width: 52px;
z-index: 0;
}

.pagination:before {
right: 0;
}

.pagination:after {
right: 54px;
}

.pagination a:hover,
.pagination a:focus {
color: #1a1a1a;
}

.pagination .nav-links {
padding-right: 106px;
position: relative;
}

.pagination .nav-links:before,
.pagination .nav-links:after {
color: #fff;
font-size: 32px;
line-height: 51px;
opacity: 0.3;
position: absolute;
width: 52px;
z-index: 1;
}

.pagination .nav-links:before {
content: "\f429";
right: -1px;
}

.pagination .nav-links:after {
content: "\f430";
right: 55px;
}

/* reset screen-reader-text */
.pagination .current .screen-reader-text {
position: static !important;
}

.pagination .page-numbers {
display: none;
letter-spacing: 0.013157895em;
line-height: 1;
margin: 0 0.7368421053em 0 -0.7368421053em;
padding: 0.8157894737em 0.7368421053em 0.3947368421em;
text-transform: uppercase;
}

.pagination .current {
display: inline-block;
font-weight: 700;
}

.pagination .prev,
.pagination .next {
background-color: #1a1a1a;
color: #fff;
display: inline-block;
height: 52px;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
top: 0;
width: 52px;
z-index: 2;
}

.pagination .prev:before,
.pagination .next:before {
font-size: 32px;
height: 53px;
line-height: 52px;
position: relative;
width: 53px;
}

.pagination .prev:hover,
.pagination .prev:focus,
.pagination .next:hover,
.pagination .next:focus {
background-color: #007acc;
color: #fff;
}

.pagination .prev:focus,
.pagination .next:focus {
outline: 0;
}

.pagination .prev {
right: 54px;
}

.pagination .prev:before {
content: "\f430";
left: -1px;
top: -1px;
}

.pagination .next {
right: 0;
}

.pagination .next:before {
content: "\f429";
right: -1px;
top: -1px;
}

.image-navigation,
.comment-navigation {
border-top: 1px solid #d1d1d1;
border-bottom: 1px solid #d1d1d1;
font-family: Montserrat, "Helvetica Neue", sans-serif;
font-size: 13px;
font-size: 0.8125rem;
line-height: 1.6153846154;
margin: 0 7.6923% 2.1538461538em;
padding: 1.0769230769em 0;
}

.comment-navigation {
margin-right: 0;
margin-left: 0;
}

.comments-title + .comment-navigation {
border-bottom: 0;
margin-bottom: 0;
}

.image-navigation .nav-previous:notempty),
.image-navigation .nav-next:notempty),
.comment-navigation .nav-previous:notempty),
.comment-navigation .nav-next:notempty) {
display: inline-block;
}

.image-navigation .nav-previous:notempty) + .nav-next:notempty):before,
.comment-navigation .nav-previous:notempty) + .nav-next:notempty):before {
content: "\002f";
display: inline-block;
opacity: 0.7;
padding: 0 0.538461538em;
}
[/CODE]

 

[ivan.moony]

CTRL+SHIFT+I swithces to responsive mode in Chrommium. CTRL+SHIFT+M switches to responsive mode in Firefox. In responsive mode you can choose various devices preview, including mobiles and tablets. Responsive mode in Chrommium is said to be more faithful than the one in Firefox.

If you are using Edge, see here.

 

[LTomy]

Hi intcon,
Did it resolve your problem?

 

[intcon]

No....I can see the problem on my google dashboard that the elements are too close together and too small....I need to know how to make them bigger with the code, not just view it with a browser.....make sense? the code needs to change to make the navigation elements further apart and larger....

 

[LTomy]

Using the shortcuts ivan.moony talked about, you can preview your webpage as if the resolution of the screen was different (Like a cellphone). You can then see if the changes you made worked!
Are you confortable with CSS? Like you said, playing with the padding and font-size should work.

 

[LTomy]

Depending on how you menu is made, you could also simply change the width of each element.

 

[intcon]

not very comfortable with CSS at all...lol....the worry was that i would make the font size larger, and it would then be too large for the container....I was hoping someone would tell me which elements to change honestly. I didn't want to break it, but I'll go see what works. thank you.

 

[LTomy]

Without really knowing the structure of your website, it is hard to say... I would recommend to use a 'responsive design', but you probably do not know what it is if you do not really know CSS.
It would be a good idea to give the elements of the menu a width in % when the width of the screen become smaller (So the whole with of the screen is taken).

 

[LTomy]

The following:

@media only screen and (min-width: 500px)
{
}

Applies the CSS styles inside the braces only if the width of the window is of at least 500px.

 

[intcon]

ok thank you!

 

[LTomy]

You are welcome, I hope it helped!