Extend footer copyright div background past wrapper

[jknetdesign]

http://ajhproperties.com
On the blue nav bar I was able to create a div to extend to the right.

How can I achieve the same thing on the copyright? I tried the :after pseudo and I tried a similar approach to the header.

.bottom-footer .one_half.last:after

Here’s the design.
http://ajhproperties.com/ajh-footer-extension.jpg

[jknetdesign]

Any ideas on how I can extend the background of the copyright?

[deb]

The way you are trying is not good, you have .container which has overflow hidden, so do like this:

.bottom-footer { position: relative; }
.bottom-footer:after {position: absolute;content:”;background: #c00;width: 40%;right: 0;height: 40px;top:0;} /use #fff instead of #c00, i used it to let you know the difference/

/Now add this css in your .bottom-footer .one_half.last and remove background from there and adjust padding accordingly/
.bottom-footer .one_half.last { position: relative; z-index: 999; background:none }

/This will work for sure/

[jknetdesign]

If you refresh you’ll see I got closer than ever but how would you improve the responsiveness? Something to do with the width on .bottom-footer .one_half.last ?

http://ajhproperties.com/

[deb]

width should not be the problem, you can specify width in your media queries.

[jknetdesign]

Here’s my very time intensive CSS just to get this effect. Please tell me there’s a better way? At least a way that’s not so OCD.

@media screen and (max-width:1600px) {
.bottom-footer:after { 
    width: 29%; 
}   
}
@media screen and (max-width:1500px) {
.bottom-footer:after {
    width: 27%; 
}   
}
@media screen and (max-width:1400px) {
.bottom-footer:after {
    width: 26%; 
}   
}
@media screen and (max-width:1300px) {
.bottom-footer:after { 
    width: 25%; 
}
}
@media screen and (max-width:1200px) {
.bottom-footer:after { 
    width: 26%; 
}
}
@media screen and (max-width:1100px) {
.bottom-footer:after { 
    width: 28%; 
}
}
@media screen and (max-width:1000px) {
.bottom-footer:after { 
    width: 30%; 
}
}
@media screen and (max-width:900px) {
.bottom-footer:after { 
    width: 36%; 
}
}
@media screen and (max-width:768px) {
.bottom-footer:after { 
    width: 41%; 
}
}
@media screen and (max-width:680px) {
.bottom-footer:after { 
    width: 50%; 
}
}
@media screen and (max-width:480px) {
.bottom-footer:after { 
    background: none; 
}
}

[deb]

hi thats too long, use this css, target that .textwidget class

#text-2 .textwidget {
background: #fff;
display: inline-block;
height: 20px;
padding: 10px;
margin-top: -12px;
}

and remove all your media query css.

[jknetdesign]

Thank you. Problem solved!

[Author]

Posts