Mattblacktabs, making dropdown menu bigger on iOS/Android Display

[Tomsk]

Hi all,

Hope you are well, Apologies for such a newbie-ish first post. I have the following mattblacktabs layout for my dashboard, which is fine when on a non mobile browser. I love the fact that when it is on a mobile the menu can dropdown. However, I'd like to make the menu take up more of the screen and the text be easier to read when displayed on iOS with bigger dropdowns and a bigger font.

Would you please be able to help?

Have attached a screengrab of how it looks on an Apple iOS mobile.

Many thanks

Tom

Below is the .CSS

<style type="text/css">

.mattblacktabs{
width: 100%;
overflow: hidden;
border-bottom: 3px solid black; /*bottom horizontal line that runs beneath tabs*/
}

.mattblacktabs ul{
margin: 0;
padding: 0;
padding-left: 10px; /*offset of tabs relative to browser left edge*/
font: bold 12px Verdana;
list-style-type: none;
}

.mattblacktabs li{
display: inline;
margin: 0;
}

.mattblacktabs li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background: #414141; /*background of tabs (default state)*/
}

.mattblacktabs li a:visited{
color: white;
}

.mattblacktabs li a:hover, .mattblacktabs li.selected a{
background: black; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
}

</style>

[Beverleyh]

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

Please post a link to the page on your site that contains the problematic script so we can check it out.

Without a link to your web page, you can start by changing the parts highlighted to higher values in your mobile stylesheet;

<style type="text/css">

.mattblacktabs{
width: 100%;
overflow: hidden;
border-bottom: 3px solid black; /*bottom horizontal line that runs beneath tabs*/
}

.mattblacktabs ul{
margin: 0;
padding: 0;
padding-left: 10px; /*offset of tabs relative to browser left edge*/
font: bold 12px Verdana;
list-style-type: none;
}

.mattblacktabs li{
display: inline;
margin: 0;
}

.mattblacktabs li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background: #414141; /*background of tabs (default state)*/
}

.mattblacktabs li a:visited{
color: white;
}

.mattblacktabs li a:hover, .mattblacktabs li.selected a{
background: black; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
}

</style>

If you need more help, please provide a link to your actual web page and also to the source script. If this is a DD script it should be moved to the dedicated DD script help forum.