help with responsive css

talesbyfirelight.com
(@talesbyfirelightcom)

9 years, 4 months ago

Hey Everyone!

I’m trying to make my header images all respond similarly across all my pages. The home page works great, as the settings are there in the pinnacle options. But, because I want to change the image for each page I’m using CSS.

This is my Website. talesbyfirelight.com

this what I’m doing in CSS the non-home pages of my website.

——-

/* Spooky Tales */

.spooky-tales .titleclass {
background-position: center center;
background-image: url(http://talesbyfirelight.com/wp-content/uploads/2016/11/SpookyTales_bannerImage_v02.jpg);
background-size: cover !important;
padding-bottom: 200px;
background-color: black;
}

@media (max-width: 768px) {
.spooky-tales .titleclass {
padding-top: 80px !important;
padding-bottom: 0px !important;
}
}

@media (max-width: 768px) {
.spooky-tales .kad-page-title.entry-title{
padding-top: 125px !important;
padding-bottom: 0px !important;
}
}

——

Seems sort of painful. And when I copy the css for the other pages they are all a little off.

Question. Is there a way to combine my @media css so I don’t have to do it twice? Or in my case 6 times. I’m nudging around the padding for the image and the text.

I come from a VFX background working on feature films and they are really picky with everything.

I’m sure you pro’s out there know of a better way to do this.

Thanks again for the help. This Forum is great!

Clint

Viewing 5 replies - 1 through 5 (of 5 total)

(@j09)

Not sure what you’re asking, but if you want the @media combined it would be like this

@media (max-width: 768px) {
  
  .spooky-tales .kad-page-title.entry-title {
padding-top: 125px !important;
padding-bottom: 0px !important;
}
  
  .spooky-tales .titleclass {
padding-top: 80px !important;
padding-bottom: 0px !important;
}
  
}

Also, if you’re doing this for the sake of alignment, and depending on how the page template is laid out, it might be easier to use to following instead of padding

margin: auto;

This reply was modified 9 years, 4 months ago by j09.

Kevin

(@jx-3p)

9 years, 4 months ago

Hi Clint,

I’m a bit confused by what you’re asking. Are you wanting to know if you can place your CSS into a single media query, like this:

@media (max-width: 768px) {
    .spooky-tales  .titleclass {
        padding-top: 80px !important;
        padding-bottom: 0px !important;
    }
    .spooky-tales .kad-page-title.entry-title{
padding-top: 125px !important;
padding-bottom: 0px !important;
    }
    .submit-tale  .titleclass {
        padding-top: 80px !important;
        padding-bottom: 0px !important;
    }
    .submit-tale .kad-page-title.entry-title{
padding-top: 125px !important;
padding-bottom: 0px !important;
    }
    .about-me  .titleclass {
        padding-top: 80px !important;
        padding-bottom: 0px !important;
    }
    .about-me .kad-page-title.entry-title{
padding-top: 125px !important;
padding-bottom: 0px !important;
    }
    .about-me .kad-page-title.entry-title{
padding-top: 125px !important;
padding-bottom: 0px !important;
    }
}

Just so you are aware, the premium version of the theme makes assigning different header images much easier, though your CSS solution should work as well.

-Kevin

Kevin

(@jx-3p)

9 years, 4 months ago

Here is an even further reduction to the CSS:

@media (max-width: 768px) {
    .spooky-tales  .titleclass, .submit-tale  .titleclass, .about-me  .titleclass {
        padding-top: 80px !important;
        padding-bottom: 0px !important;
    }
    .spooky-tales .kad-page-title.entry-title, .submit-tale .kad-page-title.entry-title, .about-me .kad-page-title.entry-title {
padding-top: 125px !important;
padding-bottom: 0px !important;
    }
}

Thread Starter

talesbyfirelight.com

(@talesbyfirelightcom)

9 years, 4 months ago

Wow, thats exactly what I was looking for! Awesome!!!

I don’t even know how to ask questions correctly. Thats how little I know about this stuff.

Thanks to Kevin and J09

@jx-3p
@j09

Kevin

(@jx-3p)

9 years, 4 months ago

No problem! I’m happy to help you learn. 🙂