We are a small art gallery building a wordpress website - you can see the work in progress here:http://kiraaskaroff.com/BB_Test2/
The footer looks great on a computer but with its fixed layout it looks rubbish on a mobile device (part disappears etc)
* footer */
#footer-content { margin-top: 60px; max-width:978px; min-width:320px; height:230px; overflow:hidden; padding-top:0px; padding-left:200px; font-family:Georgia; color:#3F3F3F; font-size:12px; text-align:left; }
#footer-left { float:left; width:199px; height:182px; overflow:hidden; }
#footer-mid1 { float:left; width:230px; height:182px; overflow:hidden; }
#footer-mid2 { float:left; width:138px; height:182px; overflow:hidden; }
#footer-right { float:left; width:180px; height:182px; overflow:hidden; }
.footer-header { font-family:Georgia, font-size:14px ; font-weight: bold; display:block; color:#3F3F3F; padding-bottom:16px;text-align:left; }
.footer-social-a { display:inline; padding-right:5px; padding-top:18px;text-align:left; }
.styles #page .site-info a {
font-size: 12px;}
Any help making it look better on a mobile would be amazing!
You'll need to do some research into media queries, which will allow you to apply different CSS at different screen sizes. Because even if you get it looking correct on mobile-sized screens, it'll still look broken on sizes between mobile and desktop (try resizing your browser on desktop to see what I mean).
For example, your desktop footer has for columns - there might be some screen sizes where you want two rows of two columns, while on mobile you probably want one column with four rows.
To get you started, adding this at the bottom of your stylesheet should help with your specific question (one column with four rows):
#media only screen and (max-width: 620px) {
#footer-content {
height: auto; /* Remove the fixed height - that's the reason not all the footer is visible */
padding-left: 2%; /* On desktop you have a lot of space on the left - it's not needed on mobile */
}
#footer-left,
#footer-mid1,
#footer-mid2,
#footer-right {
width: 100%; /* Make each column takes the full width available */
height: auto; /* If you leave the fixed heights from the desktop version you'll have strange gaps */
padding-bottom: 10px; /* Make sure you have a minimum gap between the rows */
}
}
I haven't fully tested, but it should do as a starting point.
Related
Intro
this is similar to this question but unfortunately the answer only applies to greasmonkey (which only works on firefox). Further, this was asked on the stylish forum but the answer was ambiguous.
Question
I want to remove the left column in the azure help page and
expand the main body to make it cover the widht of the screen.
The first part can easily be done by this
#sidebarContent {display:none}
How ever the second part must conver this
media (max-width: 1199.99999px)
to this
media (max-width: 100%)
But I have no idea how to do that using stylish.. ideas?
To override a media query you just need to load another media query - that also applies to your device - after it.
Well...you want a blunt media query that applies to everything. The best way is to use #media (min-width: 1px) since that includes all devices.
Now, put it all together - along with some other CSS cleanups like padding and margin removal and setting a new width for .mainContainer and you get this
#sidebar {
display: none;
}
#media (min-width: 1px) {
.mainContainer {
margin: 0 auto;
width: 100vw;
padding: 0;
}
body>.container {
padding: 0;
}
}
New code: (with different selector for width)
#sidebar {
display: none;
}
#media (min-width: 1px) {
.mainContainer { /*example styles*/
margin: 0 auto;
width: 100vw;
}
body>.container {
padding: 0;
}
body>.mainContainer>main {
max-width: 100vw!important;
}
}
You still have to adjust the padding to your preference as setting the padding to 0 breaks the design a little bit but this should be good starting point.
Before:
After:
I have been searching for a while trying different methods to try and remove white space between my images on the home screen on my mobile version. It only occurs on my mobile version. My url for the site is below:
https://athleteperks.co.uk
I also have a thin small white gap between two images on my home screen which wold also be great to remove. It would be great if someone could help.
thanks
If you are referring to the bottom 5 images before the footer there is padding that needs to be removed on mobile state 767 like so:
.fw-row .blog-grid-items {
padding:0;
}
.blog-grid-items .blog-item.col-sm-sf-5 {
padding:0;
}
Adding the above CSS makes the last 5 images full width on mobile and eliminates white space.
Also removing the below CSS eliminates the small 1px gap between the two images on your home screen:
.row:not(.fw-row) .spb_swift-slider .swift-slider {
margin-left: 0;
}
Edited Answer
The below CSS needs to be added to your stylesheet in order to remove the white space from the images on mobile:
.spb_text_column, .spb_content_element {
margin-bottom: 0;
}
/* Mobile media query */
#media (max-width: 767px) {
.swift-slider-outer {
height: auto !important;
}
}
In order for the above media query to work you must have in your head file the following:
<meta name="viewport" content="width=device-width, initial-scale=1">
here is the code if you want to rid out the space in between the 5 images in the same row:
.col-sm-sf-5 {
width: 25%;
padding: 0px;
float: left;
}
.row:not(.fw-row) .spb_swift-slider .swift-slider {
margin-left: 0px;
}
.row {
margin-left: -15px;
margin-right: -15px;
}
.blog-grid-items .blog-item {
margin: 0 0 0px;
height: 330px;
padding-top: 0;
}
If you want to modify the design only for a mobile version, with resolution 1024 px, add this code and put inside this code your new classes above.
#media only screen and (max-width : 1024px) {
.classname {
/* other styles here */
}
}
I'm having trouble with the main menu in the header of my Wordpress site here: http://eptestdev.us/qa
The only way I can get it to fill the entire box is by declaring it to have a width of 950px. However, I want it to disappear when the user is on a mobile device leaving just the mobile menu.
My CSS looks like this, but it is not working:
#media screen and (max-width: 900px){#access {display:none;}}
Not sure how I can get it to collapse otherwise. Any help would be appreciated.
You just need to add the !important tag to your css, so that it overrides everything else. Like this:
display: none !important;
I tested this on your site and it worked.
In general it's good to avoid using !important - and instead use CSS's natural way of determining which rule is used.
Earlier rules (at the top of the stylesheet) are overruled by later ones:
.box { width: 200px; border: 1px solid black }
.box { width: 500px; }
The second rule will override the previous width declaration, giving you a 500px box with a black border.
In your case, the reason your media query rule isn't working is because it occurs before the 'normal' one. If you switch:
#media screen and (max-width: 900px){#access, #copyright, .menu-footer-menu-container {display: none;}}
/* ... other rules ... */
#access, #access-footer {
background:#000000;
clear:both;
display:block;
float:left;
margin:0 auto 2px;
width:100%;
max-height:20px;
}
with
/* ... other rules ... */
#access, #access-footer {
background:#000000;
clear:both;
display:block;
float:left;
margin:0 auto 2px;
width:100%;
max-height:20px;
}
#media screen and (max-width: 900px){#access, #copyright, .menu-footer-menu-container {display: none;}}
This rule will work without needing to use !important.
There are other ways to make rules keep: for instance, a more specific rule will be used before one that is more generic:
#menu .submenu-item { color: green; }
.submenu-item { color: red; }
As long as your .submenu-item divs are within a '#menu' div, they'll be green, because the subsequentcolor: red` declaration doesn't have the same level of specificity.
You can read more on this here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Created a responsive site in Dreamweaver CS6 using the Fluid Grid system. All break points initially worked fine, and I had 3 separate layouts for desktop, tablet, and mobile; with different resolutions, each Fluid Grid Layout Div Tag would rearrange on the page into different columns. Every div on the page is set up with width: __%; in the CSS so that they expand and contract with the browser size.
Everything is responsive on the page and works correctly; however, somewhere during development I lost the Tablet break point, in a sense. When the browser reaches the 768px width which should break the page into the Tablet layout, it instead jumps straight to the mobile formatting, which should not happen until 480px.
In Dreamweaver, I can view the formatting I have set for the Tablet layout, in Design mode it will show me the correct layout of columns of DIVs and content; however, once I place DW in Live mode, or preview in a browser, it no longer has the Tablet functionality, just Desktop and Mobile formatting.
I will post the CSS code for the #media queries and the subsequent .gridContainer code - trying to see if a solution could be found without having to post the entire CSS code, as there's quite alot. Please let me know if I need to edit my question and include more code - perhaps the truncated code of a few DIVs and their responsive values for each layout? I'd be happy to post any more information if it will help resolve this issue.
Thank you in advance for any support or advice!
CSS:
/* Mobile Layout: 480px and below. */
.gridContainer:before, .container:after {
display:table;
content:"";
zoom:1 /* ie fix */;
}
.gridContainer:after {
clear:both;
}
.gridContainer {
width: 96%;
padding-left: 1.5%;
padding-right: 1.5%;
border:1px solid #00133e;
background: #004aa1;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
#media only screen and (min-width: 481px) {
.gridContainer:before, .container:after {
display:table;
content:"";
zoom:1 /* ie fix */;
}
.gridContainer:after {
clear:both;
}
.gridContainer {
width: 96%;
padding-left: 1.5%;
padding-right: 1.5%;
}
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
#media only screen and (min-width: 769px) {
.gridContainer:before, .container:after {
display:table;
content:"";
zoom:1 /* ie fix */;
}
.gridContainer:after {
clear:both;
}
.gridContainer {
width: 96%;
padding-left: 1.5%;
padding-right: 1.5%;
}
}
Found the solution:
Near the end of my mobile layout CSS style code, there was an extra curly brace. Removed the brace, responsiveness returns.
Very simple solution; thanks to #MrRO for pointing me in the right direction to look!
Assuming, this is copy paste of actual code. In the given CSS, I believe you have have missed one curly braces, which was suppose to close the style for <480 width devices.
background: #004aa1;
} <-- Here one more "}" needed
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
#media only screen and (min-width: 481px) {
.gridContainer:before, .container:after {
I am working with an existing piece of CSS code that looks like this (excerpted from a much larger body of code):
.apl_widget_fourLevel {
margin:0 auto 1em;
overflow:hidden;
/* zoom:1 */ /* IE Sheet */
}
/* a panel container */
.apl_widget_fourLevel .apl_widget_level {
float:left;
position:relative;
overflow:hidden;
text-align:center;
width:102px;
height:150px;
margin:0 1px 0 0;
}
/* extra height for widgets with the supplementary data beneath the panels */
/* reset width for selected mini panels */
.apl_widget_fourLevel.apl_widget_client1 .apl_widget_level {
height:auto;
}
/* extra height for widgets with the supplementary data beneath the panels */
/* reset width for selected mini panels */
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level {
height:auto;
width:90px;
}
/* reset width for selected mini panels */
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected {
width:102px;
}
/* the gray label in the panel
enforce for mini display */
.apl_widget_fourLevel .apl_widget_level .apl_widget_label,
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_label {
position:absolute;
top:20px;
left:0;
width:100%;
margin:0;
color:#555;
font-weight:normal;
text-transform:uppercase;
font-size:100%;
line-height:1.0em;
z-index:1;
}
/* offset for mini labels */
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level .apl_widget_label {
margin-top:20px;
font-size:85%;
}
/* label cascade reset for IE6, sigh */
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_label {
margin-top:0;
font-size:100%;
}
/* the value displayed in the panel */
.apl_widget_fourLevel .apl_widget_level .apl_widget_value,
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_value {
position:absolute;
top:45px;
left:0;
width:100%;
margin:0;
color:#fff;
font-weight:bold;
font-size:28px;
line-height:1.0em;
z-index:1;
}
/* offset for mini value */
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level .apl_widget_value {
margin-top:15px;
font-size:24px;
}
.apl_widget_fourLevel.apl_widget_client1 .apl_widget_level .apl_widget_value {
margin-top:3px;
font-size:20px;
font-weight:normal;
opacity:0;
-moz-opacity:0;
-webkit-opacity:0;
filter: alpha(opacity=0);
}
/* value cascade reset for IE6, sigh */
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_value {
margin-top:0;
font-size:28px;
}
/* range values smaller */
.apl_widget_fourLevel.apl_widget_fourLevelRange .apl_widget_level .apl_widget_value {
margin-top:7px;
font-size:15px;
}
.apl_widget_fourLevel .apl_widget_value a {
color:#fff;
}
/* supplemental value beneath the panel */
.apl_widget_fourLevel .apl_widget_level .apl_widget_valueScore {
position:absolute;
bottom:0px;
left:0;
width:100%;
color:#0072ad;
font-weight:bold;
font-size:28px;
z-index:1;
}
.apl_widget_fourLevel .apl_widget_level .apl_widget_valueScore a {
color:#0072ad;
}
/* low values will be lighter color */
.apl_widget_fourLevel .apl_widget_level.apl_widget_levelLow .apl_widget_valueScore,
.apl_widget_fourLevel .apl_widget_level.apl_widget_levelLow .apl_widget_valueScore a {
color:#30a2dd;
}
/* the image container element */
.apl_widget_fourLevel .apl_widget_level .apl_widget_panel {
overflow:hidden;
width:100%;
height:135px;
position:relative;
}
/* the panel image itself */
.apl_widget_fourLevel .apl_widget_level .apl_widget_panel img {
position:absolute;
top:0;
left:-5px;
margin-top:-150px;
}
/* Individual Level image offsets */
.apl_widget_fourLevel .apl_widget_level.apl_widget_level1 .apl_widget_panel img {
left:-5px;
}
.apl_widget_fourLevel .apl_widget_level.apl_widget_level2 .apl_widget_panel img {
left:-105px;
}
.apl_widget_fourLevel .apl_widget_level.apl_widget_level3 .apl_widget_panel img {
left:-205px;
}
.apl_widget_fourLevel .apl_widget_level.apl_widget_level4 .apl_widget_panel img {
left:-305px;
}
/* mini panel offsets */
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level .apl_widget_panel img {
margin-top:-300px;
margin-left:-6px;
}
/* reset image offset via margin for highlighted/selected style */
.apl_widget_fourLevel .apl_widget_level.apl_widget_levelSelected .apl_widget_panel img {
margin:0;
}
My major problem with this is the complexity: every rule has 3-5 selectors on it, making it really hard to figure out which rule applies. There are 25 rules here for styling four buttons with text. It can't be that hard!
Some background: this CSS styles a widget that shows four bitmapped images, one of which is selected, from a single bitmap using CSS sprites. Unselected images come from one row of the large bitmap and the image in the selected state comes from another row. The selected image is put into a box that is wider and taller than the boxes of unselected images.
So is there a program that will simplify this to something cognitively manageable? Is there a tool that can identify which values are unnecessary because they are replaced by more specific selectors? Are there best practices for dealing with CSS so that you don't get unnecessarily selective paths?
Update: 2010-08-31 12:25
So I looked into less as a way of conceptualizing the CSS code. And because my code isn't in less, I looked up css2less. Here is an excerpt of what css2less produces on the code in question:
.apl_widget_fourLevel {
margin:0 auto 1em;
overflow:hidden;
.apl_widget_level.apl_widget_level1 {
.apl_widget_panel {
img {
left:-5px;
}
}
}
.apl_widget_level.apl_widget_level2 {
.apl_widget_panel {
img {
left:-105px;
}
}
}
.apl_widget_level.apl_widget_level3 {
.apl_widget_panel {
img {
left:-205px;
}
}
}
.apl_widget_level.apl_widget_level4 {
.apl_widget_panel {
img {
left:-305px;
}
}
}
....
}
So here's the thing: apl_widget_levelX are actually unique. I think a good tool could generate this:
img#apl_widget_level1 { left:-5px; }
img#apl_widget_level2 { left:-105px; }
img#apl_widget_level3 { left:-205px; }
img#apl_widget_level4 { left:-305px; }
.apl_widget_fourLevel {
margin:0 auto 1em;
overflow:hidden;
....
}
Similar comments for the selected/unselected elements.
I like where the answers are going but I am looking for tools to make my life easier. The full CSS code in this file is 2500 lines and the entire suite is 11000 lines.
Update: 2010-09-01 09:50
This is what I turned it into by hand:
ul.apl_widget_content {
width: 492px;
height: 140px;
position: relative;
}
ul.apl_widget_content li {
background: url(/home/hbrown/tmp/widget_fourlevel_1.png) no-repeat;
list-style: none;
display: inline;
position: absolute;
text-align:center;
text-transform:uppercase;
}
#apl_widget_level1 {
left:5px; top: 0px;
background-position: -13px -300px;
width: 86px; height: 133px;
}
#apl_widget_level2 {
left:105px; top: 0px;
background-position: -113px -300px;
width: 86px; height: 133px;
}
#apl_widget_level3 {
left:205px; top: 0px;
background-position: -213px -300px;
width: 86px; height: 133px;
}
#apl_widget_level4 {
left:305px; top: 0px;
background-position: -313px -300px;
width: 86px; height: 133px;
}
#apl_widget_level1s {
left:5px; top: 0px;
background-position: -5px 0px;
width:102px; height: 133px;
}
#apl_widget_level2s {
left:105px; top: 0px;
background-position: -105px 0px;
width:102px; height: 133px;
}
#apl_widget_level3s {
left:205px; top: 0px;
background-position: -205px 0px;
width:102px; height: 133px;
}
#apl_widget_level4s {
left:305px; top: 0px;
background-position: -305px 0px;
width:102px; height: 133px;
}
div.apl_widget_label {
padding-top: 35px;
font-size: 85%;
font-weight:normal;
top: 20px;
line-height:1em;
}
.selected .apl_widget_label {
padding-top: 15px;
}
div.apl_widget_value {
font-size:24px;
margin-top:10px;
}
.selected div.apl_widget_value {
margin-top:15px;
}
.apl_widget_value a {
text-decoration:none;
color:#FFF;
}
Previously 175 lines. Now 75 lines. Most of the code (40 lines) does the CSS spriting.
Update 2010-09-01 11:30
HTML now looks like:
<ul class="apl_widget_content">
<li id="apl_widget_level1">
<div class="apl_widget_label">Level </div>
<div class="apl_widget_value">1</div>
</li>
<li id="apl_widget_level2">
<div class="apl_widget_label">Level</div>
<div class="apl_widget_value">2</div>
</li>
<li id="apl_widget_level3s" class="selected">
<div class="apl_widget_label">Level</div>
<div class="apl_widget_value">3</div>
</li>
<li id="apl_widget_level4">
<div class="apl_widget_label">Level</div>
<div class="apl_widget_value">4</div>
</li>
</ul>
HTML previously looked like:
<div class="apl_widget_strand_fourLevel apl_widget_fourLevelMini">
<div class="apl_widget_content">
<div class="apl_widget_level apl_widget_level1 ">
<div class="apl_widget_label">Level</div>
<div class="apl_widget_value">1</div>
<div class="apl_widget_panel">
<img alt="" src="widget_fourlevel_1.png">
</div>
</div>
<div class="apl_widget_level apl_widget_level2 ">
<div class="apl_widget_label">Level</div>
<div class="apl_widget_value">2</div>
<div class="apl_widget_panel">
<img alt="" src="widget_fourlevel_1.png">
</div>
</div>
<div class="apl_widget_level apl_widget_level3 apl_widget_levelSelected">
<div class="apl_widget_label">Level</div>
<div class="apl_widget_value">3</div>
<div class="apl_widget_panel">
<img alt="" src="widget_fourlevel_1.png">
</div>
</div>
<div class="apl_widget_level apl_widget_level4 ">
<div class="apl_widget_label">Level</div>
<div class="apl_widget_value">4</div>
<div class="apl_widget_panel">
<img alt="" src="widget_fourlevel_1.png">
</div>
</div>
</div>
</div>
The following are just comments; It's hard to give definitive answers to questions like this, esp. when the HTML structure is not available.
The first thing that really got me was the long class names. When you've got so much repetition within the name of the classes, I think you're doing something wrong. Names like
.apl_widget_fourLevel .apl_widget_level.apl_widget_level1 .apl_widget_panel img
Really should be shortened to (something like):
.apl_widget .fourlevel .panel img
Especially when your selectors are basically 90% repetitive, like
.apl_widget_level.apl_widget_level1
There's just no point for this! In CSS, the cascade guarantees inheritance, so adding a prefix too all your class names is just necessary. Surely if you've gotten to the point of indexing your class names, its time to swap them out for ids, like
#level1
It may seems small, but it really does make CSS more maintainable if you've got selectors that are compact and less repetitious - at least you won't be spending so much time scanning through selectors.
If the HTML structure of the widget is the same throughout the code, then you can actually swap out some of the classes for elements. It will of course reduce style reusability, but given that widgets are often do not share the same structure and design as the rest of the page, it should be possible for simpler widget styles to skimp on classes. Selectors like (say)
.profile img
would certainly be better than to just give that img a class - its both immediately obvious what you're doing, and easy to maintain at the same time.
Something else you might want to do is to only code for special cases, like this very simplified case
a {
color: white;
background: #666;
text-decoration: none;
}
a.special {
color: #B8E9FF;
}
a.brilliant {
color: #FFAFAF;
}
Also, remove the repeated classes that stays the same within each case. Again, use the Cascade to its full potential.
3-5 selectors max is not unusual. 3-5 for every one of them is, though. The CSS selectors should logically go from simple to complex, as more cases are added. Thus, try finding the base of the widget, define a default, and code your way up.
The code snippet itself is not too bad except for the inclusion of too many and overly long class names. Rewriting from the bottom up though can often lead to optimizations, esp. if the requirements of the project has changed since the last developer (We don't need to support IE6 anymore, hurray!) But again, without seeing the structure it's hard to make definitive solutions.
Based on the posted HTML I'd suggest following changes:
The inner classes apl_widget_label and apl_widget_value are unnecessary and can simply replaced with unique elements (that is unique within the li). This may make the selectors slightly longer, but much better structured and more readable. Also the div around the link is unnecessary as the link can be styled directly.
<ul class="apl_widget_content">
<li id="apl_widget_level1">
<div>Level </div>1
</li>
...
with
.apl_widget_content li div {
padding-top: 35px;
font-size: 85%;
font-weight:normal;
top: 20px;
line-height:1em;
}
.apl_widget_content li.selected div {
padding-top: 15px;
}
.apl_widget_content li a {
font-size:24px;
margin-top:10px;
text-decoration:none;
color:#FFF;
display: block;
}
.apl_widget_content li.selected a {
margin-top:15px;
}
You also can move the top, width and height properties in the level rules to the ul.apl_widget_content li(.selected) rules:
ul.apl_widget_content li {
...
top: 0px;
width: 86px;
height: 133px;
}
ul.apl_widget_content li.selected {
width:102px;
}
#apl_widget_level1 {
background-position: -13px -300px;
}
It would be great if you could get rid of the "selected level" IDs (the ones ending with s), but I can't think of a reasonable way which still supports IE6.
I just see that you have set the li to display: inline while keeping block elements insde them. You'll need to be careful with that, because despite being technical correct CSS its exact rendering is not really defined. You may consider display: inline-block or float: left instead.
If it's just for four buttons, I'd pull the page up in a modern browser and use a development toolkit (Firebug in Firefox, Dragonfly in Opera, the WebKit developer tools in Safari/Chrome) to inspect the buttons in question and see what the effective styles are on each.
You might want to go over this article I read not too long back, it has a really good overview of the pro's and con's of organizing your css. I'd also take a look at the bottom of the article it has some links to some more information.
From the looks of things your widget styles did seem to go a little overboard with the classitis, but at least its documented, I can't count the number of times I've seen undocumented css classes.
i think that you need to change the name of your clases, i see that you are using ".apl_widget_label" for almost everything and styling the element depending on the selectors.
for example:
/* the gray label in the panel
enforce for mini display */
.apl_widget_fourLevel .apl_widget_level .apl_widget_label,
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_label {
why not create another class called "mini-display" and then your element would be like:
<div class=".apl_widget_label mini-display">..</div>
and your css would be:
.mini-display{..}
if you don't like it... i've seen some people that creates the classes like this
<div class="left margin-auto big red ...">..</div>
where each class changes something specific on the element (i.e left => float:left;). And they have like a library of classes that they always use.