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.
Related
Consider this bar of buttons:
body {text-align: right;}
<button>Save</button>
<button>Cancel</button>
<button>Delete</button>
Now let's say that the last button's content changes:
body {text-align: right;}
<button>Save</button>
<button>Cancel</button>
<button>Click me again to confirm deletion</button>
As you can see, this change in the rightmost button triggered all buttons to its left to move.
To avoid this, I'd like the button's original size to fit the larger one of its two possible contents.
Of course, I can try to "achieve" this in many ways. The simplest and ugliest is to experiment how much width the larger content requires and "hardcode" it:
body {text-align: right;}
#del {display: inline-block; width: 220px;}
<button>Save</button>
<button>Cancel</button>
<button id="del">Delete</button>
However, I consider it a non-solution because it cannot be guaranteed that this width will be the same for everyone else. If someone has a weird font, or uses text magnification, or views the site on mobile, or whatever, then I suppose setting the button's width to a hardcoded value could produce weird results.
Another way, I suppose, would be to (a) Initially put the longer text to the button (b) Get the button's width through JavaScript and save it (c) Put the actual, shorter text to the button and set its width to that value. To my intuition, however, this looks like a horrible hack and overkill.
What is the canonical solution to troubles like this?
I would consider data attribute to add both texts using pseudo elements then control the opacity to hide/show them:
div {
text-align: right;
}
#del {
display: inline-block;
position: relative
}
#del:before {
content: attr(data-text);
position:absolute;
left:0;
right:0;
top:1px; /*there is 1px default padding */
text-align:center;
}
#del:after {
content: attr(data-alt);
opacity:0;
}
#del:hover::before {
opacity:0;
}
#del:hover::after {
opacity:1;
}
<div><button>Save</button><button>Cancel</button><button data-text="Delete" data-alt="Click me again to confirm deletion" id="del"></button></div>
You simply need to know which one will be the wider one to keep it in-flow to define the width and make the other one position:absolute.
You can also keep the main text inside:
div {
text-align: right;
font-size:14px;
}
#del {
display: inline-block;
position: relative;
}
#del span {
content: attr(data-text);
position:absolute;
left:0;
right:0;
top:1px; /*there is 1px default padding */
text-align:center;
}
#del:after {
content: attr(data-alt);
opacity:0;
}
#del:hover span {
opacity:0;
}
#del:hover::after {
opacity:1;
}
<div><button>Save</button><button>Cancel</button><button data-alt="Click me again to confirm deletion" id="del"><span>Delete</span></button></div>
I am building a website with WordPress. On my homepage I want a picture grid (10 x 3) of different products, and when you hover over each picture, a caption with the product name will pop up.
I have managed to do 3/4 of it but there's this massive white space below each row. :(
I am using the SiteOrigin editor widget to insert the image, and using HTML and CSS to code the hover effects. See below for the current coding.
HTML:
<div id="pic">
<img class="hover" src="http://peacefruit.net/wp-content/uploads/2016/11/Hassaku.png" />
<p class="text">Summer Mikan</p>
</div>
CSS:
.text {
color: #000000;
font-size: 16px;
font-weight: bold;
text-align: center;
background: rgba(255, 255, 255, 0.5);
}
#pic .text {
position:relative;
bottom:80px;
left:0px;
visibility:hidden;
}
#pic:hover .text {
visibility:visible;
}
Here's the website so you can see what I've done: http://peacefruit.net
The top row has the captions, but also, the pesky gap. The bottom three rows are examples of how I want it to look (no borders or gaps between pics). All rows and individual widgets have no padding, margins or gutters and I've already adjusted the theme padding to 0 with CSS.
I'm sure it's a simple line of code I'm missing, but it's driving me crazy!
Please send help.
Try adding to your inline css for siteorigin-panels-stretch
overflow:hidden;
height:164.89px;
Hope this works.
Thanks!
In your case
the id should be unique.
So, it is better to change #pic to a class
Also, the <p> tag in your style contain padding-bottom and it will case the white space problem.
Change each pic to the following
HTML:
<div class="pic">
<img class="hover" src="http://peacefruit.net/wp- content/uploads/2016/11/Hassaku.png">
<div class="text">Summer Mikan</div>
</div>
CSS:
.pic{
position: relative;
}
.pic .text{
position: absolute;
top: 80px;
width: 100%;
visibility: hidden;
}
then it should be work.
Stylesheets for WordPress themes can have a lot of CSS bloat, so you're on the right track creating a custom stylesheet, to tackle the styling nuances you desire.
Since this is a responsive theme, it's best to begin solving this from a mobile-first perspective.
The first thing to prune is the bottom-margin: 30px; for .panel-grid-cell, like this:
.home #main .panel-grid-cell {
margin-bottom: 0;
}
The next thing is to correct your HTML mark-up. The value of pic is given to multiple id attributes. An id attribute is used to denote a unique element. The class attribute denotes a non-unique element. pic should be assigned to class attributes instead, since many elements in your layout utilize this hook value. Like this:
<div class="pic">
I'm noticing that img.hover and p.text are getting wrapped in an unnecessary <p> tag. Make sure that this does not happen in the SiteOrigin editor.
You should then prune the bottom-margin: 1.5em for paragraphs inside of the .pic divs (note the designation of pic as a class hook .pic, rather than an id hook, which would have been #pic):
.pic p {
margin-bottom: 0;
}
To get even closer, relative positioning should be used on the .pic div to ensure that the subsequent styling suggestion (position: absolute;) will take effect:
.pic {
position: relative;
}
And then, for the text that appears when hovering an image:
p.text {
position: absolute;
width: 100%;
}
The styles above will work for mobile, but your theme is responsive, and you might need to account for some styling variations with different screen sizes.
For tablets, you'd need a media query like this:
#media (min-width: 600px) {
.some-class {
some-property: some-value;
}
etc...
}
And finally, for desktop:
#media (min-width: 1000px) {
.some-class {
some-property: some-value;
}
etc....
}
Thanks everyone for your help :) After some fiddling around with the suggestions and a software update, there is no gap now!
I thought I'd post my final code in case anyone has a similar problem and it might be of some help. (Note: there are some minor style changes which differ from the original post but have no effect on how it works).
HTML:
<div class="pic">
<img class="hover" src="http://peacefruit.net/wp-content/uploads/2016/11/Summer-Mikan.png"/>
<div class="text">Summer Mikan</div>
</div>
WIDGET CLASS:
fade
CSS:
.fade {
-webkit-opacity: 0.6;
-moz-opacity: 0.6;
opacity: 0.6;
}
.fade:hover {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
.pic {
position: relative;
}
.text {
color: #FFFFFF;
font-size: 22px;
font-weight: bold;
text-align: center;
background: rgba(214, 187, 14, 0.85);
}
.pic .text {
position:absolute;
top: 0px;
width: 100%;
visibility:hidden;
}
.pic:hover .text {
visibility:visible;
}
.pic p {
margin-bottom: 0px;
}
So glad it finally works, much appreciation to everyone!
trying to get my code to change the background image to "color.jpg" when "spiral.svg" is being hovered over. I think im getting closer, definitely missing something but not sure what that is!
HTML
<div class ="spiral">
<img src="spiral.svg">
</div>
CSS
img {
max-width: ???;
max-height: ???;
}
.spiral:hover {
background:url('color.jpg') center;
z-index: some positive number higher than my orig background image?
}
body {
background:url('orig.jpeg') center;
z-index: -60;
}
You may try something like this.
.twitter{
display:block;
border:1px solid red;
width: 30px;
height:30px;
background-image:url(http://i.imgur.com/qM7IYaM.png?1);
background-position:-32px 31px;
transition:0.1s;
}
.twitter:hover{
background-position:-32px 63px;
}
<div href="https://twitter.com/georgevere12" class="twitter">
</div>
looks like this is not possible with just CSS/HTML however this was the best link i found using a tiny bit of jquery https://stackoverflow.com/a/19770298/5225450
I found This article but I want to use a picture in ::before and ::after content attribute, not Font Icons.
Original:
.icon-dribbble:before, .icon-dribbble:after {
content: "\e007";
}
The best I've come up so far (Which doesn't work, The pic does show up but It doesn't work as intended like in the article):
.icon-dribbble:before, .icon-dribbble:after {
background-image: url('icon.png');
background-repeat:space;
background-size: 40px 40px;
background-position:center;
top:0px;
content: "";
}
The problem is your pseudo elements, with no content in them, have nothing to size themselves to so you'll need to size them manually. Firstly, set their display value to block or inline-block, whichever suits your needs. Then set the height and width to the size of your image, which I'm guessing is 40 pixels square.
Also, you've set a value for the top property, without setting one for position. I've assumed and used absolute below.
NOTE: While the above points still apply, the below has been heavily edited from the orginal solution provided following many clarifications from the asker.
.icon{
background:#404040;
border-radius:50%;
display:block;
overflow:hidden;
height:60px;
position:relative;
text-indent:60px;
transition:background .5s;
white-space:norwap;
width:60px;
}
.icon:hover{
background:#3c9;
}
.icon::before,.icon::after{
background-position:center center;
background-repeat:no-repeat;
background-size:40px 40px;
content:"";
display:block;
height:40px;
left:10px;
position:absolute;
transition:top .5s;
width:40px;
}
.icon::before{
background-image:url('http://quran.ksu.edu.sa/images/resize3.png');
top:10px;
}
.icon::after{
/* You'll need a different image below */
background-image:url('http://quran.ksu.edu.sa/images/resize3.png');
top:70px;
}
.icon:hover::before{
top:-70px;
}
.icon:hover::after{
top:10px;
}
.icon:hover::before{
top:-70px;
}
<a class="icon" href="#">text</a>
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.