CSS for homepage question

Teetime

I have the following sitewide CSS to manage the footer position on my site. Because I am using the SM fullscreen slideshow on my home page I have to set position:fixed to force the footers to the bottom of the page when on mobile. If I place the red CSS in a home page CSS block it works as expected, applying only to the home page. However, sitewide as shown here, it affects all the pages, as if sm-page-home isn't valid. Can anyone tell me what I am doing wrong here?

I want to put this sitewide because all of my other page-specific code is located there, and also I don't want to repeat the mobile conditional across many pages.

/* Force footer to bottom of page when mobile */
@media screen and (max-width: 670px) {
.sm-page-home [COLOR="Red"].sm-page-powered-by, .sm-page-widget-13192380 {
  position: fixed !important;}
[/COLOR].sm-page-powered-by, .sm-page-widget-13192380 {
  width: 100% !important;}  
.sm-page-powered-by {bottom: 0px !important;}
.sm-page-widget-13192380 {bottom: 35px;}
}

Allen

Order is important. Place specific CSS after general CSS. The last rule will override all previous ones.

Teetime

Allen wrote: »

Order is important. Place specific CSS after general CSS. The last rule will override all previous ones.

Allen, I that makes sense but I'm having trouble understanding why this code could affect any page other than the home page:

[COLOR="DeepSkyBlue"].sm-page-home[/COLOR] .sm-page-powered-by, .sm-page-widget-13192380 {
  position: fixed !important;}

Shouldn't the blue code limit the scope to just the home page? If I comment that line of code out, everything but the home page is ok. With it in, the home page AND other pages are being affected. I've tried this line of code at the top and at the bottom of the previously shown block of CSS code. I must be doing something wrong here but I'm not getting it.

Teetime

Ok, here is what I did through trial and error to fix the problem. Basically I split the two position:fix statements out into their own mobile test statements. Was this what you were getting at Allen? If not, I would appreciate hearing if this is a correct fix (although obviously it seems to work).

/* Force footer to bottom of page when mobile */
@media screen and (max-width: 670px) {
.sm-page-powered-by, .sm-page-widget-13192380 {
  width: 100% !important;}  
.sm-page-powered-by {bottom: 0px !important;}
.sm-page-widget-13192380 {bottom: 35px;}
}

/* Fix SM footer to bottom of home page when mobile */
@media screen and (max-width: 670px) {
.sm-page-home .sm-page-powered-by {
  position: fixed !important;}
}

/* Fix T1S copyright footer to bottom of home page when mobile */
@media screen and (max-width: 670px) {
.sm-page-home .sm-page-widget-13192380 {
  position: fixed !important;}
}

Allen

Teetime wrote: »

Allen, I that makes sense but I'm having trouble understanding why this code could affect any page other than the home page:

[COLOR=DeepSkyBlue].sm-page-home[/COLOR] .sm-page-powered-by, .sm-page-widget-13192380 {
  position: fixed !important;}

Shouldn't the blue code limit the scope to just the home page? If I comment that line of code out, everything but the home page is ok. With it in, the home page AND other pages are being affected. I've tried this line of code at the top and at the bottom of the previously shown block of CSS code. I must be doing something wrong here but I'm not getting it.

That does limit it for that rule but you reversed it by this.
You had this in another rule AFTER the @media one so it will take president.
.sm-page-powered-by, << very general and will override anything above.

Add general rules first then specific ones after that.
Change everywhere with general rule then add CSS rules to select specific areas for override.